@mobileai/react-native 0.9.10 → 0.9.11

package/README.md

@@ -198,6 +198,17 @@ Then rebuild: `npx expo prebuild && npx expo run:android` (or `run:ios`)
 
 </details>
 
+<details>
+<summary><b>💬 Human Support</b> — persist tickets and restore them across sessions</summary>
+
+```bash
+npx expo install @react-native-async-storage/async-storage
+```
+
+**Optional** but recommended when using human escalation support. Without it, support tickets are only visible during the current app session and won't be restored after the app restarts.
+
+</details>
+
 ---
 
 ## 🚀 Quick Start

package/lib/module/components/AIAgent.js

@@ -25,11 +25,15 @@ import { AudioInputService } from "../services/AudioInputService.js";
 import { AudioOutputService } from "../services/AudioOutputService.js";
 import { TelemetryService, bindTelemetryService } from "../services/telemetry/index.js";
 import { extractTouchLabel, checkRageClick } from "../services/telemetry/TouchAutoCapture.js";
+import { initDeviceId, getDeviceId } from "../services/telemetry/device.js";
 import { AgentErrorBoundary } from "./AgentErrorBoundary.js";
 import { HighlightOverlay } from "./HighlightOverlay.js";
 import { IdleDetector } from "../core/IdleDetector.js";
 import { ProactiveHint } from "./ProactiveHint.js";
 import { createEscalateTool } from "../support/escalateTool.js";
+import { EscalationSocket } from "../support/EscalationSocket.js";
+import { SupportChatModal } from "../support/SupportChatModal.js";
+import { ENDPOINTS } from "../config/endpoints.js";
 
 // ─── Context ───────────────────────────────────────────────────
 
@@ -79,7 +83,10 @@ export function AIAgent({
   analyticsKey,
   analyticsProxyUrl,
   analyticsProxyHeaders,
-  proactiveHelp
+  proactiveHelp,
+  userContext,
+  pushToken,
+  pushTokenType
 }) {
   // Configure logger based on debug prop
   React.useEffect(() => {
@@ -92,7 +99,70 @@ export function AIAgent({
   const [isThinking, setIsThinking] = useState(false);
   const [statusText, setStatusText] = useState('');
   const [lastResult, setLastResult] = useState(null);
+  const [lastUserMessage, setLastUserMessage] = useState(null);
   const [messages, setMessages] = useState([]);
+  const [chatScrollTrigger, setChatScrollTrigger] = useState(0);
+
+  // Increment scroll trigger when messages change to auto-scroll chat modal
+  useEffect(() => {
+    if (messages.length > 0) {
+      setChatScrollTrigger(prev => prev + 1);
+    }
+  }, [messages.length]);
+
+  // ── Support Modal State ──
+  const [tickets, setTickets] = useState([]);
+  const [selectedTicketId, setSelectedTicketId] = useState(null);
+  const [supportSocket, setSupportSocket] = useState(null);
+  const [isLiveAgentTyping, setIsLiveAgentTyping] = useState(false);
+  const [autoExpandTrigger, setAutoExpandTrigger] = useState(0);
+  const [unreadCounts, setUnreadCounts] = useState({});
+  // Ref mirrors selectedTicketId — lets socket callbacks access current value
+  // without stale closures (sockets are long-lived, closures capture old state).
+  const selectedTicketIdRef = useRef(null);
+  useEffect(() => {
+    selectedTicketIdRef.current = selectedTicketId;
+  }, [selectedTicketId]);
+  // Cache of live sockets by ticketId — keeps sockets alive even when user
+  // navigates back to the ticket list, so new messages still trigger badge updates.
+  const pendingSocketsRef = useRef(new Map());
+  const totalUnread = Object.values(unreadCounts).reduce((sum, count) => sum + count, 0);
+  const clearSupport = useCallback(ticketId => {
+    if (ticketId) {
+      // Remove specific ticket + its cached socket
+      const cached = pendingSocketsRef.current.get(ticketId);
+      if (cached) {
+        cached.disconnect();
+        pendingSocketsRef.current.delete(ticketId);
+      }
+      setTickets(prev => prev.filter(t => t.id !== ticketId));
+      setUnreadCounts(prev => {
+        const n = {
+          ...prev
+        };
+        delete n[ticketId];
+        return n;
+      });
+      if (selectedTicketId === ticketId) {
+        supportSocket?.disconnect();
+        setSupportSocket(null);
+        setSelectedTicketId(null);
+        setIsLiveAgentTyping(false);
+        setMessages([]);
+      }
+    } else {
+      // Clear all — disconnect every cached socket
+      pendingSocketsRef.current.forEach(s => s.disconnect());
+      pendingSocketsRef.current.clear();
+      supportSocket?.disconnect();
+      setSupportSocket(null);
+      setSelectedTicketId(null);
+      setTickets([]);
+      setUnreadCounts({});
+      setIsLiveAgentTyping(false);
+      setMode('text');
+    }
+  }, [supportSocket, selectedTicketId]);
   const clearMessages = useCallback(() => {
     setMessages([]);
     setLastResult(null);
@@ -119,17 +189,373 @@ export function AIAgent({
         role: m.role,
         content: m.content
       })),
-      onHumanReply: reply => {
-        setMessages(prev => [...prev, {
-          id: `human-${Date.now()}`,
-          role: 'assistant',
-          content: `👤 Human Agent: ${reply}`,
-          timestamp: Date.now()
-        }]);
+      userContext,
+      pushToken,
+      pushTokenType,
+      onEscalationStarted: (tid, socket) => {
+        logger.info('AIAgent', '★★★ onEscalationStarted FIRED — ticketId:', tid);
+        // Cache the live socket so handleTicketSelect can reuse it without reconnecting
+        pendingSocketsRef.current.set(tid, socket);
+        setTickets(prev => {
+          if (prev.find(t => t.id === tid)) {
+            logger.info('AIAgent', '★★★ Ticket already in list, skipping add');
+            return prev;
+          }
+          const newList = [{
+            id: tid,
+            reason: 'New escalation',
+            screen: 'unknown',
+            status: 'open',
+            history: [],
+            createdAt: new Date().toISOString(),
+            wsUrl: ''
+          }, ...prev];
+          logger.info('AIAgent', '★★★ Tickets updated, new length:', newList.length);
+          return newList;
+        });
+        // Switch to human mode so the ticket LIST is visible — do NOT auto-select
+        setMode('human');
+        setAutoExpandTrigger(prev => {
+          const next = prev + 1;
+          logger.info('AIAgent', '★★★ autoExpandTrigger:', prev, '→', next);
+          return next;
+        });
+        logger.info('AIAgent', '★★★ setMode("human") called from onEscalationStarted');
+      },
+      onHumanReply: (reply, ticketId) => {
+        if (ticketId) {
+          // Always update the ticket's history (source of truth for ticket cards)
+          setTickets(prev => prev.map(t => {
+            if (t.id !== ticketId) return t;
+            return {
+              ...t,
+              history: [...(t.history || []), {
+                role: 'live_agent',
+                content: reply,
+                timestamp: new Date().toISOString()
+              }]
+            };
+          }));
+
+          // Route via ref: only push to messages[] if user is viewing THIS ticket
+          if (selectedTicketIdRef.current === ticketId) {
+            const humanMsg = {
+              id: `human-${Date.now()}`,
+              role: 'live_agent',
+              content: reply,
+              timestamp: Date.now()
+            };
+            setMessages(prev => [...prev, humanMsg]);
+            setLastResult({
+              success: true,
+              message: `👤 ${reply}`,
+              steps: []
+            });
+          } else {
+            // Not viewing this ticket — increment unread badge
+            setUnreadCounts(prev => ({
+              ...prev,
+              [ticketId]: (prev[ticketId] || 0) + 1
+            }));
+          }
+        }
+      },
+      onTypingChange: isTyping => {
+        setIsLiveAgentTyping(isTyping);
+      },
+      onTicketClosed: ticketId => {
+        logger.info('AIAgent', 'Ticket closed by agent — removing from list');
+        if (ticketId) {
+          setUnreadCounts(prev => {
+            const next = {
+              ...prev
+            };
+            delete next[ticketId];
+            return next;
+          });
+        }
+        clearSupport(selectedTicketId ?? undefined);
       }
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [analyticsKey, navRef, customTools]);
+
+  // ─── Restore pending tickets on app start ──────────────────────
+  useEffect(() => {
+    if (!analyticsKey) return;
+    void (async () => {
+      try {
+        // Wait for the device ID to be initialised before reading it.
+        // getDeviceId() is synchronous but returns null on cold start until
+        // initDeviceId() resolves — awaiting here prevents an early bail-out
+        // that would leave the Human tab hidden after an app refresh.
+        await initDeviceId();
+        const deviceId = getDeviceId();
+        logger.info('AIAgent', '★ Restore check — analyticsKey:', !!analyticsKey, 'userId:', userContext?.userId, 'pushToken:', !!pushToken, 'deviceId:', deviceId);
+        if (!userContext?.userId && !pushToken && !deviceId) return;
+        const query = new URLSearchParams({
+          analyticsKey
+        });
+        if (userContext?.userId) query.append('userId', userContext.userId);
+        if (pushToken) query.append('pushToken', pushToken);
+        if (deviceId) query.append('deviceId', deviceId);
+        const url = `${ENDPOINTS.escalation}/api/v1/escalations/mine?${query.toString()}`;
+        logger.info('AIAgent', '★ Restore — fetching:', url);
+        const res = await fetch(url);
+        logger.info('AIAgent', '★ Restore — response status:', res.status);
+        if (!res.ok) return;
+        const data = await res.json();
+        const fetchedTickets = data.tickets ?? [];
+        logger.info('AIAgent', '★ Restore — found', fetchedTickets.length, 'active tickets');
+        if (fetchedTickets.length === 0) return;
+
+        // Initialize unread counts from backend (set together with tickets for instant badge)
+        const initialUnreadCounts = {};
+        for (const ticket of fetchedTickets) {
+          if (ticket.unreadCount && ticket.unreadCount > 0) {
+            initialUnreadCounts[ticket.id] = ticket.unreadCount;
+          }
+        }
+        setTickets(fetchedTickets);
+        setUnreadCounts(initialUnreadCounts);
+
+        // Show the ticket list without auto-selecting — user taps in (Intercom-style).
+        // setMode switches the widget to human mode so the list is immediately visible.
+        setMode('human');
+        setAutoExpandTrigger(prev => prev + 1);
+
+        // If there is exactly one ticket, pre-wire its WebSocket so it is ready
+        // the moment the user taps the card (no extra connect delay).
+        if (fetchedTickets.length === 1) {
+          const ticket = fetchedTickets[0];
+          if (ticket.history?.length) {
+            const restored = ticket.history.map((entry, i) => ({
+              id: `restored-${ticket.id}-${i}`,
+              role: entry.role === 'live_agent' ? 'assistant' : entry.role,
+              content: entry.content,
+              timestamp: entry.timestamp ? new Date(entry.timestamp).getTime() : Date.now()
+            }));
+            setMessages(restored);
+          }
+          const socket = new EscalationSocket({
+            onReply: reply => {
+              const tid = ticket.id;
+              // Always update ticket history
+              setTickets(prev => prev.map(t => {
+                if (t.id !== tid) return t;
+                return {
+                  ...t,
+                  history: [...(t.history || []), {
+                    role: 'live_agent',
+                    content: reply,
+                    timestamp: new Date().toISOString()
+                  }]
+                };
+              }));
+
+              // Route via ref: only push to messages[] if user is viewing THIS ticket
+              if (selectedTicketIdRef.current === tid) {
+                const msg = {
+                  id: `human-${Date.now()}`,
+                  role: 'assistant',
+                  content: reply,
+                  timestamp: Date.now()
+                };
+                setMessages(prev => [...prev, msg]);
+                setLastResult({
+                  success: true,
+                  message: `👤 ${reply}`,
+                  steps: []
+                });
+              } else {
+                setUnreadCounts(prev => ({
+                  ...prev,
+                  [tid]: (prev[tid] || 0) + 1
+                }));
+              }
+            },
+            onTypingChange: setIsLiveAgentTyping,
+            onTicketClosed: () => clearSupport(ticket.id),
+            onError: err => logger.error('AIAgent', '★ Restored socket error:', err)
+          });
+          socket.connect(ticket.wsUrl);
+          // Cache in pendingSocketsRef so handleTicketSelect reuses it without reconnecting
+          pendingSocketsRef.current.set(ticket.id, socket);
+          logger.info('AIAgent', '★ Single ticket restored and socket cached:', ticket.id);
+        }
+      } catch (err) {
+        logger.error('AIAgent', '★ Failed to restore tickets:', err);
+      }
+    })();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [analyticsKey]);
+
+  // ─── Ticket selection handlers ────────────────────────────────
+  const handleTicketSelect = useCallback(async ticketId => {
+    const ticket = tickets.find(t => t.id === ticketId);
+    if (!ticket) return;
+
+    // Cache (not disconnect!) the previous ticket's socket so it keeps
+    // receiving messages in the background and can update unread counts.
+    if (supportSocket && selectedTicketId && selectedTicketId !== ticketId) {
+      pendingSocketsRef.current.set(selectedTicketId, supportSocket);
+      setSupportSocket(null);
+    }
+    setSelectedTicketId(ticketId);
+    setMode('human');
+
+    // Clear unread count when user opens a ticket
+    setUnreadCounts(prev => {
+      if (!prev[ticketId]) return prev;
+      const next = {
+        ...prev
+      };
+      delete next[ticketId];
+      return next;
+    });
+
+    // Mark ticket as read on backend (source of truth)
+    (async () => {
+      try {
+        await fetch(`${ENDPOINTS.escalation}/api/v1/escalations/${ticketId}/read?analyticsKey=${analyticsKey}`, {
+          method: 'POST'
+        });
+        logger.info('AIAgent', '★ Marked ticket as read:', ticketId);
+      } catch (err) {
+        logger.warn('AIAgent', '★ Failed to mark ticket as read:', err);
+      }
+    })();
+
+    // Trigger scroll to bottom when modal opens
+    setChatScrollTrigger(prev => prev + 1);
+
+    // Fetch latest history from server — this is the source of truth and catches
+    // any messages that arrived while the socket was disconnected (modal closed,
+    // app backgrounded, etc.)
+    try {
+      const res = await fetch(`${ENDPOINTS.escalation}/api/v1/escalations/${ticketId}?analyticsKey=${analyticsKey}`);
+      if (res.ok) {
+        const data = await res.json();
+        const history = Array.isArray(data.history) ? data.history : [];
+        const restored = history.map((entry, i) => ({
+          id: `restored-${ticketId}-${i}`,
+          role: entry.role === 'live_agent' ? 'assistant' : entry.role,
+          content: entry.content,
+          timestamp: entry.timestamp ? new Date(entry.timestamp).getTime() : Date.now()
+        }));
+        setMessages(restored);
+        // Update ticket in local list with fresh history
+        if (data.wsUrl) {
+          setTickets(prev => prev.map(t => t.id === ticketId ? {
+            ...t,
+            history,
+            wsUrl: data.wsUrl
+          } : t));
+        }
+      } else {
+        // Fallback to local ticket history
+        if (ticket.history?.length) {
+          const restored = ticket.history.map((entry, i) => ({
+            id: `restored-${ticketId}-${i}`,
+            role: entry.role === 'live_agent' ? 'assistant' : entry.role,
+            content: entry.content,
+            timestamp: entry.timestamp ? new Date(entry.timestamp).getTime() : Date.now()
+          }));
+          setMessages(restored);
+        } else {
+          setMessages([]);
+        }
+      }
+    } catch (err) {
+      logger.warn('AIAgent', '★ Failed to fetch ticket history, using local:', err);
+      if (ticket.history?.length) {
+        const restored = ticket.history.map((entry, i) => ({
+          id: `restored-${ticketId}-${i}`,
+          role: entry.role === 'live_agent' ? 'assistant' : entry.role,
+          content: entry.content,
+          timestamp: entry.timestamp ? new Date(entry.timestamp).getTime() : Date.now()
+        }));
+        setMessages(restored);
+      } else {
+        setMessages([]);
+      }
+    }
+
+    // Reuse the already-connected socket if escalation just happened,
+    // otherwise create a fresh connection from the ticket's stored wsUrl.
+    const cached = pendingSocketsRef.current.get(ticketId);
+    if (cached) {
+      pendingSocketsRef.current.delete(ticketId);
+      setSupportSocket(cached);
+      logger.info('AIAgent', '★ Reusing cached escalation socket for ticket:', ticketId);
+      return;
+    }
+    const socket = new EscalationSocket({
+      onReply: reply => {
+        // Always update ticket history
+        setTickets(prev => prev.map(t => {
+          if (t.id !== ticketId) return t;
+          return {
+            ...t,
+            history: [...(t.history || []), {
+              role: 'live_agent',
+              content: reply,
+              timestamp: new Date().toISOString()
+            }]
+          };
+        }));
+
+        // Route via ref: only push to messages[] if user is viewing THIS ticket
+        if (selectedTicketIdRef.current === ticketId) {
+          const msg = {
+            id: `human-${Date.now()}`,
+            role: 'assistant',
+            content: reply,
+            timestamp: Date.now()
+          };
+          setMessages(prev => [...prev, msg]);
+          setLastResult({
+            success: true,
+            message: `👤 ${reply}`,
+            steps: []
+          });
+        } else {
+          setUnreadCounts(prev => ({
+            ...prev,
+            [ticketId]: (prev[ticketId] || 0) + 1
+          }));
+        }
+      },
+      onTypingChange: setIsLiveAgentTyping,
+      onTicketClosed: closedTicketId => {
+        if (closedTicketId) {
+          setUnreadCounts(prev => {
+            const next = {
+              ...prev
+            };
+            delete next[closedTicketId];
+            return next;
+          });
+        }
+        clearSupport(ticketId);
+      },
+      onError: err => logger.error('AIAgent', '★ Socket error on select:', err)
+    });
+    socket.connect(ticket.wsUrl);
+    setSupportSocket(socket);
+  }, [tickets, supportSocket, selectedTicketId, analyticsKey, clearSupport]);
+  const handleBackToTickets = useCallback(() => {
+    // Cache socket in pendingSocketsRef instead of disconnecting —
+    // keeps the WS alive so new messages update unreadCounts in real time.
+    if (supportSocket && selectedTicketId) {
+      pendingSocketsRef.current.set(selectedTicketId, supportSocket);
+      logger.info('AIAgent', '★ Socket cached for ticket:', selectedTicketId, '— stays alive for badge updates');
+    }
+    setSupportSocket(null);
+    setSelectedTicketId(null);
+    setMessages([]);
+    setIsLiveAgentTyping(false);
+  }, [supportSocket, selectedTicketId]);
   const mergedCustomTools = useMemo(() => {
     if (!autoEscalateTool) return customTools;
     return {
@@ -152,14 +578,13 @@ export function AIAgent({
   const lastScreenContextRef = useRef('');
   const screenPollIntervalRef = useRef(null);
   const lastAgentErrorRef = useRef(null);
-
-  // Compute available modes from props
   const availableModes = useMemo(() => {
     const modes = ['text'];
     if (enableVoice) modes.push('voice');
-    logger.info('AIAgent', `Available modes: ${modes.join(', ')}`);
+    if (tickets.length > 0) modes.push('human');
+    logger.info('AIAgent', '★ availableModes recomputed:', modes, '| tickets:', tickets.length, '| ticketIds:', tickets.map(t => t.id));
     return modes;
-  }, [enableVoice]);
+  }, [enableVoice, tickets]);
 
   // Ref-based resolver for ask_user — stays alive across renders
   const askUserResolverRef = useRef(null);
@@ -236,20 +661,19 @@ export function AIAgent({
       bindTelemetryService(null);
       return;
     }
-    const telemetry = new TelemetryService({
-      analyticsKey,
-      analyticsProxyUrl,
-      analyticsProxyHeaders,
-      debug
-    });
-    telemetryRef.current = telemetry;
-    bindTelemetryService(telemetry);
-    telemetry.start();
-    return () => {
-      telemetry.stop();
-      telemetryRef.current = null;
-      bindTelemetryService(null);
-    };
+
+    // Initialize persistent device ID before telemetry starts
+    initDeviceId().then(() => {
+      const telemetry = new TelemetryService({
+        analyticsKey,
+        analyticsProxyUrl,
+        analyticsProxyHeaders,
+        debug
+      });
+      telemetryRef.current = telemetry;
+      bindTelemetryService(telemetry);
+      telemetry.start();
+    }); // initDeviceId
   }, [analyticsKey, analyticsProxyUrl, analyticsProxyHeaders, debug]);
 
   // ─── Security warnings ──────────────────────────────────────
@@ -257,7 +681,7 @@ export function AIAgent({
   useEffect(() => {
     // @ts-ignore
     if (typeof __DEV__ !== 'undefined' && !__DEV__ && apiKey && !proxyUrl) {
-      console.warn('[MobileAI] ⚠️ SECURITY WARNING: You are using `apiKey` directly in a production build. ' + 'This exposes your LLM provider key in the app binary. ' + 'Use `apiProxyUrl` to route requests through your backend instead. ' + 'See docs for details.');
+      logger.warn('[MobileAI] ⚠️ SECURITY WARNING: You are using `apiKey` directly in a production build. ' + 'This exposes your LLM provider key in the app binary. ' + 'Use `apiProxyUrl` to route requests through your backend instead. ' + 'See docs for details.');
     }
   }, [apiKey, proxyUrl]);
 
@@ -318,10 +742,10 @@ export function AIAgent({
 
   // ─── Voice/Live Service Initialization ──────────────────────
 
-  // Initialize voice services when mode changes to voice or live
+  // Initialize voice services when mode changes to voice
   useEffect(() => {
-    if (mode === 'text') {
-      logger.info('AIAgent', 'Text mode — skipping voice service init');
+    if (mode !== 'voice') {
+      logger.info('AIAgent', `Mode ${mode} — skipping voice service init`);
       return;
     }
     logger.info('AIAgent', `Mode changed to "${mode}" — initializing voice services...`);
@@ -599,8 +1023,35 @@ export function AIAgent({
   const handleSend = useCallback(async (message, options) => {
     if (!message.trim() || isThinking) return;
     logger.info('AIAgent', `User message: "${message}"`);
+    setLastUserMessage(message.trim());
 
-    // Append user message
+    // Intercom-style transparent intercept: 
+    // If we're connected to a human agent, all text input goes directly to them.
+    if (selectedTicketId && supportSocket) {
+      if (supportSocket.sendText(message)) {
+        setMessages(prev => [...prev, {
+          id: `user-${Date.now()}`,
+          role: 'user',
+          content: message.trim(),
+          timestamp: Date.now()
+        }]);
+        setIsThinking(true);
+        setStatusText('Sending to agent...');
+        setTimeout(() => {
+          setIsThinking(false);
+          setStatusText('');
+        }, 800);
+      } else {
+        setLastResult({
+          success: false,
+          message: 'Failed to send message to support agent. Connection lost.',
+          steps: []
+        });
+      }
+      return;
+    }
+
+    // Append user message to AI thread
     setMessages(prev => [...prev, {
       id: Date.now().toString() + Math.random(),
       role: 'user',
@@ -649,9 +1100,15 @@ export function AIAgent({
           cost: result.tokenUsage?.estimatedCostUSD ?? 0
         });
       }
-      setLastResult(result);
+      logger.info('AIAgent', '★ handleSend — SETTING lastResult:', result.message.substring(0, 80), '| mode:', mode);
+      logger.info('AIAgent', '★ handleSend — tickets:', tickets.length, 'selectedTicketId:', selectedTicketId);
 
-      // Append assistant message
+      // Don't overwrite lastResult if escalation already switched us to human mode
+      // (mode in this closure is stale — the actual mode may have changed during async execution)
+      const stepsHadEscalation = result.steps?.some(s => s.action.name === 'escalate_to_human');
+      if (!stepsHadEscalation) {
+        setLastResult(result);
+      }
       setMessages(prev => [...prev, {
         id: Date.now().toString() + Math.random(),
         role: 'assistant',
@@ -765,8 +1222,12 @@ export function AIAgent({
             onSend: handleSend,
             isThinking: isThinking,
             lastResult: lastResult,
+            lastUserMessage: lastUserMessage,
             language: 'en',
-            onDismiss: () => setLastResult(null),
+            onDismiss: () => {
+              setLastResult(null);
+              setLastUserMessage(null);
+            },
             theme: accentColor || theme ? {
               ...(accentColor ? {
                 primaryColor: accentColor
@@ -776,12 +1237,13 @@ export function AIAgent({
             availableModes: availableModes,
             mode: mode,
             onModeChange: newMode => {
-              logger.info('AIAgent', `Mode change: ${mode} → ${newMode}`);
+              logger.info('AIAgent', '★ onModeChange:', mode, '→', newMode, '| tickets:', tickets.length, 'selectedTicketId:', selectedTicketId);
               setMode(newMode);
             },
             isMicActive: isMicActive,
             isSpeakerMuted: isSpeakerMuted,
             isAISpeaking: isAISpeaking,
+            isAgentTyping: isLiveAgentTyping,
             onStopSession: stopVoiceSession,
             isVoiceConnected: isVoiceConnected,
             onMicToggle: active => {
@@ -809,8 +1271,23 @@ export function AIAgent({
               } else {
                 audioOutputRef.current?.unmute();
               }
-            }
+            },
+            tickets: tickets,
+            selectedTicketId: selectedTicketId,
+            onTicketSelect: handleTicketSelect,
+            onBackToTickets: handleBackToTickets,
+            autoExpandTrigger: autoExpandTrigger,
+            unreadCounts: unreadCounts,
+            totalUnread: totalUnread
           })
+        }), /*#__PURE__*/_jsx(SupportChatModal, {
+          visible: mode === 'human' && !!selectedTicketId,
+          messages: messages,
+          onSend: handleSend,
+          onClose: handleBackToTickets,
+          isAgentTyping: isLiveAgentTyping,
+          isThinking: isThinking,
+          scrollToEndTrigger: chatScrollTrigger
         })]
       })]
     })