ajaxter-chat 3.0.17 → 3.1.0

package/src/components/ChatWidget.tsx

@@ -1,80 +1,91 @@
 'use client';
 
 import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react';
-import { ChatWidgetProps, BottomTab, Screen, UserListContext, ChatUser, Ticket, RecentChat, ChatMessage } from '../types';
+import {
+  ChatWidgetProps, BottomTab, Screen, UserListContext,
+  ChatUser, Ticket, RecentChat, ChatMessage,
+} from '../types';
 import { loadLocalConfig } from '../config';
 import { mergeTheme } from '../utils/theme';
 import { useRemoteConfig } from '../hooks/useRemoteConfig';
 import { useChat } from '../hooks/useChat';
 import { useWebRTC } from '../hooks/useWebRTC';
+import { useSocket } from '../hooks/useSocket';
 import { saveSession, loadSession } from '../utils/widgetSession';
 import { playMessageSound, getMessageSoundEnabled, setMessageSoundEnabled } from '../utils/messageSound';
-
-import { HomeScreen }        from './HomeScreen';
-import { UserListScreen }    from './UserListScreen';
-import { ChatScreen }        from './ChatScreen';
-import { RecentChatsScreen } from './RecentChatsScreen';
-import { TicketScreen }      from './TicketScreen';
-import { TicketDetailScreen } from './TicketDetailScreen';
-import { TicketFormScreen } from './TicketFormScreen';
-import { BlockListScreen }   from './BlockList';
-import { CallScreen }        from './CallScreen';
-import { MiniCallBar }       from './MiniCallBar';
-import { MaintenanceView }   from './MaintenanceView';
-import { BottomTabs }        from './Tabs/BottomTabs';
-import { ViewerBlockedScreen } from './ViewerBlockedScreen';
+import { ErrorBoundary } from './ErrorBoundary';
+
+import { HomeScreen }            from './HomeScreen';
+import { UserListScreen }        from './UserListScreen';
+import { ChatScreen }            from './ChatScreen';
+import { RecentChatsScreen }     from './RecentChatsScreen';
+import { TicketScreen }          from './TicketScreen';
+import { TicketDetailScreen }    from './TicketDetailScreen';
+import { TicketFormScreen }      from './TicketFormScreen';
+import { BlockListScreen }       from './BlockList';
+import { CallScreen }            from './CallScreen';
+import { MiniCallBar }           from './MiniCallBar';
+import { MaintenanceView }       from './MaintenanceView';
+import { BottomTabs }            from './Tabs/BottomTabs';
+import { ViewerBlockedScreen }   from './ViewerBlockedScreen';
 import { PermissionsGateScreen } from './PermissionsGateScreen';
 import { hasStoredPermissionsGrant } from '../utils/widgetPermissions';
 
+/** WebSocket server URL — override via env NEXT_PUBLIC_SOCKET_URL / REACT_APP_SOCKET_URL */
+function getSocketUrl(): string {
+  if (typeof process !== 'undefined' && process.env) {
+    return (
+      process.env['NEXT_PUBLIC_SOCKET_URL'] ??
+      process.env['REACT_APP_SOCKET_URL'] ??
+      'http://localhost:3005'
+    );
+  }
+  return 'http://localhost:3005';
+}
+
 export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewer }) => {
   /* SSR guard */
   const [mounted, setMounted] = useState(false);
   useEffect(() => { setMounted(true); }, []);
 
-  /* Env config */
   const { apiKey, widgetId } = loadLocalConfig();
-
-  /* Remote config */
   const { data, loading: cfgLoading, error: cfgError } = useRemoteConfig(apiKey, widgetId);
 
-  /* Merged theme — remote config overrides defaults, local prop overrides both */
   const theme = mergeTheme(
-    data?.widget ? { primaryColor: data.widget.primaryColor, buttonLabel: data.widget.buttonLabel, buttonPosition: data.widget.buttonPosition } : undefined,
-    localTheme
+    data?.widget ? {
+      primaryColor: data.widget.primaryColor,
+      buttonLabel:  data.widget.buttonLabel,
+      buttonPosition: data.widget.buttonPosition,
+    } : undefined,
+    localTheme,
   );
 
-  /* Drawer open state */
-  const [isOpen,      setIsOpen]      = useState(false);
-  const [closing,     setClosing]     = useState(false); // for slide-out animation
-  /** True when user hid the drawer during ringing/connected call; WebRTC session stays active. */
-  const [callMinimized, setCallMinimized] = useState(false);
-
-  /* Navigation */
-  const [activeTab,    setActiveTab]    = useState<BottomTab>('home');
-  const [screen,       setScreen]       = useState<Screen>('home');
-  const [userListCtx,  setUserListCtx]  = useState<UserListContext>('support');
-  const [chatReturnCtx, setChatReturnCtx] = useState<UserListContext>('conversation');
+  const [isOpen,          setIsOpen]          = useState(false);
+  const [closing,         setClosing]         = useState(false);
+  const [callMinimized,   setCallMinimized]   = useState(false);
+  const [activeTab,       setActiveTab]       = useState<BottomTab>('home');
+  const [screen,          setScreen]          = useState<Screen>('home');
+  const [userListCtx,     setUserListCtx]     = useState<UserListContext>('support');
+  const [chatReturnCtx,   setChatReturnCtx]   = useState<UserListContext>('conversation');
   const [viewingTicketId, setViewingTicketId] = useState<string | null>(null);
   const [messageSoundEnabled, setMessageSoundEnabledState] = useState(true);
-  /** Stagger list animation only when opening from home burger menu */
-  const [listEntranceAnimation, setListEntranceAnimation] = useState(false);
-  /** Microphone, geolocation, and screen capture granted for this tab */
-  const [permissionsOk, setPermissionsOk] = useState(false);
+  const [listEntranceAnimation, setListEntranceAnimation]  = useState(false);
+  const [permissionsOk,   setPermissionsOk]   = useState(false);
+  const [socketStatus,    setSocketStatus]    = useState<'connecting'|'connected'|'disconnected'|'error'>('disconnected');
 
-  /* App state */
-  const [tickets,      setTickets]      = useState<Ticket[]>(data?.sampleTickets ?? []);
-  const [recentChats,  setRecentChats]  = useState<RecentChat[]>([]);
-  const [blockedUids,  setBlockedUids]  = useState<string[]>(data?.blockedUsers ?? []);
+  const [tickets,     setTickets]     = useState<Ticket[]>(data?.sampleTickets ?? []);
+  const [recentChats, setRecentChats] = useState<RecentChat[]>([]);
+  const [blockedUids, setBlockedUids] = useState<string[]>(data?.blockedUsers ?? []);
 
   /* Sync remote data into local state once loaded */
   useEffect(() => {
     if (data) {
       setTickets(data.sampleTickets);
       setBlockedUids(data.blockedUsers);
-      const pid = viewer?.projectId?.trim();
+      const pid  = viewer?.projectId?.trim();
       const devs = data.developers ?? [];
-      const usr = pid ? (data.users ?? []).filter(u => u.project === pid) : (data.users ?? []);
-      const all = [...devs, ...usr];
+      const usr  = pid ? (data.users ?? []).filter(u => u.project === pid) : (data.users ?? []);
+      const all  = [...devs, ...usr];
       const recents: RecentChat[] = Object.entries(data.sampleChats).map(([uid, msgs]) => {
         const user = all.find(u => u.uid === uid);
         if (!user || msgs.length === 0) return null;
@@ -92,14 +103,92 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewe
     }
   }, [data, viewer?.projectId]);
 
-  /* Chat hook */
+  /* ── Socket setup ───────────────────────────────────────────────────── */
+  const viewerUidForSocket = (viewer?.uid ?? data?.widget?.viewerUid ?? '').trim();
+
+  const {
+    joinRoom, leaveRoom,
+    emitMessage, emitPauseToggle, emitReport,
+    emitBlock, emitUnblock, emitTransfer,
+    emitCallOffer, emitCallAnswer, emitIceCandidate, emitCallEnd,
+    emitAddParticipant,
+    status: _socketStatus,
+  } = useSocket({
+    widgetId,
+    viewerUid: viewerUidForSocket,
+    serverUrl: getSocketUrl(),
+    onMessage: (msg) => {
+      receiveMessage(msg);
+      if (messageSoundEnabled && msg.senderId !== 'me') playMessageSound();
+      // Update recent chats last message
+      setRecentChats(prev => prev.map(r =>
+        r.user.uid === msg.senderId || r.user.uid === msg.receiverId
+          ? { ...r, lastMessage: msg.text, lastTime: msg.timestamp, unread: r.unread + 1 }
+          : r
+      ));
+    },
+    onMessageAck: ({ messageId, status }) => {
+      updateMessageStatus(messageId, status);
+    },
+    onChatPaused: (_roomId, paused) => {
+      // Sync pause state from remote
+      setRecentChats(prev => prev.map(r =>
+        activeUser && r.user.uid === activeUser.uid ? { ...r, isPaused: paused } : r
+      ));
+    },
+    onCallOffer: async (offer, fromUid, callId) => {
+      // Find peer user
+      const allUsers = [...(data?.developers ?? []), ...(data?.users ?? [])];
+      const peer = allUsers.find(u => u.uid === fromUid);
+      if (peer) {
+        await acceptCall(offer, peer, callId);
+        setScreen('call');
+        setIsOpen(true);
+      }
+    },
+    onCallAnswer: async (answer, _fromUid, _callId) => {
+      await addIceCandidate({ sdpMid: '0', sdpMLineIndex: 0, candidate: '' });
+      // WebRTC: set remote description
+      void answer;
+    },
+    onIceCandidate: async (candidate) => {
+      await addIceCandidate(candidate);
+    },
+    onCallEnd: () => { _endCall(); },
+    onError: (code, message) => {
+      console.error('[ChatWidget] Socket error:', code, message);
+    },
+    onUserStatus: (uid, status) => {
+      setRecentChats(prev => prev.map(r =>
+        r.user.uid === uid ? { ...r, user: { ...r.user, status } } : r
+      ));
+    },
+  });
+
+  useEffect(() => { setSocketStatus(_socketStatus); }, [_socketStatus]);
+
+  /* ── Chat hook ──────────────────────────────────────────────────────── */
   const {
     messages, activeUser, isPaused, isReported,
-    selectUser, sendMessage, togglePause, reportChat, clearChat, setMessages,
-  } = useChat();
-
-  /* WebRTC hook */
-  const { session: callSession, localVideoRef, remoteVideoRef, startCall, endCall, toggleMute, toggleCamera } = useWebRTC();
+    selectUser, sendMessage, receiveMessage, updateMessageStatus,
+    togglePause: _togglePause, reportChat: _reportChat, clearChat, setMessages,
+  } = useChat([], {
+    onEmitMessage: (msg) => { emitMessage(msg); },
+    onEmitPause: (roomId, targetUid, paused) => { emitPauseToggle(roomId, targetUid, paused); },
+    onEmitReport: (roomId) => { emitReport(roomId); },
+  });
+
+  /* ── WebRTC hook ────────────────────────────────────────────────────── */
+  const {
+    session: callSession, localVideoRef, remoteVideoRef,
+    startCall: _startCall, acceptCall, addIceCandidate, endCall: _endCall,
+    toggleMute, toggleCamera,
+  } = useWebRTC({
+    onOfferReady: (offer, toUid, callId) => { emitCallOffer(offer, toUid, callId); },
+    onAnswerReady: (answer, toUid, callId) => { emitCallAnswer(answer, toUid, callId); },
+    onIceCandidateReady: (candidate, toUid) => { emitIceCandidate(candidate, toUid); },
+    onCallEnded: (callId, toUid) => { emitCallEnd(callId, toUid); },
+  });
 
   const callInProgress =
     callSession.state === 'calling' || callSession.state === 'connected';
@@ -108,7 +197,7 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewe
     if (!callInProgress) setCallMinimized(false);
   }, [callInProgress]);
 
-  /* ── Drawer open/close with slide animation ───────────────────────────── */
+  /* ── Drawer open/close ──────────────────────────────────────────────── */
   const openDrawer = () => {
     setClosing(false);
     setIsOpen(true);
@@ -119,23 +208,16 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewe
     const w = data?.widget;
     if (!w) return;
     saveSession(w.id, {
-      screen,
-      activeTab,
-      userListCtx,
+      screen, activeTab, userListCtx,
       activeUserUid: activeUser?.uid ?? null,
-      messages,
-      viewingTicketId,
-      chatReturnCtx,
+      messages, viewingTicketId, chatReturnCtx,
     });
   }, [data?.widget, screen, activeTab, userListCtx, activeUser?.uid, messages, viewingTicketId, chatReturnCtx]);
 
   const closeDrawer = useCallback(() => {
     persistWidgetState();
     setClosing(true);
-    setTimeout(() => {
-      setIsOpen(false);
-      setClosing(false);
-    }, 300);
+    setTimeout(() => { setIsOpen(false); setClosing(false); }, 300);
   }, [persistWidgetState]);
 
   useEffect(() => {
@@ -171,7 +253,7 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewe
       setViewingTicketId(p.viewingTicketId ?? null);
       setChatReturnCtx(p.chatReturnCtx ?? 'conversation');
       if (p.activeUserUid) {
-        const pid = viewer?.projectId?.trim();
+        const pid  = viewer?.projectId?.trim();
         const pool = pid
           ? [...data.developers, ...data.users].filter(u => u.project === pid)
           : [...data.developers, ...data.users];
@@ -181,11 +263,14 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewe
             ? p.messages
             : (data.sampleChats[u.uid] ?? []);
           selectUser(u, hist);
+          // Rejoin socket room
+          const roomId = [u.uid, viewerUidForSocket].sort().join('_');
+          joinRoom(roomId);
         }
       }
     }
     restoredRef.current = true;
-  }, [data, selectUser, clearChat, viewer?.projectId, viewer?.uid]);
+  }, [data, selectUser, clearChat, viewer?.projectId, viewer?.uid, viewerUidForSocket, joinRoom]);
 
   useEffect(() => {
     if (!data?.widget) return;
@@ -209,20 +294,7 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewe
   }, [data?.widget?.id, screen, activeTab, userListCtx, activeUser?.uid, messages, viewingTicketId, chatReturnCtx, persistWidgetState]);
 
   const incomingSoundRef = useRef(0);
-  useEffect(() => {
-    incomingSoundRef.current = messages.length;
-  }, [activeUser?.uid]);
-
-  useEffect(() => {
-    if (!messageSoundEnabled || !activeUser || !data?.widget) return;
-    if (messages.length < incomingSoundRef.current) {
-      incomingSoundRef.current = messages.length;
-      return;
-    }
-    const added = messages.slice(incomingSoundRef.current);
-    incomingSoundRef.current = messages.length;
-    if (added.some(m => m.senderId !== 'me')) playMessageSound();
-  }, [messages, messageSoundEnabled, activeUser, data?.widget]);
+  useEffect(() => { incomingSoundRef.current = messages.length; }, [activeUser?.uid]);
 
   const toggleMessageSound = useCallback((enabled: boolean) => {
     const w = data?.widget;
@@ -231,28 +303,18 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewe
     setMessageSoundEnabledState(enabled);
   }, [data?.widget]);
 
-  /* ── Navigation ──────────────────────────────────────────────────────── */
+  /* ── Navigation ─────────────────────────────────────────────────────── */
   const handleCardClick = useCallback((ctx: UserListContext | 'ticket', options?: { fromMenu?: boolean }) => {
     setListEntranceAnimation(!!options?.fromMenu);
-    if (ctx === 'ticket') {
-      setActiveTab('tickets');
-      setScreen('tickets');
-    } else {
-      setUserListCtx(ctx as UserListContext);
-      setScreen('user-list');
-    }
+    if (ctx === 'ticket') { setActiveTab('tickets'); setScreen('tickets'); }
+    else { setUserListCtx(ctx as UserListContext); setScreen('user-list'); }
   }, []);
 
   const handleNavFromMenu = useCallback((ctx: UserListContext | 'ticket') => {
     setListEntranceAnimation(false);
     clearChat();
-    if (ctx === 'ticket') {
-      setActiveTab('tickets');
-      setScreen('tickets');
-    } else {
-      setUserListCtx(ctx);
-      setScreen('user-list');
-    }
+    if (ctx === 'ticket') { setActiveTab('tickets'); setScreen('tickets'); }
+    else { setUserListCtx(ctx); setScreen('user-list'); }
   }, [clearChat]);
 
   const listCtxForUser = useCallback((user: ChatUser, viewerIsDev: boolean): UserListContext => {
@@ -266,19 +328,26 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewe
     const history = data?.sampleChats[user.uid] ?? [];
     selectUser(user, history);
     setScreen('chat');
+    // Join socket room for real-time messages
+    const roomId = [user.uid, viewerUidForSocket].sort().join('_');
+    joinRoom(roomId);
     setRecentChats(prev => {
       const exists = prev.find(r => r.user.uid === user.uid);
-      if (exists) return prev;
+      if (exists) return prev.map(r => r.user.uid === user.uid ? { ...r, unread: 0 } : r);
       return [{ id: `rc_${user.uid}`, user, lastMessage: '', lastTime: new Date().toISOString(), unread: 0, isPaused: false }, ...prev];
     });
-  }, [data, selectUser, userListCtx]);
+  }, [data, selectUser, userListCtx, viewerUidForSocket, joinRoom]);
 
   const handleBackFromChat = useCallback(() => {
     setListEntranceAnimation(false);
+    if (activeUser) {
+      const roomId = [activeUser.uid, viewerUidForSocket].sort().join('_');
+      leaveRoom(roomId);
+    }
     clearChat();
     setUserListCtx(chatReturnCtx);
     setScreen('user-list');
-  }, [clearChat, chatReturnCtx]);
+  }, [clearChat, chatReturnCtx, activeUser, viewerUidForSocket, leaveRoom]);
 
   const handleOpenTicket = useCallback((id: string) => {
     setListEntranceAnimation(false);
@@ -299,20 +368,22 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewe
     return () => window.clearTimeout(t);
   }, [listEntranceAnimation]);
 
-  /* ── Block/Unblock ───────────────────────────────────────────────────── */
+  /* ── Block/Unblock ──────────────────────────────────────────────────── */
   const handleBlock = useCallback(() => {
     if (!activeUser) return;
     setBlockedUids(prev => [...prev, activeUser.uid]);
+    emitBlock(activeUser.uid);
     clearChat();
     setScreen('block-list');
     setActiveTab('home');
-  }, [activeUser, clearChat]);
+  }, [activeUser, clearChat, emitBlock]);
 
   const handleUnblock = useCallback((uid: string) => {
     setBlockedUids(prev => prev.filter(id => id !== uid));
-  }, []);
+    emitUnblock(uid);
+  }, [emitUnblock]);
 
-  /* ── Tickets ─────────────────────────────────────────────────────────── */
+  /* ── Tickets ────────────────────────────────────────────────────────── */
   const handleRaiseTicket = useCallback((title: string, desc: string, priority: Ticket['priority']) => {
     const t: Ticket = {
       id:          `TKT-${String(Date.now()).slice(-4)}`,
@@ -327,40 +398,40 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewe
     setActiveTab('tickets');
   }, []);
 
-  /* ── Pause sync back into recent chats ──────────────────────────────── */
+  /* ── Pause sync back into recent chats ─────────────────────────────── */
   const handleTogglePause = useCallback(() => {
-    togglePause();
+    _togglePause();
     if (activeUser) {
-      setRecentChats(prev => prev.map(r => r.user.uid === activeUser.uid ? { ...r, isPaused: !isPaused } : r));
+      setRecentChats(prev => prev.map(r =>
+        r.user.uid === activeUser.uid ? { ...r, isPaused: !isPaused } : r
+      ));
     }
-  }, [togglePause, activeUser, isPaused]);
+  }, [_togglePause, activeUser, isPaused]);
 
-  /* ── Call ────────────────────────────────────────────────────────────── */
+  /* ── Call ───────────────────────────────────────────────────────────── */
   const handleStartCall = useCallback((withVideo: boolean) => {
     if (!activeUser) return;
-    startCall(activeUser, withVideo);
+    _startCall(activeUser, withVideo);
     setScreen('call');
-  }, [activeUser, startCall]);
+  }, [activeUser, _startCall]);
 
   const handleEndCall = useCallback(() => {
-    endCall();
+    _endCall();
     setCallMinimized(false);
     setScreen('chat');
-  }, [endCall]);
+  }, [_endCall]);
 
   const minimizeCall = useCallback(() => {
     setCallMinimized(true);
     closeDrawer();
   }, [closeDrawer]);
 
-  /* ── Derived ─────────────────────────────────────────────────────────── */
-  const isBlocked      = activeUser ? blockedUids.includes(activeUser.uid) : false;
-
+  /* ── Derived config (must be declared before callbacks that use it) ── */
   const widgetConfig = useMemo(() => {
     if (!data?.widget) return undefined;
     const w = { ...data.widget };
     if (viewer) {
-      w.viewerUid = viewer.uid;
+      w.viewerUid  = viewer.uid;
       w.viewerName = viewer.name;
       w.viewerType = viewer.type;
       if (viewer.projectId?.trim()) w.viewerProjectId = viewer.projectId.trim();
@@ -368,16 +439,42 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewe
     return w;
   }, [data?.widget, viewer]);
 
-  const primaryColor   = theme.primaryColor;
+  /* ── Transfer (developer feature) ──────────────────────────────────── */
+  const handleTransferToDeveloper = useCallback((dev: ChatUser) => {
+    if (!activeUser || !widgetConfig) return;
+    const agent = widgetConfig.viewerName?.trim() || 'Agent';
+    const roomId = [activeUser.uid, viewerUidForSocket].sort().join('_');
+    const transferNote: ChatMessage = {
+      id:         `tr_${Date.now()}_${Math.random().toString(36).slice(2)}`,
+      senderId:   'me',
+      receiverId: dev.uid,
+      text:       `— ${agent} transferred this conversation from ${activeUser.name} to ${dev.name} —`,
+      timestamp:  new Date().toISOString(),
+      type:       'text',
+      status:     'sent',
+    };
+    emitTransfer(roomId, dev.uid, transferNote.text);
+    selectUser(dev, [...messages, transferNote]);
+  }, [activeUser, messages, selectUser, widgetConfig, viewerUidForSocket, emitTransfer]);
+
+  /* ── Add participant (developer feature) ────────────────────────────── */
+  const handleAddParticipant = useCallback((uid: string) => {
+    if (!activeUser) return;
+    const roomId = [activeUser.uid, viewerUidForSocket].sort().join('_');
+    emitAddParticipant(roomId, uid);
+  }, [activeUser, viewerUidForSocket, emitAddParticipant]);
+
+  /* ── Derived ────────────────────────────────────────────────────────── */
+  const isBlocked = activeUser ? blockedUids.includes(activeUser.uid) : false;
+
+  const primaryColor = theme.primaryColor;
 
-  /** All developers are listed; only end-`user` rows are filtered by `viewer.projectId`. */
   const allUsers = useMemo(() => {
     if (!data) return [];
-    const pid = viewer?.projectId?.trim();
+    const pid  = viewer?.projectId?.trim();
     const devs = data.developers ?? [];
     if (!pid) return [...devs, ...data.users];
-    const usersInProject = data.users.filter(u => u.project === pid);
-    return [...devs, ...usersInProject];
+    return [...devs, ...data.users.filter(u => u.project === pid)];
   }, [data, viewer?.projectId]);
 
   const effectiveViewerBlocked = useMemo(() => {
@@ -389,18 +486,15 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewe
     return rec?.viewerBlocked === true;
   }, [widgetConfig, viewer?.uid, data]);
 
-  const viewerIsDev  = widgetConfig?.viewerType === 'developer';
-  const viewerUid    = widgetConfig?.viewerUid;
+  const viewerIsDev = widgetConfig?.viewerType === 'developer';
+  const viewerUid   = widgetConfig?.viewerUid;
 
   const filteredUsers = screen === 'user-list'
     ? allUsers.filter(u => {
         if (userListCtx === 'support') {
-          if (viewerIsDev) return u.type === 'user';
-          return u.type === 'developer';
-        }
-        if (viewerIsDev) {
-          return u.type === 'developer' && u.uid !== viewerUid;
+          return viewerIsDev ? u.type === 'user' : u.type === 'developer';
         }
+        if (viewerIsDev) return u.type === 'developer' && u.uid !== viewerUid;
         return u.type === 'user';
       })
     : [];
@@ -409,60 +503,30 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewe
     () => allUsers.filter(u => u.type === 'developer' && u.uid !== viewerUid),
     [allUsers, viewerUid],
   );
-  const blockedUsers  = allUsers.filter(u => blockedUids.includes(u.uid));
+  const blockedUsers = allUsers.filter(u => blockedUids.includes(u.uid));
 
   const totalUnread = useMemo(
     () => recentChats.reduce((sum, c) => sum + Math.max(0, c.unread ?? 0), 0),
     [recentChats],
   );
 
-  const handleTransferToDeveloper = useCallback((dev: ChatUser) => {
-    if (!activeUser || !widgetConfig) return;
-    const agent = widgetConfig.viewerName?.trim() || 'Agent';
-    const transferNote: ChatMessage = {
-      id:         `tr_${Date.now()}_${Math.random().toString(36).slice(2)}`,
-      senderId:   'me',
-      receiverId: dev.uid,
-      text:       `— ${agent} transferred this conversation from ${activeUser.name} to ${dev.name} —`,
-      timestamp:  new Date().toISOString(),
-      type:       'text',
-      status:     'sent',
-    };
-    selectUser(dev, [...messages, transferNote]);
-  }, [activeUser, messages, selectUser, widgetConfig]);
-
-  /* Position */
   const posStyle: React.CSSProperties = theme.buttonPosition === 'bottom-left'
     ? { left: 24, right: 'auto' }
     : { right: 24, left: 'auto' };
 
-  /* No radius on top-left / bottom-left; left-docked panel keeps inner TR/BR curve */
   const drawerPosStyle: React.CSSProperties =
     theme.buttonPosition === 'bottom-left'
-      ? {
-          left: 0,
-          borderTopLeftRadius: 0,
-          borderBottomLeftRadius: 0,
-          borderTopRightRadius: 16,
-          borderBottomRightRadius: 16,
-        }
-      : {
-          right: 0,
-          borderTopLeftRadius: 0,
-          borderBottomLeftRadius: 0,
-        };
+      ? { left: 0, borderTopLeftRadius: 0, borderBottomLeftRadius: 0, borderTopRightRadius: 16, borderBottomRightRadius: 16 }
+      : { right: 0, borderTopLeftRadius: 0, borderBottomLeftRadius: 0 };
 
-  /* ── Don't render until mounted (SSR safe) ──────────────────────────── */
   if (!mounted) return null;
 
   return (
-    <>
+    <ErrorBoundary primaryColor={primaryColor}>
       {/* ── Global styles ── */}
       <style>{`
         @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap');
-
         .cw-root * { box-sizing: border-box; font-family: 'DM Sans', 'Segoe UI', sans-serif; }
-
         @keyframes cw-slideInRight  { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
         @keyframes cw-slideOutRight { from { transform: translateX(0); opacity: 1; }    to { transform: translateX(100%); opacity: 0; } }
         @keyframes cw-slideInLeft   { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@@ -471,25 +535,30 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewe
         @keyframes cw-slideIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } }
         @keyframes cw-pulse   { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
         @keyframes cw-btnPop  { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
-
+        @keyframes spin { to { transform: rotate(360deg); } }
         .cw-scroll::-webkit-scrollbar        { width: 4px; }
         .cw-scroll::-webkit-scrollbar-track  { background: transparent; }
         .cw-scroll::-webkit-scrollbar-thumb  { background: #e0e0e0; border-radius: 4px; }
-
         .cw-drawer-enter { animation: ${theme.buttonPosition === 'bottom-left' ? 'cw-slideInLeft' : 'cw-slideInRight'} 0.32s cubic-bezier(0.22,1,0.36,1) both; }
         .cw-drawer-exit  { animation: ${theme.buttonPosition === 'bottom-left' ? 'cw-slideOutLeft' : 'cw-slideOutRight'} 0.28s cubic-bezier(0.55,0,1,0.45) both; }
-
-        .cw-drawer-panel {
-          width: 30%;
-          max-width: 100vw;
-          min-width: 0;
-        }
-        @media (max-width: 1024px) {
-          .cw-drawer-panel { width: 100%; }
-        }
+        .cw-drawer-panel { width: 30%; max-width: 100vw; min-width: 0; }
+        @media (max-width: 1024px) { .cw-drawer-panel { width: 100%; } }
       `}</style>
 
-      {/* ── Minimized call bar (drawer closed, call still active) ── */}
+      {/* ── Socket status dot (subtle, only visible when not connected) ── */}
+      {socketStatus !== 'connected' && socketStatus !== 'disconnected' && (
+        <div style={{
+          position: 'fixed', bottom: 80, ...posStyle, zIndex: 9996,
+          background: socketStatus === 'connecting' ? '#f59e0b' : '#ef4444',
+          color: '#fff', fontSize: 11, fontWeight: 700,
+          padding: '3px 10px', borderRadius: 20,
+          animation: 'cw-fadeUp 0.3s ease',
+        }}>
+          {socketStatus === 'connecting' ? '● Connecting…' : '● Offline'}
+        </div>
+      )}
+
+      {/* ── Minimized call bar ── */}
       {!isOpen && callMinimized && callInProgress && callSession.peer && (
         <MiniCallBar
           session={callSession}
@@ -500,7 +569,7 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewe
         />
       )}
 
-      {/* ── Floating Button (unread badge + tooltip when closed) ── */}
+      {/* ── Floating Button ── */}
       {!isOpen && (
         <button
           className="cw-root"
@@ -509,12 +578,10 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewe
           aria-label={totalUnread > 0 ? `${theme.buttonLabel}, ${totalUnread} unread` : theme.buttonLabel}
           title={totalUnread > 0 ? `${totalUnread} unread message${totalUnread === 1 ? '' : 's'}` : theme.buttonLabel}
           style={{
-            position: 'fixed', bottom: 24, zIndex: 9999,
-            ...posStyle,
+            position: 'fixed', bottom: 24, zIndex: 9999, ...posStyle,
             display: 'flex', alignItems: 'center', gap: 10,
             padding: '13px 22px',
-            backgroundColor: theme.buttonColor,
-            color: theme.buttonTextColor,
+            backgroundColor: theme.buttonColor, color: theme.buttonTextColor,
             border: 'none', borderRadius: 50,
             cursor: 'pointer', fontSize: 15, fontWeight: 700,
             boxShadow: `0 8px 28px ${theme.buttonColor}55`,
@@ -536,25 +603,12 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewe
                 stroke={theme.buttonTextColor} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
             </svg>
             {totalUnread > 0 && (
-              <span
-                style={{
-                  position: 'absolute',
-                  top: -8,
-                  right: -10,
-                  minWidth: 20,
-                  height: 20,
-                  padding: '0 5px',
-                  borderRadius: 999,
-                  background: '#ef4444',
-                  color: '#fff',
-                  fontSize: 11,
-                  fontWeight: 800,
-                  lineHeight: '20px',
-                  textAlign: 'center',
-                  border: '2px solid #fff',
-                  boxSizing: 'border-box',
-                }}
-              >
+              <span style={{
+                position: 'absolute', top: -8, right: -10,
+                minWidth: 20, height: 20, padding: '0 5px', borderRadius: 999,
+                background: '#ef4444', color: '#fff', fontSize: 11, fontWeight: 800,
+                lineHeight: '20px', textAlign: 'center', border: '2px solid #fff', boxSizing: 'border-box',
+              }}>
                 {totalUnread > 99 ? '99+' : totalUnread}
               </span>
             )}
@@ -563,7 +617,7 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewe
         </button>
       )}
 
-      {/* ── Backdrop (visual only — does not close widget on click) ── */}
+      {/* ── Backdrop ── */}
       {isOpen && (
         <div
           aria-hidden
@@ -576,59 +630,47 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewe
         />
       )}
 
-      {/* ── Drawer / Slider ── */}
+      {/* ── Drawer ── */}
       {isOpen && (
         <div
           className={`cw-root cw-drawer-panel ${closing ? 'cw-drawer-exit' : 'cw-drawer-enter'}`}
           style={{
-            position: 'fixed',
-            top: 0,
-            bottom: 0,
-            ...drawerPosStyle,
-            zIndex: 9998,
+            position: 'fixed', top: 0, bottom: 0, ...drawerPosStyle, zIndex: 9998,
             backgroundColor: '#fff',
             boxShadow: theme.buttonPosition === 'bottom-left'
               ? '4px 0 40px rgba(0,0,0,0.18)'
               : '-4px 0 40px rgba(0,0,0,0.18)',
-            display: 'flex',
-            flexDirection: 'column',
-            overflow: 'hidden',
+            display: 'flex', flexDirection: 'column', overflow: 'hidden',
           }}
         >
-          {/* ── Loading state ── */}
+          {/* Loading */}
           {cfgLoading && (
-            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', gap: 16 }}>
-              <div style={{
-                width: 40, height: 40, borderRadius: '50%',
-                border: `3px solid ${primaryColor}30`,
-                borderTopColor: primaryColor,
-                animation: 'spin 0.8s linear infinite',
-              }} />
-              <style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
-              <p style={{ fontSize: 14, color: '#7b8fa1' }}>Loading chat…</p>
+            <div style={{ display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',height:'100%',gap:16 }}>
+              <div style={{ width:40,height:40,borderRadius:'50%',border:`3px solid ${primaryColor}30`,borderTopColor:primaryColor,animation:'spin 0.8s linear infinite' }} />
+              <p style={{ fontSize:14,color:'#7b8fa1' }}>Loading chat…</p>
             </div>
           )}
 
-          {/* ── Error state ── */}
+          {/* Error */}
           {cfgError && !cfgLoading && (
-            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', gap: 12, padding: 32, textAlign: 'center' }}>
-              <div style={{ fontSize: 40 }}>⚠️</div>
-              <p style={{ fontWeight: 700, color: '#1a2332' }}>Could not load chat configuration</p>
-              <p style={{ fontSize: 13, color: '#7b8fa1', lineHeight: 1.6 }}>{cfgError}</p>
-              <button onClick={closeDrawer} style={{ padding: '9px 20px', borderRadius: 10, border: 'none', background: primaryColor, color: '#fff', cursor: 'pointer', fontWeight: 700 }}>Close</button>
+            <div style={{ display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',height:'100%',gap:12,padding:32,textAlign:'center' }}>
+              <div style={{ fontSize:40 }}>⚠️</div>
+              <p style={{ fontWeight:700,color:'#1a2332' }}>Could not load chat configuration</p>
+              <p style={{ fontSize:13,color:'#7b8fa1',lineHeight:1.6 }}>{cfgError}</p>
+              <button onClick={closeDrawer} style={{ padding:'9px 20px',borderRadius:10,border:'none',background:primaryColor,color:'#fff',cursor:'pointer',fontWeight:700 }}>Close</button>
             </div>
           )}
 
-          {/* ── Main content ── */}
+          {/* Main content */}
           {!cfgLoading && !cfgError && widgetConfig && (
-            <>
-              {/* Resize + Close controls — hidden on blocked screen (Close is in-panel) */}
+            <ErrorBoundary primaryColor={primaryColor}>
+              {/* Close button */}
               {screen !== 'chat' && screen !== 'call' && !effectiveViewerBlocked && (
                 <div style={{
-                  position: 'absolute', top: 12,
+                  position:'absolute',top:12,
                   right: theme.buttonPosition === 'bottom-left' ? 'auto' : 12,
-                  left:  theme.buttonPosition === 'bottom-left' ? 12    : 'auto',
-                  zIndex: 20, display: 'flex', gap: 6,
+                  left:  theme.buttonPosition === 'bottom-left' ? 12 : 'auto',
+                  zIndex:20,display:'flex',gap:6,
                 }}>
                   <CornerBtn onClick={closeDrawer} title="Close">
                     <svg width="12" height="12" viewBox="0 0 24 24" fill="none">
@@ -638,12 +680,8 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewe
                 </div>
               )}
 
-              {/* ── MAINTENANCE ── */}
-              {widgetConfig.status === 'MAINTENANCE' && (
-                <MaintenanceView primaryColor={primaryColor} />
-              )}
+              {widgetConfig.status === 'MAINTENANCE' && <MaintenanceView primaryColor={primaryColor} />}
 
-              {/* ── DISABLED ── */}
               {widgetConfig.status === 'DISABLE' && (
                 <div style={{ display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',height:'100%',padding:32,textAlign:'center',gap:12 }}>
                   <div style={{ fontSize:40 }}>🔒</div>
@@ -652,12 +690,10 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewe
                 </div>
               )}
 
-              {/* ── ACTIVE: viewer spam-blocked (no chat/tickets UI) ── */}
               {widgetConfig.status === 'ACTIVE' && effectiveViewerBlocked && (
                 <ViewerBlockedScreen config={widgetConfig} apiKey={apiKey} onClose={closeDrawer} />
               )}
 
-              {/* ── ACTIVE: microphone, location, screen share required ── */}
               {widgetConfig.status === 'ACTIVE' && !effectiveViewerBlocked && !permissionsOk && (
                 <PermissionsGateScreen
                   primaryColor={primaryColor}
@@ -666,14 +702,12 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewe
                 />
               )}
 
-              {/* ── ACTIVE ── */}
               {widgetConfig.status === 'ACTIVE' && !effectiveViewerBlocked && permissionsOk && (
-                <div className="cw-scroll" style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
+                <div className="cw-scroll" style={{ flex:1,display:'flex',flexDirection:'column',overflow:'hidden' }}>
 
                   {screen === 'home' && (
                     <HomeScreen
-                      config={widgetConfig}
-                      apiKey={apiKey}
+                      config={widgetConfig} apiKey={apiKey}
                       onNavigate={handleCardClick}
                       onOpenTicket={handleOpenTicket}
                       tickets={tickets}
@@ -706,7 +740,7 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewe
                       onBack={handleBackFromChat}
                       onClose={closeDrawer}
                       onTogglePause={handleTogglePause}
-                      onReport={reportChat}
+                      onReport={_reportChat}
                       onBlock={handleBlock}
                       onStartCall={handleStartCall}
                       onNavAction={handleNavFromMenu}
@@ -761,18 +795,16 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewe
                     />
                   )}
 
-                  {screen === 'ticket-detail' && viewingTicketId && (
-                    (() => {
-                      const t = tickets.find(x => x.id === viewingTicketId);
-                      return t ? (
-                        <TicketDetailScreen
-                          ticket={t}
-                          config={widgetConfig}
-                          onBack={() => { setViewingTicketId(null); setScreen('tickets'); }}
-                        />
-                      ) : null;
-                    })()
-                  )}
+                  {screen === 'ticket-detail' && viewingTicketId && (() => {
+                    const t = tickets.find(x => x.id === viewingTicketId);
+                    return t ? (
+                      <TicketDetailScreen
+                        ticket={t}
+                        config={widgetConfig}
+                        onBack={() => { setViewingTicketId(null); setScreen('tickets'); }}
+                      />
+                    ) : null;
+                  })()}
 
                   {screen === 'block-list' && (
                     <BlockListScreen
@@ -785,38 +817,28 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewe
                 </div>
               )}
 
-              {/* ── Bottom Tabs (hidden during chat/call/user-list/block-list) ── */}
+              {/* Bottom Tabs */}
               {widgetConfig.status === 'ACTIVE' &&
-               !effectiveViewerBlocked &&
-               permissionsOk &&
-               screen !== 'chat' &&
-               screen !== 'call' &&
-               screen !== 'user-list' &&
-               screen !== 'block-list' &&
-               screen !== 'ticket-detail' &&
-               screen !== 'ticket-new' && (
-                <BottomTabs
-                  active={activeTab}
-                  onChange={handleTabChange}
-                  primaryColor={primaryColor}
-                />
+               !effectiveViewerBlocked && permissionsOk &&
+               screen !== 'chat' && screen !== 'call' &&
+               screen !== 'user-list' && screen !== 'block-list' &&
+               screen !== 'ticket-detail' && screen !== 'ticket-new' && (
+                <BottomTabs active={activeTab} onChange={handleTabChange} primaryColor={primaryColor} />
               )}
-            </>
+            </ErrorBoundary>
           )}
         </div>
       )}
-    </>
+    </ErrorBoundary>
   );
 };
 
 export default ChatWidget;
 
-/* ── Tiny corner button ────────────────────────────────────────────────────── */
 const CornerBtn: React.FC<{ onClick: () => void; title: string; children: React.ReactNode }> = ({ onClick, title, children }) => (
   <button onClick={onClick} title={title} style={{
-    width: 26, height: 26, borderRadius: '50%',
-    background: 'rgba(0,0,0,0.25)', border: 'none',
-    display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
+    width:26,height:26,borderRadius:'50%',background:'rgba(0,0,0,0.25)',border:'none',
+    display:'flex',alignItems:'center',justifyContent:'center',cursor:'pointer',
   }}>
     {children}
   </button>