ajaxter-chat 3.0.17 → 3.1.0

package/dist/components/ChatWidget.js

@@ -1,61 +1,102 @@
+"use strict";
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
-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 { 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 { PermissionsGateScreen } from './PermissionsGateScreen';
-import { hasStoredPermissionsGrant } from '../utils/widgetPermissions';
-export const ChatWidget = ({ theme: localTheme, viewer }) => {
-    var _a, _b, _c, _d, _e;
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatWidget = void 0;
+const react_1 = __importStar(require("react"));
+const config_1 = require("../config");
+const theme_1 = require("../utils/theme");
+const useRemoteConfig_1 = require("../hooks/useRemoteConfig");
+const useChat_1 = require("../hooks/useChat");
+const useWebRTC_1 = require("../hooks/useWebRTC");
+const useSocket_1 = require("../hooks/useSocket");
+const widgetSession_1 = require("../utils/widgetSession");
+const messageSound_1 = require("../utils/messageSound");
+const ErrorBoundary_1 = require("./ErrorBoundary");
+const HomeScreen_1 = require("./HomeScreen");
+const UserListScreen_1 = require("./UserListScreen");
+const ChatScreen_1 = require("./ChatScreen");
+const RecentChatsScreen_1 = require("./RecentChatsScreen");
+const TicketScreen_1 = require("./TicketScreen");
+const TicketDetailScreen_1 = require("./TicketDetailScreen");
+const TicketFormScreen_1 = require("./TicketFormScreen");
+const BlockList_1 = require("./BlockList");
+const CallScreen_1 = require("./CallScreen");
+const MiniCallBar_1 = require("./MiniCallBar");
+const MaintenanceView_1 = require("./MaintenanceView");
+const BottomTabs_1 = require("./Tabs/BottomTabs");
+const ViewerBlockedScreen_1 = require("./ViewerBlockedScreen");
+const PermissionsGateScreen_1 = require("./PermissionsGateScreen");
+const widgetPermissions_1 = require("../utils/widgetPermissions");
+/** WebSocket server URL — override via env NEXT_PUBLIC_SOCKET_URL / REACT_APP_SOCKET_URL */
+function getSocketUrl() {
+    var _a, _b;
+    if (typeof process !== 'undefined' && process.env) {
+        return ((_b = (_a = process.env['NEXT_PUBLIC_SOCKET_URL']) !== null && _a !== void 0 ? _a : process.env['REACT_APP_SOCKET_URL']) !== null && _b !== void 0 ? _b : 'http://localhost:3005');
+    }
+    return 'http://localhost:3005';
+}
+const ChatWidget = ({ theme: localTheme, viewer }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     /* 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 === null || data === void 0 ? void 0 : 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('home');
-    const [screen, setScreen] = useState('home');
-    const [userListCtx, setUserListCtx] = useState('support');
-    const [chatReturnCtx, setChatReturnCtx] = useState('conversation');
-    const [viewingTicketId, setViewingTicketId] = useState(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);
-    /* App state */
-    const [tickets, setTickets] = useState((_a = data === null || data === void 0 ? void 0 : data.sampleTickets) !== null && _a !== void 0 ? _a : []);
-    const [recentChats, setRecentChats] = useState([]);
-    const [blockedUids, setBlockedUids] = useState((_b = data === null || data === void 0 ? void 0 : data.blockedUsers) !== null && _b !== void 0 ? _b : []);
+    const [mounted, setMounted] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => { setMounted(true); }, []);
+    const { apiKey, widgetId } = (0, config_1.loadLocalConfig)();
+    const { data, loading: cfgLoading, error: cfgError } = (0, useRemoteConfig_1.useRemoteConfig)(apiKey, widgetId);
+    const theme = (0, theme_1.mergeTheme)((data === null || data === void 0 ? void 0 : data.widget) ? {
+        primaryColor: data.widget.primaryColor,
+        buttonLabel: data.widget.buttonLabel,
+        buttonPosition: data.widget.buttonPosition,
+    } : undefined, localTheme);
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const [closing, setClosing] = (0, react_1.useState)(false);
+    const [callMinimized, setCallMinimized] = (0, react_1.useState)(false);
+    const [activeTab, setActiveTab] = (0, react_1.useState)('home');
+    const [screen, setScreen] = (0, react_1.useState)('home');
+    const [userListCtx, setUserListCtx] = (0, react_1.useState)('support');
+    const [chatReturnCtx, setChatReturnCtx] = (0, react_1.useState)('conversation');
+    const [viewingTicketId, setViewingTicketId] = (0, react_1.useState)(null);
+    const [messageSoundEnabled, setMessageSoundEnabledState] = (0, react_1.useState)(true);
+    const [listEntranceAnimation, setListEntranceAnimation] = (0, react_1.useState)(false);
+    const [permissionsOk, setPermissionsOk] = (0, react_1.useState)(false);
+    const [socketStatus, setSocketStatus] = (0, react_1.useState)('disconnected');
+    const [tickets, setTickets] = (0, react_1.useState)((_a = data === null || data === void 0 ? void 0 : data.sampleTickets) !== null && _a !== void 0 ? _a : []);
+    const [recentChats, setRecentChats] = (0, react_1.useState)([]);
+    const [blockedUids, setBlockedUids] = (0, react_1.useState)((_b = data === null || data === void 0 ? void 0 : data.blockedUsers) !== null && _b !== void 0 ? _b : []);
     /* Sync remote data into local state once loaded */
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         var _a, _b, _c, _d;
         if (data) {
             setTickets(data.sampleTickets);
@@ -81,58 +122,109 @@ export const ChatWidget = ({ theme: localTheme, viewer }) => {
             setRecentChats(recents);
         }
     }, [data, viewer === null || viewer === void 0 ? void 0 : viewer.projectId]);
-    /* 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();
+    /* ── Socket setup ───────────────────────────────────────────────────── */
+    const viewerUidForSocket = ((_e = (_c = viewer === null || viewer === void 0 ? void 0 : viewer.uid) !== null && _c !== void 0 ? _c : (_d = data === null || data === void 0 ? void 0 : data.widget) === null || _d === void 0 ? void 0 : _d.viewerUid) !== null && _e !== void 0 ? _e : '').trim();
+    const { joinRoom, leaveRoom, emitMessage, emitPauseToggle, emitReport, emitBlock, emitUnblock, emitTransfer, emitCallOffer, emitCallAnswer, emitIceCandidate, emitCallEnd, emitAddParticipant, status: _socketStatus, } = (0, useSocket_1.useSocket)({
+        widgetId,
+        viewerUid: viewerUidForSocket,
+        serverUrl: getSocketUrl(),
+        onMessage: (msg) => {
+            receiveMessage(msg);
+            if (messageSoundEnabled && msg.senderId !== 'me')
+                (0, messageSound_1.playMessageSound)();
+            // Update recent chats last message
+            setRecentChats(prev => prev.map(r => r.user.uid === msg.senderId || r.user.uid === msg.receiverId
+                ? Object.assign(Object.assign({}, 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 ? Object.assign(Object.assign({}, r), { isPaused: paused }) : r));
+        },
+        onCallOffer: async (offer, fromUid, callId) => {
+            var _a, _b;
+            // Find peer user
+            const allUsers = [...((_a = data === null || data === void 0 ? void 0 : data.developers) !== null && _a !== void 0 ? _a : []), ...((_b = data === null || data === void 0 ? void 0 : data.users) !== null && _b !== void 0 ? _b : [])];
+            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 ? Object.assign(Object.assign({}, r), { user: Object.assign(Object.assign({}, r.user), { status }) }) : r));
+        },
+    });
+    (0, react_1.useEffect)(() => { setSocketStatus(_socketStatus); }, [_socketStatus]);
+    /* ── Chat hook ──────────────────────────────────────────────────────── */
+    const { messages, activeUser, isPaused, isReported, selectUser, sendMessage, receiveMessage, updateMessageStatus, togglePause: _togglePause, reportChat: _reportChat, clearChat, setMessages, } = (0, useChat_1.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, } = (0, useWebRTC_1.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';
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         if (!callInProgress)
             setCallMinimized(false);
     }, [callInProgress]);
-    /* ── Drawer open/close with slide animation ───────────────────────────── */
+    /* ── Drawer open/close ──────────────────────────────────────────────── */
     const openDrawer = () => {
         setClosing(false);
         setIsOpen(true);
         setCallMinimized(false);
     };
-    const persistWidgetState = useCallback(() => {
+    const persistWidgetState = (0, react_1.useCallback)(() => {
         var _a;
         const w = data === null || data === void 0 ? void 0 : data.widget;
         if (!w)
             return;
-        saveSession(w.id, {
-            screen,
-            activeTab,
-            userListCtx,
+        (0, widgetSession_1.saveSession)(w.id, {
+            screen, activeTab, userListCtx,
             activeUserUid: (_a = activeUser === null || activeUser === void 0 ? void 0 : activeUser.uid) !== null && _a !== void 0 ? _a : null,
-            messages,
-            viewingTicketId,
-            chatReturnCtx,
+            messages, viewingTicketId, chatReturnCtx,
         });
     }, [data === null || data === void 0 ? void 0 : data.widget, screen, activeTab, userListCtx, activeUser === null || activeUser === void 0 ? void 0 : activeUser.uid, messages, viewingTicketId, chatReturnCtx]);
-    const closeDrawer = useCallback(() => {
+    const closeDrawer = (0, react_1.useCallback)(() => {
         persistWidgetState();
         setClosing(true);
-        setTimeout(() => {
-            setIsOpen(false);
-            setClosing(false);
-        }, 300);
+        setTimeout(() => { setIsOpen(false); setClosing(false); }, 300);
     }, [persistWidgetState]);
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         var _a;
         const id = (_a = data === null || data === void 0 ? void 0 : data.widget) === null || _a === void 0 ? void 0 : _a.id;
         if (!id)
             return;
-        setPermissionsOk(hasStoredPermissionsGrant(id));
-    }, [(_c = data === null || data === void 0 ? void 0 : data.widget) === null || _c === void 0 ? void 0 : _c.id]);
-    const restoredRef = useRef(false);
-    useEffect(() => {
+        setPermissionsOk((0, widgetPermissions_1.hasStoredPermissionsGrant)(id));
+    }, [(_f = data === null || data === void 0 ? void 0 : data.widget) === null || _f === void 0 ? void 0 : _f.id]);
+    const restoredRef = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => {
         var _a, _b, _c, _d, _e, _f;
         if (!(data === null || data === void 0 ? void 0 : data.widget) || restoredRef.current)
             return;
         const w = data.widget;
-        setMessageSoundEnabledState(getMessageSoundEnabled(w.id));
+        setMessageSoundEnabledState((0, messageSound_1.getMessageSoundEnabled)(w.id));
         const uidForBlock = (_b = ((_a = viewer === null || viewer === void 0 ? void 0 : viewer.uid) !== null && _a !== void 0 ? _a : w.viewerUid)) === null || _b === void 0 ? void 0 : _b.trim();
         let viewerIsBlocked = w.viewerBlocked === true;
         if (!viewerIsBlocked && uidForBlock) {
@@ -147,7 +239,7 @@ export const ChatWidget = ({ theme: localTheme, viewer }) => {
             restoredRef.current = true;
             return;
         }
-        const p = loadSession(w.id);
+        const p = (0, widgetSession_1.loadSession)(w.id);
         if (p) {
             setScreen(p.screen);
             setActiveTab(p.activeTab);
@@ -165,12 +257,15 @@ export const ChatWidget = ({ theme: localTheme, viewer }) => {
                         ? p.messages
                         : ((_f = data.sampleChats[u.uid]) !== null && _f !== void 0 ? _f : []);
                     selectUser(u, hist);
+                    // Rejoin socket room
+                    const roomId = [u.uid, viewerUidForSocket].sort().join('_');
+                    joinRoom(roomId);
                 }
             }
         }
         restoredRef.current = true;
-    }, [data, selectUser, clearChat, viewer === null || viewer === void 0 ? void 0 : viewer.projectId, viewer === null || viewer === void 0 ? void 0 : viewer.uid]);
-    useEffect(() => {
+    }, [data, selectUser, clearChat, viewer === null || viewer === void 0 ? void 0 : viewer.projectId, viewer === null || viewer === void 0 ? void 0 : viewer.uid, viewerUidForSocket, joinRoom]);
+    (0, react_1.useEffect)(() => {
         var _a, _b;
         if (!(data === null || data === void 0 ? void 0 : data.widget))
             return;
@@ -188,36 +283,22 @@ export const ChatWidget = ({ theme: localTheme, viewer }) => {
         setActiveTab('home');
         setViewingTicketId(null);
     }, [data === null || data === void 0 ? void 0 : data.widget, data === null || data === void 0 ? void 0 : data.developers, data === null || data === void 0 ? void 0 : data.users, viewer === null || viewer === void 0 ? void 0 : viewer.uid, clearChat]);
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         if (!(data === null || data === void 0 ? void 0 : data.widget))
             return;
         persistWidgetState();
-    }, [(_d = data === null || data === void 0 ? void 0 : data.widget) === null || _d === void 0 ? void 0 : _d.id, screen, activeTab, userListCtx, activeUser === null || activeUser === void 0 ? void 0 : activeUser.uid, messages, viewingTicketId, chatReturnCtx, persistWidgetState]);
-    const incomingSoundRef = useRef(0);
-    useEffect(() => {
-        incomingSoundRef.current = messages.length;
-    }, [activeUser === null || activeUser === void 0 ? void 0 : activeUser.uid]);
-    useEffect(() => {
-        if (!messageSoundEnabled || !activeUser || !(data === null || data === void 0 ? void 0 : 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 === null || data === void 0 ? void 0 : data.widget]);
-    const toggleMessageSound = useCallback((enabled) => {
+    }, [(_g = data === null || data === void 0 ? void 0 : data.widget) === null || _g === void 0 ? void 0 : _g.id, screen, activeTab, userListCtx, activeUser === null || activeUser === void 0 ? void 0 : activeUser.uid, messages, viewingTicketId, chatReturnCtx, persistWidgetState]);
+    const incomingSoundRef = (0, react_1.useRef)(0);
+    (0, react_1.useEffect)(() => { incomingSoundRef.current = messages.length; }, [activeUser === null || activeUser === void 0 ? void 0 : activeUser.uid]);
+    const toggleMessageSound = (0, react_1.useCallback)((enabled) => {
         const w = data === null || data === void 0 ? void 0 : data.widget;
         if (!w)
             return;
-        setMessageSoundEnabled(w.id, enabled);
+        (0, messageSound_1.setMessageSoundEnabled)(w.id, enabled);
         setMessageSoundEnabledState(enabled);
     }, [data === null || data === void 0 ? void 0 : data.widget]);
-    /* ── Navigation ──────────────────────────────────────────────────────── */
-    const handleCardClick = useCallback((ctx, options) => {
+    /* ── Navigation ─────────────────────────────────────────────────────── */
+    const handleCardClick = (0, react_1.useCallback)((ctx, options) => {
         setListEntranceAnimation(!!(options === null || options === void 0 ? void 0 : options.fromMenu));
         if (ctx === 'ticket') {
             setActiveTab('tickets');
@@ -228,7 +309,7 @@ export const ChatWidget = ({ theme: localTheme, viewer }) => {
             setScreen('user-list');
         }
     }, []);
-    const handleNavFromMenu = useCallback((ctx) => {
+    const handleNavFromMenu = (0, react_1.useCallback)((ctx) => {
         setListEntranceAnimation(false);
         clearChat();
         if (ctx === 'ticket') {
@@ -240,62 +321,71 @@ export const ChatWidget = ({ theme: localTheme, viewer }) => {
             setScreen('user-list');
         }
     }, [clearChat]);
-    const listCtxForUser = useCallback((user, viewerIsDev) => {
+    const listCtxForUser = (0, react_1.useCallback)((user, viewerIsDev) => {
         if (viewerIsDev)
             return user.type === 'user' ? 'support' : 'conversation';
         return user.type === 'developer' ? 'support' : 'conversation';
     }, []);
-    const handleSelectUser = useCallback((user, returnCtxOverride) => {
+    const handleSelectUser = (0, react_1.useCallback)((user, returnCtxOverride) => {
         var _a;
         setListEntranceAnimation(false);
         setChatReturnCtx(returnCtxOverride !== null && returnCtxOverride !== void 0 ? returnCtxOverride : userListCtx);
         const history = (_a = data === null || data === void 0 ? void 0 : data.sampleChats[user.uid]) !== null && _a !== void 0 ? _a : [];
         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;
+                return prev.map(r => r.user.uid === user.uid ? Object.assign(Object.assign({}, r), { unread: 0 }) : r);
             return [{ id: `rc_${user.uid}`, user, lastMessage: '', lastTime: new Date().toISOString(), unread: 0, isPaused: false }, ...prev];
         });
-    }, [data, selectUser, userListCtx]);
-    const handleBackFromChat = useCallback(() => {
+    }, [data, selectUser, userListCtx, viewerUidForSocket, joinRoom]);
+    const handleBackFromChat = (0, react_1.useCallback)(() => {
         setListEntranceAnimation(false);
+        if (activeUser) {
+            const roomId = [activeUser.uid, viewerUidForSocket].sort().join('_');
+            leaveRoom(roomId);
+        }
         clearChat();
         setUserListCtx(chatReturnCtx);
         setScreen('user-list');
-    }, [clearChat, chatReturnCtx]);
-    const handleOpenTicket = useCallback((id) => {
+    }, [clearChat, chatReturnCtx, activeUser, viewerUidForSocket, leaveRoom]);
+    const handleOpenTicket = (0, react_1.useCallback)((id) => {
         setListEntranceAnimation(false);
         setViewingTicketId(id);
         setScreen('ticket-detail');
         setActiveTab('tickets');
     }, []);
-    const handleTabChange = useCallback((tab) => {
+    const handleTabChange = (0, react_1.useCallback)((tab) => {
         setListEntranceAnimation(false);
         setActiveTab(tab);
         setScreen(tab === 'home' ? 'home' : tab === 'chats' ? 'recent-chats' : 'tickets');
     }, []);
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         if (!listEntranceAnimation)
             return;
         const t = window.setTimeout(() => setListEntranceAnimation(false), 520);
         return () => window.clearTimeout(t);
     }, [listEntranceAnimation]);
-    /* ── Block/Unblock ───────────────────────────────────────────────────── */
-    const handleBlock = useCallback(() => {
+    /* ── Block/Unblock ──────────────────────────────────────────────────── */
+    const handleBlock = (0, react_1.useCallback)(() => {
         if (!activeUser)
             return;
         setBlockedUids(prev => [...prev, activeUser.uid]);
+        emitBlock(activeUser.uid);
         clearChat();
         setScreen('block-list');
         setActiveTab('home');
-    }, [activeUser, clearChat]);
-    const handleUnblock = useCallback((uid) => {
+    }, [activeUser, clearChat, emitBlock]);
+    const handleUnblock = (0, react_1.useCallback)((uid) => {
         setBlockedUids(prev => prev.filter(id => id !== uid));
-    }, []);
-    /* ── Tickets ─────────────────────────────────────────────────────────── */
-    const handleRaiseTicket = useCallback((title, desc, priority) => {
+        emitUnblock(uid);
+    }, [emitUnblock]);
+    /* ── Tickets ────────────────────────────────────────────────────────── */
+    const handleRaiseTicket = (0, react_1.useCallback)((title, desc, priority) => {
         const t = {
             id: `TKT-${String(Date.now()).slice(-4)}`,
             title, description: desc, status: 'open', priority,
@@ -308,32 +398,31 @@ export const ChatWidget = ({ theme: localTheme, viewer }) => {
         setScreen('ticket-detail');
         setActiveTab('tickets');
     }, []);
-    /* ── Pause sync back into recent chats ──────────────────────────────── */
-    const handleTogglePause = useCallback(() => {
-        togglePause();
+    /* ── Pause sync back into recent chats ─────────────────────────────── */
+    const handleTogglePause = (0, react_1.useCallback)(() => {
+        _togglePause();
         if (activeUser) {
             setRecentChats(prev => prev.map(r => r.user.uid === activeUser.uid ? Object.assign(Object.assign({}, r), { isPaused: !isPaused }) : r));
         }
-    }, [togglePause, activeUser, isPaused]);
-    /* ── Call ────────────────────────────────────────────────────────────── */
-    const handleStartCall = useCallback((withVideo) => {
+    }, [_togglePause, activeUser, isPaused]);
+    /* ── Call ───────────────────────────────────────────────────────────── */
+    const handleStartCall = (0, react_1.useCallback)((withVideo) => {
         if (!activeUser)
             return;
-        startCall(activeUser, withVideo);
+        _startCall(activeUser, withVideo);
         setScreen('call');
-    }, [activeUser, startCall]);
-    const handleEndCall = useCallback(() => {
-        endCall();
+    }, [activeUser, _startCall]);
+    const handleEndCall = (0, react_1.useCallback)(() => {
+        _endCall();
         setCallMinimized(false);
         setScreen('chat');
-    }, [endCall]);
-    const minimizeCall = useCallback(() => {
+    }, [_endCall]);
+    const minimizeCall = (0, react_1.useCallback)(() => {
         setCallMinimized(true);
         closeDrawer();
     }, [closeDrawer]);
-    /* ── Derived ─────────────────────────────────────────────────────────── */
-    const isBlocked = activeUser ? blockedUids.includes(activeUser.uid) : false;
-    const widgetConfig = useMemo(() => {
+    /* ── Derived config (must be declared before callbacks that use it) ── */
+    const widgetConfig = (0, react_1.useMemo)(() => {
         var _a;
         if (!(data === null || data === void 0 ? void 0 : data.widget))
             return undefined;
@@ -347,9 +436,36 @@ export const ChatWidget = ({ theme: localTheme, viewer }) => {
         }
         return w;
     }, [data === null || data === void 0 ? void 0 : data.widget, viewer]);
+    /* ── Transfer (developer feature) ──────────────────────────────────── */
+    const handleTransferToDeveloper = (0, react_1.useCallback)((dev) => {
+        var _a;
+        if (!activeUser || !widgetConfig)
+            return;
+        const agent = ((_a = widgetConfig.viewerName) === null || _a === void 0 ? void 0 : _a.trim()) || 'Agent';
+        const roomId = [activeUser.uid, viewerUidForSocket].sort().join('_');
+        const transferNote = {
+            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 = (0, react_1.useCallback)((uid) => {
+        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(() => {
+    const allUsers = (0, react_1.useMemo)(() => {
         var _a, _b;
         if (!data)
             return [];
@@ -357,10 +473,9 @@ export const ChatWidget = ({ theme: localTheme, viewer }) => {
         const devs = (_b = data.developers) !== null && _b !== void 0 ? _b : [];
         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 === null || viewer === void 0 ? void 0 : viewer.projectId]);
-    const effectiveViewerBlocked = useMemo(() => {
+    const effectiveViewerBlocked = (0, react_1.useMemo)(() => {
         var _a, _b;
         if (!widgetConfig)
             return false;
@@ -377,61 +492,28 @@ export const ChatWidget = ({ theme: localTheme, viewer }) => {
     const filteredUsers = screen === 'user-list'
         ? allUsers.filter(u => {
             if (userListCtx === 'support') {
-                if (viewerIsDev)
-                    return u.type === 'user';
-                return u.type === 'developer';
+                return viewerIsDev ? u.type === 'user' : u.type === 'developer';
             }
-            if (viewerIsDev) {
+            if (viewerIsDev)
                 return u.type === 'developer' && u.uid !== viewerUid;
-            }
             return u.type === 'user';
         })
         : [];
-    const otherDevelopers = useMemo(() => allUsers.filter(u => u.type === 'developer' && u.uid !== viewerUid), [allUsers, viewerUid]);
+    const otherDevelopers = (0, react_1.useMemo)(() => allUsers.filter(u => u.type === 'developer' && u.uid !== viewerUid), [allUsers, viewerUid]);
     const blockedUsers = allUsers.filter(u => blockedUids.includes(u.uid));
-    const totalUnread = useMemo(() => recentChats.reduce((sum, c) => { var _a; return sum + Math.max(0, (_a = c.unread) !== null && _a !== void 0 ? _a : 0); }, 0), [recentChats]);
-    const handleTransferToDeveloper = useCallback((dev) => {
-        var _a;
-        if (!activeUser || !widgetConfig)
-            return;
-        const agent = ((_a = widgetConfig.viewerName) === null || _a === void 0 ? void 0 : _a.trim()) || 'Agent';
-        const transferNote = {
-            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 totalUnread = (0, react_1.useMemo)(() => recentChats.reduce((sum, c) => { var _a; return sum + Math.max(0, (_a = c.unread) !== null && _a !== void 0 ? _a : 0); }, 0), [recentChats]);
     const posStyle = 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 = theme.buttonPosition === 'bottom-left'
-        ? {
-            left: 0,
-            borderTopLeftRadius: 0,
-            borderBottomLeftRadius: 0,
-            borderTopRightRadius: 16,
-            borderBottomRightRadius: 16,
-        }
-        : {
-            right: 0,
-            borderTopLeftRadius: 0,
-            borderBottomLeftRadius: 0,
-        };
-    /* ── Don't render until mounted (SSR safe) ──────────────────────────── */
+        ? { left: 0, borderTopLeftRadius: 0, borderBottomLeftRadius: 0, borderTopRightRadius: 16, borderBottomRightRadius: 16 }
+        : { right: 0, borderTopLeftRadius: 0, borderBottomLeftRadius: 0 };
     if (!mounted)
         return null;
-    return (_jsxs(_Fragment, { children: [_jsx("style", { children: `
+    return (react_1.default.createElement(ErrorBoundary_1.ErrorBoundary, { primaryColor: primaryColor },
+        react_1.default.createElement("style", null, `
         @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; } }
@@ -440,82 +522,95 @@ export const ChatWidget = ({ theme: localTheme, viewer }) => {
         @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%; }
-        }
-      ` }), !isOpen && callMinimized && callInProgress && callSession.peer && (_jsx(MiniCallBar, { session: callSession, primaryColor: primaryColor, buttonPosition: theme.buttonPosition, onExpand: openDrawer, onEnd: handleEndCall })), !isOpen && (_jsxs("button", { className: "cw-root", type: "button", onClick: openDrawer, "aria-label": totalUnread > 0 ? `${theme.buttonLabel}, ${totalUnread} unread` : theme.buttonLabel, title: totalUnread > 0 ? `${totalUnread} unread message${totalUnread === 1 ? '' : 's'}` : theme.buttonLabel, style: Object.assign(Object.assign({ position: 'fixed', bottom: 24, zIndex: 9999 }, posStyle), { display: 'flex', alignItems: 'center', gap: 10, padding: '13px 22px', backgroundColor: theme.buttonColor, color: theme.buttonTextColor, border: 'none', borderRadius: 50, cursor: 'pointer', fontSize: 15, fontWeight: 700, boxShadow: `0 8px 28px ${theme.buttonColor}55`, animation: 'cw-btnPop 0.4s cubic-bezier(0.34,1.56,0.64,1)', transition: 'transform 0.2s, box-shadow 0.2s' }), onMouseEnter: e => {
-                    e.currentTarget.style.transform = 'scale(1.06) translateY(-2px)';
-                    e.currentTarget.style.boxShadow = `0 14px 36px ${theme.buttonColor}66`;
-                }, onMouseLeave: e => {
-                    e.currentTarget.style.transform = 'scale(1)';
-                    e.currentTarget.style.boxShadow = `0 8px 28px ${theme.buttonColor}55`;
-                }, children: [_jsxs("span", { style: { position: 'relative', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }, children: [_jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z", stroke: theme.buttonTextColor, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }), totalUnread > 0 && (_jsx("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',
-                                }, children: totalUnread > 99 ? '99+' : totalUnread }))] }), _jsx("span", { children: theme.buttonLabel })] })), isOpen && (_jsx("div", { "aria-hidden": true, style: {
-                    position: 'fixed', inset: 0, zIndex: 9997,
-                    backgroundColor: 'rgba(0,0,0,0.35)',
-                    opacity: closing ? 0 : 1,
-                    transition: 'opacity 0.3s',
-                } })), isOpen && (_jsxs("div", { className: `cw-root cw-drawer-panel ${closing ? 'cw-drawer-exit' : 'cw-drawer-enter'}`, style: Object.assign(Object.assign({ 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' }), children: [cfgLoading && (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', gap: 16 }, children: [_jsx("div", { style: {
-                                    width: 40, height: 40, borderRadius: '50%',
-                                    border: `3px solid ${primaryColor}30`,
-                                    borderTopColor: primaryColor,
-                                    animation: 'spin 0.8s linear infinite',
-                                } }), _jsx("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` }), _jsx("p", { style: { fontSize: 14, color: '#7b8fa1' }, children: "Loading chat\u2026" })] })), cfgError && !cfgLoading && (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', gap: 12, padding: 32, textAlign: 'center' }, children: [_jsx("div", { style: { fontSize: 40 }, children: "\u26A0\uFE0F" }), _jsx("p", { style: { fontWeight: 700, color: '#1a2332' }, children: "Could not load chat configuration" }), _jsx("p", { style: { fontSize: 13, color: '#7b8fa1', lineHeight: 1.6 }, children: cfgError }), _jsx("button", { onClick: closeDrawer, style: { padding: '9px 20px', borderRadius: 10, border: 'none', background: primaryColor, color: '#fff', cursor: 'pointer', fontWeight: 700 }, children: "Close" })] })), !cfgLoading && !cfgError && widgetConfig && (_jsxs(_Fragment, { children: [screen !== 'chat' && screen !== 'call' && !effectiveViewerBlocked && (_jsx("div", { style: {
-                                    position: 'absolute', top: 12,
-                                    right: theme.buttonPosition === 'bottom-left' ? 'auto' : 12,
-                                    left: theme.buttonPosition === 'bottom-left' ? 12 : 'auto',
-                                    zIndex: 20, display: 'flex', gap: 6,
-                                }, children: _jsx(CornerBtn, { onClick: closeDrawer, title: "Close", children: _jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M18 6L6 18M6 6l12 12", stroke: "#fff", strokeWidth: "2.5", strokeLinecap: "round" }) }) }) })), widgetConfig.status === 'MAINTENANCE' && (_jsx(MaintenanceView, { primaryColor: primaryColor })), widgetConfig.status === 'DISABLE' && (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', padding: 32, textAlign: 'center', gap: 12 }, children: [_jsx("div", { style: { fontSize: 40 }, children: "\uD83D\uDD12" }), _jsx("p", { style: { fontWeight: 700, color: '#1a2332' }, children: "Chat is disabled" }), _jsx("button", { onClick: closeDrawer, style: { padding: '9px 20px', borderRadius: 10, border: 'none', background: primaryColor, color: '#fff', cursor: 'pointer', fontWeight: 700 }, children: "Close" })] })), widgetConfig.status === 'ACTIVE' && effectiveViewerBlocked && (_jsx(ViewerBlockedScreen, { config: widgetConfig, apiKey: apiKey, onClose: closeDrawer })), widgetConfig.status === 'ACTIVE' && !effectiveViewerBlocked && !permissionsOk && (_jsx(PermissionsGateScreen, { primaryColor: primaryColor, widgetId: widgetConfig.id, onGranted: () => setPermissionsOk(true) })), widgetConfig.status === 'ACTIVE' && !effectiveViewerBlocked && permissionsOk && (_jsxs("div", { className: "cw-scroll", style: { flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }, children: [screen === 'home' && (_jsx(HomeScreen, { config: widgetConfig, apiKey: apiKey, onNavigate: handleCardClick, onOpenTicket: handleOpenTicket, tickets: tickets })), screen === 'user-list' && (_jsx(UserListScreen, { context: userListCtx, users: filteredUsers, primaryColor: primaryColor, viewerType: (_e = widgetConfig.viewerType) !== null && _e !== void 0 ? _e : 'user', onBack: () => { setListEntranceAnimation(false); setScreen('home'); }, onSelectUser: handleSelectUser, onBlockList: userListCtx === 'conversation' ? () => setScreen('block-list') : undefined, useHomeHeader: userListCtx === 'support' && widgetConfig.viewerType !== 'developer', animateEntrance: listEntranceAnimation })), screen === 'chat' && activeUser && (_jsx(ChatScreen, { activeUser: activeUser, messages: messages, config: widgetConfig, isPaused: isPaused, isReported: isReported, isBlocked: isBlocked, onSend: sendMessage, onBack: handleBackFromChat, onClose: closeDrawer, onTogglePause: handleTogglePause, onReport: reportChat, onBlock: handleBlock, onStartCall: handleStartCall, onNavAction: handleNavFromMenu, otherDevelopers: otherDevelopers, onTransferToDeveloper: handleTransferToDeveloper, messageSoundEnabled: messageSoundEnabled, onToggleMessageSound: toggleMessageSound })), screen === 'call' && callSession.peer && (_jsx(CallScreen, { session: callSession, localVideoRef: localVideoRef, remoteVideoRef: remoteVideoRef, onEnd: handleEndCall, onToggleMute: toggleMute, onToggleCamera: toggleCamera, primaryColor: primaryColor, onMinimize: minimizeCall })), screen === 'recent-chats' && (_jsx(RecentChatsScreen, { chats: recentChats, config: widgetConfig, onSelectChat: u => handleSelectUser(u, listCtxForUser(u, viewerIsDev)), animateEntrance: listEntranceAnimation })), screen === 'tickets' && (_jsx(TicketScreen, { tickets: tickets, config: widgetConfig, onNewTicket: () => { setListEntranceAnimation(false); setScreen('ticket-new'); }, onSelectTicket: id => {
-                                            setListEntranceAnimation(false);
-                                            setViewingTicketId(id);
-                                            setScreen('ticket-detail');
-                                        }, animateEntrance: listEntranceAnimation })), screen === 'ticket-new' && (_jsx(TicketFormScreen, { config: widgetConfig, onSubmit: handleRaiseTicket, onCancel: () => setScreen('tickets') })), screen === 'ticket-detail' && viewingTicketId && ((() => {
-                                        const t = tickets.find(x => x.id === viewingTicketId);
-                                        return t ? (_jsx(TicketDetailScreen, { ticket: t, config: widgetConfig, onBack: () => { setViewingTicketId(null); setScreen('tickets'); } })) : null;
-                                    })()), screen === 'block-list' && (_jsx(BlockListScreen, { blockedUsers: blockedUsers, config: widgetConfig, onUnblock: handleUnblock, onBack: () => { setScreen('home'); setActiveTab('home'); } }))] })), widgetConfig.status === 'ACTIVE' &&
-                                !effectiveViewerBlocked &&
-                                permissionsOk &&
-                                screen !== 'chat' &&
-                                screen !== 'call' &&
-                                screen !== 'user-list' &&
-                                screen !== 'block-list' &&
-                                screen !== 'ticket-detail' &&
-                                screen !== 'ticket-new' && (_jsx(BottomTabs, { active: activeTab, onChange: handleTabChange, primaryColor: primaryColor }))] }))] }))] }));
+        .cw-drawer-panel { width: 30%; max-width: 100vw; min-width: 0; }
+        @media (max-width: 1024px) { .cw-drawer-panel { width: 100%; } }
+      `),
+        socketStatus !== 'connected' && socketStatus !== 'disconnected' && (react_1.default.createElement("div", { style: Object.assign(Object.assign({ 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')),
+        !isOpen && callMinimized && callInProgress && callSession.peer && (react_1.default.createElement(MiniCallBar_1.MiniCallBar, { session: callSession, primaryColor: primaryColor, buttonPosition: theme.buttonPosition, onExpand: openDrawer, onEnd: handleEndCall })),
+        !isOpen && (react_1.default.createElement("button", { className: "cw-root", type: "button", onClick: openDrawer, "aria-label": totalUnread > 0 ? `${theme.buttonLabel}, ${totalUnread} unread` : theme.buttonLabel, title: totalUnread > 0 ? `${totalUnread} unread message${totalUnread === 1 ? '' : 's'}` : theme.buttonLabel, style: Object.assign(Object.assign({ position: 'fixed', bottom: 24, zIndex: 9999 }, posStyle), { display: 'flex', alignItems: 'center', gap: 10, padding: '13px 22px', backgroundColor: theme.buttonColor, color: theme.buttonTextColor, border: 'none', borderRadius: 50, cursor: 'pointer', fontSize: 15, fontWeight: 700, boxShadow: `0 8px 28px ${theme.buttonColor}55`, animation: 'cw-btnPop 0.4s cubic-bezier(0.34,1.56,0.64,1)', transition: 'transform 0.2s, box-shadow 0.2s' }), onMouseEnter: e => {
+                e.currentTarget.style.transform = 'scale(1.06) translateY(-2px)';
+                e.currentTarget.style.boxShadow = `0 14px 36px ${theme.buttonColor}66`;
+            }, onMouseLeave: e => {
+                e.currentTarget.style.transform = 'scale(1)';
+                e.currentTarget.style.boxShadow = `0 8px 28px ${theme.buttonColor}55`;
+            } },
+            react_1.default.createElement("span", { style: { position: 'relative', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' } },
+                react_1.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none" },
+                    react_1.default.createElement("path", { d: "M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z", stroke: theme.buttonTextColor, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })),
+                totalUnread > 0 && (react_1.default.createElement("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))),
+            react_1.default.createElement("span", null, theme.buttonLabel))),
+        isOpen && (react_1.default.createElement("div", { "aria-hidden": true, style: {
+                position: 'fixed', inset: 0, zIndex: 9997,
+                backgroundColor: 'rgba(0,0,0,0.35)',
+                opacity: closing ? 0 : 1,
+                transition: 'opacity 0.3s',
+            } })),
+        isOpen && (react_1.default.createElement("div", { className: `cw-root cw-drawer-panel ${closing ? 'cw-drawer-exit' : 'cw-drawer-enter'}`, style: Object.assign(Object.assign({ 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' }) },
+            cfgLoading && (react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', gap: 16 } },
+                react_1.default.createElement("div", { style: { width: 40, height: 40, borderRadius: '50%', border: `3px solid ${primaryColor}30`, borderTopColor: primaryColor, animation: 'spin 0.8s linear infinite' } }),
+                react_1.default.createElement("p", { style: { fontSize: 14, color: '#7b8fa1' } }, "Loading chat\u2026"))),
+            cfgError && !cfgLoading && (react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', gap: 12, padding: 32, textAlign: 'center' } },
+                react_1.default.createElement("div", { style: { fontSize: 40 } }, "\u26A0\uFE0F"),
+                react_1.default.createElement("p", { style: { fontWeight: 700, color: '#1a2332' } }, "Could not load chat configuration"),
+                react_1.default.createElement("p", { style: { fontSize: 13, color: '#7b8fa1', lineHeight: 1.6 } }, cfgError),
+                react_1.default.createElement("button", { onClick: closeDrawer, style: { padding: '9px 20px', borderRadius: 10, border: 'none', background: primaryColor, color: '#fff', cursor: 'pointer', fontWeight: 700 } }, "Close"))),
+            !cfgLoading && !cfgError && widgetConfig && (react_1.default.createElement(ErrorBoundary_1.ErrorBoundary, { primaryColor: primaryColor },
+                screen !== 'chat' && screen !== 'call' && !effectiveViewerBlocked && (react_1.default.createElement("div", { style: {
+                        position: 'absolute', top: 12,
+                        right: theme.buttonPosition === 'bottom-left' ? 'auto' : 12,
+                        left: theme.buttonPosition === 'bottom-left' ? 12 : 'auto',
+                        zIndex: 20, display: 'flex', gap: 6,
+                    } },
+                    react_1.default.createElement(CornerBtn, { onClick: closeDrawer, title: "Close" },
+                        react_1.default.createElement("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none" },
+                            react_1.default.createElement("path", { d: "M18 6L6 18M6 6l12 12", stroke: "#fff", strokeWidth: "2.5", strokeLinecap: "round" }))))),
+                widgetConfig.status === 'MAINTENANCE' && react_1.default.createElement(MaintenanceView_1.MaintenanceView, { primaryColor: primaryColor }),
+                widgetConfig.status === 'DISABLE' && (react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', padding: 32, textAlign: 'center', gap: 12 } },
+                    react_1.default.createElement("div", { style: { fontSize: 40 } }, "\uD83D\uDD12"),
+                    react_1.default.createElement("p", { style: { fontWeight: 700, color: '#1a2332' } }, "Chat is disabled"),
+                    react_1.default.createElement("button", { onClick: closeDrawer, style: { padding: '9px 20px', borderRadius: 10, border: 'none', background: primaryColor, color: '#fff', cursor: 'pointer', fontWeight: 700 } }, "Close"))),
+                widgetConfig.status === 'ACTIVE' && effectiveViewerBlocked && (react_1.default.createElement(ViewerBlockedScreen_1.ViewerBlockedScreen, { config: widgetConfig, apiKey: apiKey, onClose: closeDrawer })),
+                widgetConfig.status === 'ACTIVE' && !effectiveViewerBlocked && !permissionsOk && (react_1.default.createElement(PermissionsGateScreen_1.PermissionsGateScreen, { primaryColor: primaryColor, widgetId: widgetConfig.id, onGranted: () => setPermissionsOk(true) })),
+                widgetConfig.status === 'ACTIVE' && !effectiveViewerBlocked && permissionsOk && (react_1.default.createElement("div", { className: "cw-scroll", style: { flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' } },
+                    screen === 'home' && (react_1.default.createElement(HomeScreen_1.HomeScreen, { config: widgetConfig, apiKey: apiKey, onNavigate: handleCardClick, onOpenTicket: handleOpenTicket, tickets: tickets })),
+                    screen === 'user-list' && (react_1.default.createElement(UserListScreen_1.UserListScreen, { context: userListCtx, users: filteredUsers, primaryColor: primaryColor, viewerType: (_h = widgetConfig.viewerType) !== null && _h !== void 0 ? _h : 'user', onBack: () => { setListEntranceAnimation(false); setScreen('home'); }, onSelectUser: handleSelectUser, onBlockList: userListCtx === 'conversation' ? () => setScreen('block-list') : undefined, useHomeHeader: userListCtx === 'support' && widgetConfig.viewerType !== 'developer', animateEntrance: listEntranceAnimation })),
+                    screen === 'chat' && activeUser && (react_1.default.createElement(ChatScreen_1.ChatScreen, { activeUser: activeUser, messages: messages, config: widgetConfig, isPaused: isPaused, isReported: isReported, isBlocked: isBlocked, onSend: sendMessage, onBack: handleBackFromChat, onClose: closeDrawer, onTogglePause: handleTogglePause, onReport: _reportChat, onBlock: handleBlock, onStartCall: handleStartCall, onNavAction: handleNavFromMenu, otherDevelopers: otherDevelopers, onTransferToDeveloper: handleTransferToDeveloper, messageSoundEnabled: messageSoundEnabled, onToggleMessageSound: toggleMessageSound })),
+                    screen === 'call' && callSession.peer && (react_1.default.createElement(CallScreen_1.CallScreen, { session: callSession, localVideoRef: localVideoRef, remoteVideoRef: remoteVideoRef, onEnd: handleEndCall, onToggleMute: toggleMute, onToggleCamera: toggleCamera, primaryColor: primaryColor, onMinimize: minimizeCall })),
+                    screen === 'recent-chats' && (react_1.default.createElement(RecentChatsScreen_1.RecentChatsScreen, { chats: recentChats, config: widgetConfig, onSelectChat: u => handleSelectUser(u, listCtxForUser(u, viewerIsDev)), animateEntrance: listEntranceAnimation })),
+                    screen === 'tickets' && (react_1.default.createElement(TicketScreen_1.TicketScreen, { tickets: tickets, config: widgetConfig, onNewTicket: () => { setListEntranceAnimation(false); setScreen('ticket-new'); }, onSelectTicket: id => {
+                            setListEntranceAnimation(false);
+                            setViewingTicketId(id);
+                            setScreen('ticket-detail');
+                        }, animateEntrance: listEntranceAnimation })),
+                    screen === 'ticket-new' && (react_1.default.createElement(TicketFormScreen_1.TicketFormScreen, { config: widgetConfig, onSubmit: handleRaiseTicket, onCancel: () => setScreen('tickets') })),
+                    screen === 'ticket-detail' && viewingTicketId && (() => {
+                        const t = tickets.find(x => x.id === viewingTicketId);
+                        return t ? (react_1.default.createElement(TicketDetailScreen_1.TicketDetailScreen, { ticket: t, config: widgetConfig, onBack: () => { setViewingTicketId(null); setScreen('tickets'); } })) : null;
+                    })(),
+                    screen === 'block-list' && (react_1.default.createElement(BlockList_1.BlockListScreen, { blockedUsers: blockedUsers, config: widgetConfig, onUnblock: handleUnblock, onBack: () => { setScreen('home'); setActiveTab('home'); } })))),
+                widgetConfig.status === 'ACTIVE' &&
+                    !effectiveViewerBlocked && permissionsOk &&
+                    screen !== 'chat' && screen !== 'call' &&
+                    screen !== 'user-list' && screen !== 'block-list' &&
+                    screen !== 'ticket-detail' && screen !== 'ticket-new' && (react_1.default.createElement(BottomTabs_1.BottomTabs, { active: activeTab, onChange: handleTabChange, primaryColor: primaryColor }))))))));
 };
-export default ChatWidget;
-/* ── Tiny corner button ────────────────────────────────────────────────────── */
-const CornerBtn = ({ onClick, title, children }) => (_jsx("button", { onClick: onClick, title: title, style: {
-        width: 26, height: 26, borderRadius: '50%',
-        background: 'rgba(0,0,0,0.25)', border: 'none',
+exports.ChatWidget = ChatWidget;
+exports.default = exports.ChatWidget;
+const CornerBtn = ({ onClick, title, children }) => (react_1.default.createElement("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',
-    }, children: children }));
+    } }, children));
+//# sourceMappingURL=ChatWidget.js.map