ajaxter-chat 3.0.14 → 3.0.16

package/dist/components/ChatWidget.js

@@ -23,7 +23,7 @@ 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, _f;
+    var _a, _b, _c, _d, _e;
     /* SSR guard */
     const [mounted, setMounted] = useState(false);
     useEffect(() => { setMounted(true); }, []);
@@ -53,13 +53,14 @@ export const ChatWidget = ({ theme: localTheme, viewer }) => {
     const [blockedUids, setBlockedUids] = 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(() => {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         if (data) {
             setTickets(data.sampleTickets);
             setBlockedUids(data.blockedUsers);
             const pid = (_a = viewer === null || viewer === void 0 ? void 0 : viewer.projectId) === null || _a === void 0 ? void 0 : _a.trim();
-            const inProject = (u) => !pid || u.project === pid;
-            const all = [...((_b = data.developers) !== null && _b !== void 0 ? _b : []), ...((_c = data.users) !== null && _c !== void 0 ? _c : [])].filter(inProject);
+            const devs = (_b = data.developers) !== null && _b !== void 0 ? _b : [];
+            const usr = pid ? ((_c = data.users) !== null && _c !== void 0 ? _c : []).filter(u => u.project === pid) : ((_d = data.users) !== null && _d !== void 0 ? _d : []);
+            const all = [...devs, ...usr];
             const recents = Object.entries(data.sampleChats).map(([uid, msgs]) => {
                 const user = all.find(u => u.uid === uid);
                 if (!user || msgs.length === 0)
@@ -118,12 +119,18 @@ export const ChatWidget = ({ theme: localTheme, viewer }) => {
     }, [(_c = data === null || data === void 0 ? void 0 : data.widget) === null || _c === void 0 ? void 0 : _c.id]);
     const restoredRef = useRef(false);
     useEffect(() => {
-        var _a, _b, _c, _d;
+        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));
-        if (w.viewerBlocked) {
+        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) {
+            const rec = [...data.developers, ...data.users].find(x => x.uid === uidForBlock);
+            viewerIsBlocked = (rec === null || rec === void 0 ? void 0 : rec.viewerBlocked) === true;
+        }
+        if (viewerIsBlocked) {
             clearChat();
             setScreen('home');
             setActiveTab('home');
@@ -136,10 +143,10 @@ export const ChatWidget = ({ theme: localTheme, viewer }) => {
             setScreen(p.screen);
             setActiveTab(p.activeTab);
             setUserListCtx(p.userListCtx);
-            setViewingTicketId((_a = p.viewingTicketId) !== null && _a !== void 0 ? _a : null);
-            setChatReturnCtx((_b = p.chatReturnCtx) !== null && _b !== void 0 ? _b : 'conversation');
+            setViewingTicketId((_c = p.viewingTicketId) !== null && _c !== void 0 ? _c : null);
+            setChatReturnCtx((_d = p.chatReturnCtx) !== null && _d !== void 0 ? _d : 'conversation');
             if (p.activeUserUid) {
-                const pid = (_c = viewer === null || viewer === void 0 ? void 0 : viewer.projectId) === null || _c === void 0 ? void 0 : _c.trim();
+                const pid = (_e = viewer === null || viewer === void 0 ? void 0 : viewer.projectId) === null || _e === void 0 ? void 0 : _e.trim();
                 const pool = pid
                     ? [...data.developers, ...data.users].filter(u => u.project === pid)
                     : [...data.developers, ...data.users];
@@ -147,27 +154,36 @@ export const ChatWidget = ({ theme: localTheme, viewer }) => {
                 if (u) {
                     const hist = Array.isArray(p.messages) && p.messages.length
                         ? p.messages
-                        : ((_d = data.sampleChats[u.uid]) !== null && _d !== void 0 ? _d : []);
+                        : ((_f = data.sampleChats[u.uid]) !== null && _f !== void 0 ? _f : []);
                     selectUser(u, hist);
                 }
             }
         }
         restoredRef.current = true;
-    }, [data, selectUser, clearChat, viewer === null || viewer === void 0 ? void 0 : viewer.projectId]);
+    }, [data, selectUser, clearChat, viewer === null || viewer === void 0 ? void 0 : viewer.projectId, viewer === null || viewer === void 0 ? void 0 : viewer.uid]);
     useEffect(() => {
-        var _a;
-        if (!((_a = data === null || data === void 0 ? void 0 : data.widget) === null || _a === void 0 ? void 0 : _a.viewerBlocked))
+        var _a, _b;
+        if (!(data === null || data === void 0 ? void 0 : data.widget))
+            return;
+        const w = data.widget;
+        const uid = (_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 blocked = w.viewerBlocked === true;
+        if (!blocked && uid) {
+            const rec = [...data.developers, ...data.users].find(x => x.uid === uid);
+            blocked = (rec === null || rec === void 0 ? void 0 : rec.viewerBlocked) === true;
+        }
+        if (!blocked)
             return;
         clearChat();
         setScreen('home');
         setActiveTab('home');
         setViewingTicketId(null);
-    }, [(_d = data === null || data === void 0 ? void 0 : data.widget) === null || _d === void 0 ? void 0 : _d.viewerBlocked, clearChat]);
+    }, [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(() => {
         if (!(data === null || data === void 0 ? void 0 : data.widget))
             return;
         persistWidgetState();
-    }, [(_e = data === null || data === void 0 ? void 0 : data.widget) === null || _e === void 0 ? void 0 : _e.id, screen, activeTab, userListCtx, activeUser === null || activeUser === void 0 ? void 0 : activeUser.uid, messages, viewingTicketId, chatReturnCtx, 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;
@@ -318,16 +334,30 @@ export const ChatWidget = ({ theme: localTheme, viewer }) => {
         return w;
     }, [data === null || data === void 0 ? void 0 : data.widget, viewer]);
     const primaryColor = theme.primaryColor;
+    /** All developers are listed; only end-`user` rows are filtered by `viewer.projectId`. */
     const allUsers = useMemo(() => {
-        var _a;
+        var _a, _b;
         if (!data)
             return [];
         const pid = (_a = viewer === null || viewer === void 0 ? void 0 : viewer.projectId) === null || _a === void 0 ? void 0 : _a.trim();
-        const list = [...data.developers, ...data.users];
+        const devs = (_b = data.developers) !== null && _b !== void 0 ? _b : [];
         if (!pid)
-            return list;
-        return list.filter(u => u.project === pid);
+            return [...devs, ...data.users];
+        const usersInProject = data.users.filter(u => u.project === pid);
+        return [...devs, ...usersInProject];
     }, [data, viewer === null || viewer === void 0 ? void 0 : viewer.projectId]);
+    const effectiveViewerBlocked = useMemo(() => {
+        var _a, _b;
+        if (!widgetConfig)
+            return false;
+        if (widgetConfig.viewerBlocked === true)
+            return true;
+        const uid = (_b = ((_a = viewer === null || viewer === void 0 ? void 0 : viewer.uid) !== null && _a !== void 0 ? _a : widgetConfig.viewerUid)) === null || _b === void 0 ? void 0 : _b.trim();
+        if (!uid || !data)
+            return false;
+        const rec = [...data.developers, ...data.users].find(x => x.uid === uid);
+        return (rec === null || rec === void 0 ? void 0 : rec.viewerBlocked) === true;
+    }, [widgetConfig, viewer === null || viewer === void 0 ? void 0 : viewer.uid, data]);
     const viewerIsDev = (widgetConfig === null || widgetConfig === void 0 ? void 0 : widgetConfig.viewerType) === 'developer';
     const viewerUid = widgetConfig === null || widgetConfig === void 0 ? void 0 : widgetConfig.viewerUid;
     const filteredUsers = screen === 'user-list'
@@ -345,6 +375,7 @@ export const ChatWidget = ({ theme: localTheme, viewer }) => {
         : [];
     const otherDevelopers = 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)
@@ -411,13 +442,29 @@ export const ChatWidget = ({ theme: localTheme, viewer }) => {
         @media (max-width: 1024px) {
           .cw-drawer-panel { width: 100%; }
         }
-      ` }), !isOpen && (_jsxs("button", { className: "cw-root", onClick: openDrawer, "aria-label": 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 => {
+      ` }), !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: [_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" }) }), _jsx("span", { children: theme.buttonLabel })] })), isOpen && (_jsx("div", { "aria-hidden": true, style: {
+                }, 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,
@@ -429,12 +476,12 @@ export const ChatWidget = ({ theme: localTheme, viewer }) => {
                                     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' && (_jsx("div", { style: {
+                                } }), _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' && widgetConfig.viewerBlocked && (_jsx(ViewerBlockedScreen, { config: widgetConfig, apiKey: apiKey })), widgetConfig.status === 'ACTIVE' && !widgetConfig.viewerBlocked && !permissionsOk && (_jsx(PermissionsGateScreen, { primaryColor: primaryColor, widgetId: widgetConfig.id, onGranted: () => setPermissionsOk(true) })), widgetConfig.status === 'ACTIVE' && !widgetConfig.viewerBlocked && permissionsOk && (_jsxs("div", { className: "cw-scroll", style: { flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }, children: [screen === 'home' && (_jsx(HomeScreen, { config: widgetConfig, onNavigate: handleCardClick, onOpenTicket: handleOpenTicket, tickets: tickets })), screen === 'user-list' && (_jsx(UserListScreen, { context: userListCtx, users: filteredUsers, primaryColor: primaryColor, viewerType: (_f = widgetConfig.viewerType) !== null && _f !== void 0 ? _f : '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 })), 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 => {
+                                }, 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 })), 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');
@@ -442,7 +489,7 @@ export const ChatWidget = ({ theme: localTheme, viewer }) => {
                                         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' &&
-                                !widgetConfig.viewerBlocked &&
+                                !effectiveViewerBlocked &&
                                 permissionsOk &&
                                 screen !== 'chat' &&
                                 screen !== 'call' &&

package/dist/components/HomeScreen/index.d.ts

@@ -6,6 +6,8 @@ export interface HomeNavigateOptions {
 }
 interface HomeScreenProps {
     config: WidgetConfig;
+    /** Same as env / chatData — required to POST presence in production */
+    apiKey: string;
     onNavigate: (ctx: UserListContext | 'ticket', options?: HomeNavigateOptions) => void;
     /** Open a specific pending ticket (full detail) */
     onOpenTicket: (ticketId: string) => void;

package/dist/components/HomeScreen/index.js

@@ -1,10 +1,36 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useMemo } from 'react';
+import { useState, useMemo, useEffect } from 'react';
 import { SlideNavMenu } from '../SlideNavMenu';
 import { truncateWords } from '../../utils/chat';
-export const HomeScreen = ({ config, onNavigate, onOpenTicket, tickets }) => {
+import { resolveInitialPresence, savePresenceStatus, syncPresenceToServer, } from '../../utils/presenceStatus';
+const STATUS_OPTIONS = [
+    { value: 'ACTIVE', label: 'Active' },
+    { value: 'AWAY', label: 'Away' },
+    { value: 'DND', label: 'DND' },
+];
+export const HomeScreen = ({ config, apiKey, onNavigate, onOpenTicket, tickets }) => {
     var _a, _b, _c, _d;
     const [menuOpen, setMenuOpen] = useState(false);
+    const [presence, setPresence] = useState(() => resolveInitialPresence(config.id, config.presenceStatus));
+    useEffect(() => {
+        setPresence(resolveInitialPresence(config.id, config.presenceStatus));
+    }, [config.id, config.presenceStatus]);
+    const setPresenceAndSave = (s) => {
+        var _a, _b;
+        setPresence(s);
+        savePresenceStatus(config.id, s);
+        const url = (_a = config.presenceUpdateUrl) === null || _a === void 0 ? void 0 : _a.trim();
+        if (!url)
+            return;
+        void syncPresenceToServer(url, {
+            widgetId: config.id,
+            apiKey,
+            viewerUid: ((_b = config.viewerUid) === null || _b === void 0 ? void 0 : _b.trim()) || undefined,
+            status: s,
+        }).catch(err => {
+            console.error('[ajaxter-chat] presence sync failed', err);
+        });
+    };
     const showSupport = config.chatType === 'SUPPORT' || config.chatType === 'BOTH';
     const showChat = config.chatType === 'CHAT' || config.chatType === 'BOTH';
     const viewerIsDev = config.viewerType === 'developer';
@@ -25,28 +51,58 @@ export const HomeScreen = ({ config, onNavigate, onOpenTicket, tickets }) => {
     };
     return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', height: '100%', position: 'relative', overflow: 'hidden', background: '#fafbfc' }, children: [_jsx(SlideNavMenu, { open: menuOpen, onClose: () => setMenuOpen(false), primaryColor: config.primaryColor, chatType: config.chatType, viewerType: (_d = config.viewerType) !== null && _d !== void 0 ? _d : 'user', onSelect: ctx => {
                     onNavigate(ctx, { fromMenu: true });
-                } }), _jsx("div", { style: {
+                } }), _jsxs("div", { style: {
                     flexShrink: 0,
-                    padding: '14px 16px 10px',
+                    padding: '12px 14px 12px',
                     display: 'flex',
                     alignItems: 'center',
-                    gap: 12,
+                    gap: 10,
                     background: '#fff',
                     borderBottom: '1px solid #eef0f5',
-                }, children: _jsxs("button", { type: "button", "aria-label": "Open menu", onClick: () => setMenuOpen(true), style: {
-                        width: 40,
-                        height: 40,
-                        borderRadius: 10,
-                        border: 'none',
-                        background: '#f1f5f9',
-                        cursor: 'pointer',
-                        display: 'flex',
-                        flexDirection: 'column',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        gap: 5,
-                        flexShrink: 0,
-                    }, children: [_jsx("span", { style: { width: 18, height: 2, background: '#334155', borderRadius: 1 } }), _jsx("span", { style: { width: 18, height: 2, background: '#334155', borderRadius: 1 } }), _jsx("span", { style: { width: 18, height: 2, background: '#334155', borderRadius: 1 } })] }) }), _jsxs("div", { className: "cw-scroll", style: { flex: 1, overflowY: 'auto', padding: '20px 18px 28px' }, children: [_jsx("h1", { style: {
+                }, children: [_jsxs("button", { type: "button", "aria-label": "Open menu", onClick: () => setMenuOpen(true), style: {
+                            width: 40,
+                            height: 40,
+                            borderRadius: 10,
+                            border: 'none',
+                            background: '#f1f5f9',
+                            cursor: 'pointer',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            gap: 5,
+                            flexShrink: 0,
+                        }, children: [_jsx("span", { style: { width: 18, height: 2, background: '#334155', borderRadius: 1 } }), _jsx("span", { style: { width: 18, height: 2, background: '#334155', borderRadius: 1 } }), _jsx("span", { style: { width: 18, height: 2, background: '#334155', borderRadius: 1 } })] }), _jsx("div", { style: { flex: 1, minWidth: 0 } }), _jsxs("div", { style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 6,
+                            flexShrink: 0,
+                            flexWrap: 'wrap',
+                            justifyContent: 'flex-end',
+                        }, children: [_jsx("span", { style: { fontSize: 11, fontWeight: 700, color: '#94a3b8', textTransform: 'uppercase', letterSpacing: '0.06em' }, children: "Status" }), _jsx("div", { role: "group", "aria-label": "Your status", style: {
+                                    display: 'flex',
+                                    borderRadius: 10,
+                                    padding: 3,
+                                    background: '#f1f5f9',
+                                    gap: 2,
+                                }, children: STATUS_OPTIONS.map(({ value, label }) => {
+                                    const isOn = presence === value;
+                                    return (_jsx("button", { type: "button", onClick: () => setPresenceAndSave(value), style: {
+                                            border: 'none',
+                                            borderRadius: 8,
+                                            padding: '7px 10px',
+                                            fontSize: 11,
+                                            fontWeight: 700,
+                                            letterSpacing: '0.04em',
+                                            cursor: 'pointer',
+                                            fontFamily: 'inherit',
+                                            textTransform: 'uppercase',
+                                            background: isOn ? config.primaryColor : 'transparent',
+                                            color: isOn ? '#fff' : '#64748b',
+                                            boxShadow: isOn ? `0 2px 8px ${config.primaryColor}55` : 'none',
+                                            transition: 'background 0.15s, color 0.15s',
+                                        }, children: label }, value));
+                                }) })] })] }), _jsxs("div", { className: "cw-scroll", style: { flex: 1, overflowY: 'auto', padding: '20px 18px 28px' }, children: [_jsx("h1", { style: {
                             margin: '0 0 8px',
                             fontSize: 24,
                             fontWeight: 800,

package/dist/components/ViewerBlockedScreen/index.d.ts

@@ -3,6 +3,7 @@ import { WidgetConfig } from '../../types';
 interface ViewerBlockedScreenProps {
     config: WidgetConfig;
     apiKey: string;
+    onClose: () => void;
 }
 export declare const ViewerBlockedScreen: React.FC<ViewerBlockedScreenProps>;
 export {};

package/dist/components/ViewerBlockedScreen/index.js

@@ -1,9 +1,9 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { submitReenableRequest } from '../../utils/reenableRequest';
 const DEFAULT_MESSAGE = 'You have been marked as Blocked user due to spam';
-export const ViewerBlockedScreen = ({ config, apiKey }) => {
+export const ViewerBlockedScreen = ({ config, apiKey, onClose }) => {
     var _a, _b;
     const [text, setText] = useState('');
     const [status, setStatus] = useState('idle');
@@ -56,7 +56,18 @@ export const ViewerBlockedScreen = ({ config, apiKey }) => {
                         fontWeight: 600,
                         color: '#1e293b',
                         lineHeight: 1.55,
-                    }, children: body }), status === 'sent' ? (_jsx("p", { style: { margin: 0, fontSize: 14, color: '#16a34a', fontWeight: 600 }, children: "Your request was sent. We will review it shortly." })) : (_jsxs(_Fragment, { children: [_jsx("label", { htmlFor: "cw-reenable-msg", style: { display: 'block', textAlign: 'left', fontSize: 13, fontWeight: 600, color: '#475569', marginBottom: 8 }, children: "Request access restoration" }), _jsx("textarea", { id: "cw-reenable-msg", value: text, onChange: e => { setText(e.target.value); setError(null); setStatus('idle'); }, placeholder: "Explain briefly why your access should be restored\u2026", rows: 4, disabled: status === 'sending', style: {
+                    }, children: body }), status === 'sent' ? (_jsxs(_Fragment, { children: [_jsx("p", { style: { margin: '0 0 16px', fontSize: 14, color: '#16a34a', fontWeight: 600 }, children: "Your request was sent. We will review it shortly." }), _jsx("button", { type: "button", onClick: onClose, style: {
+                                width: '100%',
+                                padding: '12px 16px',
+                                borderRadius: 12,
+                                border: '2px solid #ef4444',
+                                background: '#fff',
+                                color: '#ef4444',
+                                fontWeight: 700,
+                                fontSize: 15,
+                                cursor: 'pointer',
+                                fontFamily: 'inherit',
+                            }, children: "Close" })] })) : (_jsxs(_Fragment, { children: [_jsx("label", { htmlFor: "cw-reenable-msg", style: { display: 'block', textAlign: 'left', fontSize: 13, fontWeight: 600, color: '#475569', marginBottom: 8 }, children: "Request access restoration" }), _jsx("textarea", { id: "cw-reenable-msg", value: text, onChange: e => { setText(e.target.value); setError(null); setStatus('idle'); }, placeholder: "Explain briefly why your access should be restored\u2026", rows: 4, maxLength: 500, minLength: 50, disabled: status === 'sending', style: {
                                 width: '100%',
                                 boxSizing: 'border-box',
                                 padding: '12px 14px',
@@ -65,8 +76,9 @@ export const ViewerBlockedScreen = ({ config, apiKey }) => {
                                 fontSize: 14,
                                 fontFamily: 'inherit',
                                 color: '#1e293b',
-                                resize: 'vertical',
+                                resize: 'none',
                                 minHeight: 100,
+                                maxHeight: 250,
                                 marginBottom: 14,
                                 outline: 'none',
                             } }), _jsx("button", { type: "button", onClick: handleSubmit, disabled: status === 'sending' || !text.trim(), style: {
@@ -79,5 +91,17 @@ export const ViewerBlockedScreen = ({ config, apiKey }) => {
                                 fontWeight: 700,
                                 fontSize: 15,
                                 cursor: text.trim() && status !== 'sending' ? 'pointer' : 'default',
-                            }, children: status === 'sending' ? 'Sending…' : 'Submit request' }), error && (_jsx("p", { style: { margin: '12px 0 0', fontSize: 13, color: '#dc2626', lineHeight: 1.45 }, children: error })), !url && (_jsxs("p", { style: { margin: '14px 0 0', fontSize: 12, color: '#94a3b8', lineHeight: 1.5 }, children: ["Your administrator must set ", _jsx("code", { style: { fontSize: 11 }, children: "reenableRequestUrl" }), " in widget config for online requests."] }))] }))] }) }));
+                            }, children: status === 'sending' ? 'Sending…' : 'Submit request' }), _jsx("button", { type: "button", onClick: onClose, style: {
+                                width: '100%',
+                                marginTop: 12,
+                                padding: '12px 16px',
+                                borderRadius: 12,
+                                border: '2px solid #ef4444',
+                                background: '#fff',
+                                color: '#ef4444',
+                                fontWeight: 700,
+                                fontSize: 15,
+                                cursor: 'pointer',
+                                fontFamily: 'inherit',
+                            }, children: "Close" }), error && (_jsx("p", { style: { margin: '12px 0 0', fontSize: 13, color: '#dc2626', lineHeight: 1.45 }, children: error })), !url && (_jsxs("p", { style: { margin: '14px 0 0', fontSize: 12, color: '#94a3b8', lineHeight: 1.5 }, children: ["Your administrator must set ", _jsx("code", { style: { fontSize: 11 }, children: "reenableRequestUrl" }), " in widget config for online requests."] }))] }))] }) }));
 };

package/dist/index.d.ts

@@ -18,5 +18,7 @@ export { submitReenableRequest } from './utils/reenableRequest';
 export type { ReenableRequestPayload } from './utils/reenableRequest';
 export { loadLocalConfig, fetchRemoteChatData } from './config';
 export { mergeTheme, darken } from './utils/theme';
+export { loadPresenceStatus, savePresenceStatus, resolveInitialPresence, syncPresenceToServer } from './utils/presenceStatus';
+export type { PresenceSyncPayload } from './utils/presenceStatus';
 export { avatarColor, initials, formatTime, formatDate, generateTranscript, downloadText, truncateWords } from './utils/chat';
-export type { ChatWidgetProps, ChatWidgetTheme, ChatWidgetViewer, WidgetConfig, RemoteChatData, ChatUser, ChatMessage, Ticket, RecentChat, CallSession, CallState, ChatStatus, ChatType, UserType, OnlineStatus, Screen, BottomTab, UserListContext, MessageType, LocalEnvConfig, } from './types';
+export type { ChatWidgetProps, ChatWidgetTheme, ChatWidgetViewer, WidgetConfig, RemoteChatData, ChatUser, ChatMessage, Ticket, RecentChat, CallSession, CallState, ChatStatus, ChatType, UserType, OnlineStatus, Screen, BottomTab, UserListContext, MessageType, LocalEnvConfig, PresenceStatus, } from './types';

package/dist/index.js

@@ -17,4 +17,5 @@ export { shouldShowPrivacyNotice, dismissPrivacyNotice, getPrivacyDismissedAt }
 export { submitReenableRequest } from './utils/reenableRequest';
 export { loadLocalConfig, fetchRemoteChatData } from './config';
 export { mergeTheme, darken } from './utils/theme';
+export { loadPresenceStatus, savePresenceStatus, resolveInitialPresence, syncPresenceToServer } from './utils/presenceStatus';
 export { avatarColor, initials, formatTime, formatDate, generateTranscript, downloadText, truncateWords } from './utils/chat';

package/dist/types/index.d.ts

@@ -58,6 +58,16 @@ export interface WidgetConfig {
      * @example https://api.example.com/widgets/reenable-request
      */
     reenableRequestUrl?: string;
+    /**
+     * Current presence from your API/DB (include in chatData or a session payload).
+     * When set, it initializes the status control and overrides session-only cache.
+     */
+    presenceStatus?: PresenceStatus;
+    /**
+     * Production: `POST` JSON `{ widgetId, apiKey, viewerUid?, status }` to save presence in your database.
+     * The client still mirrors to sessionStorage as a local fallback.
+     */
+    presenceUpdateUrl?: string;
 }
 export interface RemoteChatData {
     widget: WidgetConfig;
@@ -75,6 +85,8 @@ export type BottomTab = 'home' | 'chats' | 'tickets';
 export type Screen = 'home' | 'user-list' | 'chat' | 'recent-chats' | 'tickets' | 'ticket-new' | 'ticket-detail' | 'block-list' | 'call';
 export type UserListContext = 'support' | 'conversation';
 export type MessageType = 'text' | 'voice' | 'attachment' | 'emoji';
+/** Home status selector; persist via `presenceUpdateUrl` in production */
+export type PresenceStatus = 'ACTIVE' | 'AWAY' | 'DND';
 export interface ChatUser {
     uid: string;
     name: string;
@@ -85,6 +97,11 @@ export interface ChatUser {
     avatar: string | null;
     status: OnlineStatus;
     designation: string;
+    /**
+     * When `true` for the row matching the current viewer (`viewerUid` / `viewer.uid`),
+     * the widget shows the spam/blocked screen (same as `widget.viewerBlocked`).
+     */
+    viewerBlocked?: boolean;
 }
 export interface ChatMessage {
     id: string;

package/dist/utils/presenceStatus.d.ts

@@ -0,0 +1,13 @@
+import type { PresenceStatus } from '../types';
+export declare function loadPresenceStatus(widgetId: string): PresenceStatus;
+export declare function savePresenceStatus(widgetId: string, status: PresenceStatus): void;
+/** Prefer server value from DB when the host includes it in config */
+export declare function resolveInitialPresence(widgetId: string, serverStatus: PresenceStatus | undefined): PresenceStatus;
+export interface PresenceSyncPayload {
+    widgetId: string;
+    apiKey: string;
+    viewerUid?: string;
+    status: PresenceStatus;
+}
+/** Call your backend to persist presence (production DB). */
+export declare function syncPresenceToServer(url: string, payload: PresenceSyncPayload): Promise<void>;

package/dist/utils/presenceStatus.js

@@ -0,0 +1,45 @@
+const key = (widgetId) => `ajaxter_presence_${widgetId}`;
+export function loadPresenceStatus(widgetId) {
+    if (typeof sessionStorage === 'undefined')
+        return 'ACTIVE';
+    try {
+        const v = sessionStorage.getItem(key(widgetId));
+        if (v === 'ACTIVE' || v === 'AWAY' || v === 'DND')
+            return v;
+    }
+    catch (_a) {
+        /* */
+    }
+    return 'ACTIVE';
+}
+export function savePresenceStatus(widgetId, status) {
+    try {
+        sessionStorage.setItem(key(widgetId), status);
+    }
+    catch (_a) {
+        /* quota */
+    }
+}
+/** Prefer server value from DB when the host includes it in config */
+export function resolveInitialPresence(widgetId, serverStatus) {
+    if (serverStatus === 'ACTIVE' || serverStatus === 'AWAY' || serverStatus === 'DND')
+        return serverStatus;
+    return loadPresenceStatus(widgetId);
+}
+/** Call your backend to persist presence (production DB). */
+export async function syncPresenceToServer(url, payload) {
+    const res = await fetch(url, {
+        method: 'POST',
+        headers: {
+            Accept: 'application/json',
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(payload),
+        mode: 'cors',
+        credentials: 'omit',
+    });
+    if (!res.ok) {
+        const t = await res.text().catch(() => '');
+        throw new Error(t || `Presence sync failed (${res.status})`);
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ajaxter-chat",
-  "version": "3.0.14",
+  "version": "3.0.16",
   "description": "Drawer-based chat widget with support chat, tickets, WebRTC calling, voice messages, block list, and transcript download.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/public/chatData.json

@@ -62,7 +62,8 @@
       "type": "user",
       "avatar": null,
       "status": "online",
-      "designation": "Product Manager"
+      "designation": "Product Manager",
+      "viewerBlocked": false
     },
     {
       "uid": "usr_002",
@@ -73,7 +74,8 @@
       "type": "user",
       "avatar": null,
       "status": "away",
-      "designation": "Business Analyst"
+      "designation": "Business Analyst",
+      "viewerBlocked": true
     },
     {
       "uid": "usr_003",

package/src/components/ChatWidget.tsx

@@ -69,8 +69,9 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewe
       setTickets(data.sampleTickets);
       setBlockedUids(data.blockedUsers);
       const pid = viewer?.projectId?.trim();
-      const inProject = (u: ChatUser) => !pid || u.project === pid;
-      const all = [...(data.developers ?? []), ...(data.users ?? [])].filter(inProject);
+      const devs = data.developers ?? [];
+      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;
@@ -137,7 +138,13 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewe
     if (!data?.widget || restoredRef.current) return;
     const w = data.widget;
     setMessageSoundEnabledState(getMessageSoundEnabled(w.id));
-    if (w.viewerBlocked) {
+    const uidForBlock = (viewer?.uid ?? w.viewerUid)?.trim();
+    let viewerIsBlocked = w.viewerBlocked === true;
+    if (!viewerIsBlocked && uidForBlock) {
+      const rec = [...data.developers, ...data.users].find(x => x.uid === uidForBlock);
+      viewerIsBlocked = rec?.viewerBlocked === true;
+    }
+    if (viewerIsBlocked) {
       clearChat();
       setScreen('home');
       setActiveTab('home');
@@ -167,15 +174,23 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewe
       }
     }
     restoredRef.current = true;
-  }, [data, selectUser, clearChat, viewer?.projectId]);
+  }, [data, selectUser, clearChat, viewer?.projectId, viewer?.uid]);
 
   useEffect(() => {
-    if (!data?.widget?.viewerBlocked) return;
+    if (!data?.widget) return;
+    const w = data.widget;
+    const uid = (viewer?.uid ?? w.viewerUid)?.trim();
+    let blocked = w.viewerBlocked === true;
+    if (!blocked && uid) {
+      const rec = [...data.developers, ...data.users].find(x => x.uid === uid);
+      blocked = rec?.viewerBlocked === true;
+    }
+    if (!blocked) return;
     clearChat();
     setScreen('home');
     setActiveTab('home');
     setViewingTicketId(null);
-  }, [data?.widget?.viewerBlocked, clearChat]);
+  }, [data?.widget, data?.developers, data?.users, viewer?.uid, clearChat]);
 
   useEffect(() => {
     if (!data?.widget) return;
@@ -338,14 +353,25 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewe
 
   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 list = [...data.developers, ...data.users];
-    if (!pid) return list;
-    return list.filter(u => u.project === pid);
+    const devs = data.developers ?? [];
+    if (!pid) return [...devs, ...data.users];
+    const usersInProject = data.users.filter(u => u.project === pid);
+    return [...devs, ...usersInProject];
   }, [data, viewer?.projectId]);
 
+  const effectiveViewerBlocked = useMemo(() => {
+    if (!widgetConfig) return false;
+    if (widgetConfig.viewerBlocked === true) return true;
+    const uid = (viewer?.uid ?? widgetConfig.viewerUid)?.trim();
+    if (!uid || !data) return false;
+    const rec = [...data.developers, ...data.users].find(x => x.uid === uid);
+    return rec?.viewerBlocked === true;
+  }, [widgetConfig, viewer?.uid, data]);
+
   const viewerIsDev  = widgetConfig?.viewerType === 'developer';
   const viewerUid    = widgetConfig?.viewerUid;
 
@@ -368,6 +394,11 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewe
   );
   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';
@@ -441,12 +472,14 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewe
         }
       `}</style>
 
-      {/* ── Floating Button ── */}
+      {/* ── Floating Button (unread badge + tooltip when closed) ── */}
       {!isOpen && (
         <button
           className="cw-root"
+          type="button"
           onClick={openDrawer}
-          aria-label={theme.buttonLabel}
+          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,
@@ -469,10 +502,35 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewe
             (e.currentTarget as HTMLElement).style.boxShadow = `0 8px 28px ${theme.buttonColor}55`;
           }}
         >
-          <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
-            <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" />
-          </svg>
+          <span style={{ position: 'relative', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+              <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" />
+            </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',
+                }}
+              >
+                {totalUnread > 99 ? '99+' : totalUnread}
+              </span>
+            )}
+          </span>
           <span>{theme.buttonLabel}</span>
         </button>
       )}
@@ -536,8 +594,8 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewe
           {/* ── Main content ── */}
           {!cfgLoading && !cfgError && widgetConfig && (
             <>
-              {/* Resize + Close controls — shown outside chat/call screens */}
-              {screen !== 'chat' && screen !== 'call' && (
+              {/* Resize + Close controls — hidden on blocked screen (Close is in-panel) */}
+              {screen !== 'chat' && screen !== 'call' && !effectiveViewerBlocked && (
                 <div style={{
                   position: 'absolute', top: 12,
                   right: theme.buttonPosition === 'bottom-left' ? 'auto' : 12,
@@ -567,12 +625,12 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewe
               )}
 
               {/* ── ACTIVE: viewer spam-blocked (no chat/tickets UI) ── */}
-              {widgetConfig.status === 'ACTIVE' && widgetConfig.viewerBlocked && (
-                <ViewerBlockedScreen config={widgetConfig} apiKey={apiKey} />
+              {widgetConfig.status === 'ACTIVE' && effectiveViewerBlocked && (
+                <ViewerBlockedScreen config={widgetConfig} apiKey={apiKey} onClose={closeDrawer} />
               )}
 
               {/* ── ACTIVE: microphone, location, screen share required ── */}
-              {widgetConfig.status === 'ACTIVE' && !widgetConfig.viewerBlocked && !permissionsOk && (
+              {widgetConfig.status === 'ACTIVE' && !effectiveViewerBlocked && !permissionsOk && (
                 <PermissionsGateScreen
                   primaryColor={primaryColor}
                   widgetId={widgetConfig.id}
@@ -581,12 +639,13 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewe
               )}
 
               {/* ── ACTIVE ── */}
-              {widgetConfig.status === 'ACTIVE' && !widgetConfig.viewerBlocked && permissionsOk && (
+              {widgetConfig.status === 'ACTIVE' && !effectiveViewerBlocked && permissionsOk && (
                 <div className="cw-scroll" style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
 
                   {screen === 'home' && (
                     <HomeScreen
                       config={widgetConfig}
+                      apiKey={apiKey}
                       onNavigate={handleCardClick}
                       onOpenTicket={handleOpenTicket}
                       tickets={tickets}
@@ -699,7 +758,7 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewe
 
               {/* ── Bottom Tabs (hidden during chat/call/user-list/block-list) ── */}
               {widgetConfig.status === 'ACTIVE' &&
-               !widgetConfig.viewerBlocked &&
+               !effectiveViewerBlocked &&
                permissionsOk &&
                screen !== 'chat' &&
                screen !== 'call' &&

package/src/components/HomeScreen/index.tsx

@@ -1,7 +1,13 @@
-import React, { useState, useMemo } from 'react';
+import React, { useState, useMemo, useEffect } from 'react';
 import { WidgetConfig, UserListContext, Ticket } from '../../types';
 import { SlideNavMenu } from '../SlideNavMenu';
 import { truncateWords } from '../../utils/chat';
+import type { PresenceStatus } from '../../types';
+import {
+  resolveInitialPresence,
+  savePresenceStatus,
+  syncPresenceToServer,
+} from '../../utils/presenceStatus';
 
 export interface HomeNavigateOptions {
   /** When true, list screens play stagger animation (home burger menu only) */
@@ -10,14 +16,44 @@ export interface HomeNavigateOptions {
 
 interface HomeScreenProps {
   config: WidgetConfig;
+  /** Same as env / chatData — required to POST presence in production */
+  apiKey: string;
   onNavigate: (ctx: UserListContext | 'ticket', options?: HomeNavigateOptions) => void;
   /** Open a specific pending ticket (full detail) */
   onOpenTicket: (ticketId: string) => void;
   tickets: Ticket[];
 }
 
-export const HomeScreen: React.FC<HomeScreenProps> = ({ config, onNavigate, onOpenTicket, tickets }) => {
+const STATUS_OPTIONS: { value: PresenceStatus; label: string }[] = [
+  { value: 'ACTIVE', label: 'Active' },
+  { value: 'AWAY', label: 'Away' },
+  { value: 'DND', label: 'DND' },
+];
+
+export const HomeScreen: React.FC<HomeScreenProps> = ({ config, apiKey, onNavigate, onOpenTicket, tickets }) => {
   const [menuOpen, setMenuOpen] = useState(false);
+  const [presence, setPresence] = useState<PresenceStatus>(() =>
+    resolveInitialPresence(config.id, config.presenceStatus),
+  );
+
+  useEffect(() => {
+    setPresence(resolveInitialPresence(config.id, config.presenceStatus));
+  }, [config.id, config.presenceStatus]);
+
+  const setPresenceAndSave = (s: PresenceStatus) => {
+    setPresence(s);
+    savePresenceStatus(config.id, s);
+    const url = config.presenceUpdateUrl?.trim();
+    if (!url) return;
+    void syncPresenceToServer(url, {
+      widgetId: config.id,
+      apiKey,
+      viewerUid: config.viewerUid?.trim() || undefined,
+      status: s,
+    }).catch(err => {
+      console.error('[ajaxter-chat] presence sync failed', err);
+    });
+  };
   const showSupport = config.chatType === 'SUPPORT' || config.chatType === 'BOTH';
   const showChat = config.chatType === 'CHAT' || config.chatType === 'BOTH';
   const viewerIsDev = config.viewerType === 'developer';
@@ -56,14 +92,14 @@ export const HomeScreen: React.FC<HomeScreenProps> = ({ config, onNavigate, onOp
         }}
       />
 
-      {/* Top bar — burger left */}
+      {/* Top bar — menu + presence status */}
       <div
         style={{
           flexShrink: 0,
-          padding: '14px 16px 10px',
+          padding: '12px 14px 12px',
           display: 'flex',
           alignItems: 'center',
-          gap: 12,
+          gap: 10,
           background: '#fff',
           borderBottom: '1px solid #eef0f5',
         }}
@@ -91,6 +127,62 @@ export const HomeScreen: React.FC<HomeScreenProps> = ({ config, onNavigate, onOp
           <span style={{ width: 18, height: 2, background: '#334155', borderRadius: 1 }} />
           <span style={{ width: 18, height: 2, background: '#334155', borderRadius: 1 }} />
         </button>
+
+        <div style={{ flex: 1, minWidth: 0 }} />
+
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 6,
+            flexShrink: 0,
+            flexWrap: 'wrap',
+            justifyContent: 'flex-end',
+          }}
+        >
+          <span style={{ fontSize: 11, fontWeight: 700, color: '#94a3b8', textTransform: 'uppercase', letterSpacing: '0.06em' }}>
+            Status
+          </span>
+          <div
+            role="group"
+            aria-label="Your status"
+            style={{
+              display: 'flex',
+              borderRadius: 10,
+              padding: 3,
+              background: '#f1f5f9',
+              gap: 2,
+            }}
+          >
+            {STATUS_OPTIONS.map(({ value, label }) => {
+              const isOn = presence === value;
+              return (
+                <button
+                  key={value}
+                  type="button"
+                  onClick={() => setPresenceAndSave(value)}
+                  style={{
+                    border: 'none',
+                    borderRadius: 8,
+                    padding: '7px 10px',
+                    fontSize: 11,
+                    fontWeight: 700,
+                    letterSpacing: '0.04em',
+                    cursor: 'pointer',
+                    fontFamily: 'inherit',
+                    textTransform: 'uppercase',
+                    background: isOn ? config.primaryColor : 'transparent',
+                    color: isOn ? '#fff' : '#64748b',
+                    boxShadow: isOn ? `0 2px 8px ${config.primaryColor}55` : 'none',
+                    transition: 'background 0.15s, color 0.15s',
+                  }}
+                >
+                  {label}
+                </button>
+              );
+            })}
+          </div>
+        </div>
       </div>
 
       <div className="cw-scroll" style={{ flex: 1, overflowY: 'auto', padding: '20px 18px 28px' }}>

package/src/components/ViewerBlockedScreen/index.tsx

@@ -10,9 +10,10 @@ const DEFAULT_MESSAGE =
 interface ViewerBlockedScreenProps {
   config: WidgetConfig;
   apiKey: string;
+  onClose: () => void;
 }
 
-export const ViewerBlockedScreen: React.FC<ViewerBlockedScreenProps> = ({ config, apiKey }) => {
+export const ViewerBlockedScreen: React.FC<ViewerBlockedScreenProps> = ({ config, apiKey, onClose }) => {
   const [text, setText] = useState('');
   const [status, setStatus] = useState<'idle' | 'sending' | 'sent' | 'error'>('idle');
   const [error, setError] = useState<string | null>(null);
@@ -79,9 +80,29 @@ export const ViewerBlockedScreen: React.FC<ViewerBlockedScreenProps> = ({ config
         </p>
 
         {status === 'sent' ? (
-          <p style={{ margin: 0, fontSize: 14, color: '#16a34a', fontWeight: 600 }}>
-            Your request was sent. We will review it shortly.
-          </p>
+          <>
+            <p style={{ margin: '0 0 16px', fontSize: 14, color: '#16a34a', fontWeight: 600 }}>
+              Your request was sent. We will review it shortly.
+            </p>
+            <button
+              type="button"
+              onClick={onClose}
+              style={{
+                width: '100%',
+                padding: '12px 16px',
+                borderRadius: 12,
+                border: '2px solid #ef4444',
+                background: '#fff',
+                color: '#ef4444',
+                fontWeight: 700,
+                fontSize: 15,
+                cursor: 'pointer',
+                fontFamily: 'inherit',
+              }}
+            >
+              Close
+            </button>
+          </>
         ) : (
           <>
             <label
@@ -96,6 +117,8 @@ export const ViewerBlockedScreen: React.FC<ViewerBlockedScreenProps> = ({ config
               onChange={e => { setText(e.target.value); setError(null); setStatus('idle'); }}
               placeholder="Explain briefly why your access should be restored…"
               rows={4}
+              maxLength={500}
+              minLength={50}
               disabled={status === 'sending'}
               style={{
                 width: '100%',
@@ -106,8 +129,9 @@ export const ViewerBlockedScreen: React.FC<ViewerBlockedScreenProps> = ({ config
                 fontSize: 14,
                 fontFamily: 'inherit',
                 color: '#1e293b',
-                resize: 'vertical',
+                resize: 'none',
                 minHeight: 100,
+                maxHeight: 250,
                 marginBottom: 14,
                 outline: 'none',
               }}
@@ -130,6 +154,25 @@ export const ViewerBlockedScreen: React.FC<ViewerBlockedScreenProps> = ({ config
             >
               {status === 'sending' ? 'Sending…' : 'Submit request'}
             </button>
+            <button
+              type="button"
+              onClick={onClose}
+              style={{
+                width: '100%',
+                marginTop: 12,
+                padding: '12px 16px',
+                borderRadius: 12,
+                border: '2px solid #ef4444',
+                background: '#fff',
+                color: '#ef4444',
+                fontWeight: 700,
+                fontSize: 15,
+                cursor: 'pointer',
+                fontFamily: 'inherit',
+              }}
+            >
+              Close
+            </button>
             {error && (
               <p style={{ margin: '12px 0 0', fontSize: 13, color: '#dc2626', lineHeight: 1.45 }}>
                 {error}

package/src/index.ts

@@ -20,6 +20,8 @@ export { submitReenableRequest } from './utils/reenableRequest';
 export type { ReenableRequestPayload } from './utils/reenableRequest';
 export { loadLocalConfig, fetchRemoteChatData } from './config';
 export { mergeTheme, darken }                   from './utils/theme';
+export { loadPresenceStatus, savePresenceStatus, resolveInitialPresence, syncPresenceToServer } from './utils/presenceStatus';
+export type { PresenceSyncPayload } from './utils/presenceStatus';
 export { avatarColor, initials, formatTime, formatDate, generateTranscript, downloadText, truncateWords } from './utils/chat';
 
 export type {
@@ -30,4 +32,5 @@ export type {
   ChatStatus, ChatType, UserType, OnlineStatus,
   Screen, BottomTab, UserListContext, MessageType,
   LocalEnvConfig,
+  PresenceStatus,
 } from './types';

package/src/types/index.ts

@@ -59,6 +59,16 @@ export interface WidgetConfig {
    * @example https://api.example.com/widgets/reenable-request
    */
   reenableRequestUrl?: string;
+  /**
+   * Current presence from your API/DB (include in chatData or a session payload).
+   * When set, it initializes the status control and overrides session-only cache.
+   */
+  presenceStatus?: PresenceStatus;
+  /**
+   * Production: `POST` JSON `{ widgetId, apiKey, viewerUid?, status }` to save presence in your database.
+   * The client still mirrors to sessionStorage as a local fallback.
+   */
+  presenceUpdateUrl?: string;
 }
 
 export interface RemoteChatData {
@@ -89,6 +99,9 @@ export type Screen       =
 export type UserListContext = 'support' | 'conversation';
 export type MessageType = 'text' | 'voice' | 'attachment' | 'emoji';
 
+/** Home status selector; persist via `presenceUpdateUrl` in production */
+export type PresenceStatus = 'ACTIVE' | 'AWAY' | 'DND';
+
 // ─── User ───────────────────────────────────────────────────────────────────
 export interface ChatUser {
   uid: string;
@@ -100,6 +113,11 @@ export interface ChatUser {
   avatar: string | null;
   status: OnlineStatus;
   designation: string;
+  /**
+   * When `true` for the row matching the current viewer (`viewerUid` / `viewer.uid`),
+   * the widget shows the spam/blocked screen (same as `widget.viewerBlocked`).
+   */
+  viewerBlocked?: boolean;
 }
 
 // ─── Message ────────────────────────────────────────────────────────────────

package/src/utils/presenceStatus.ts

@@ -0,0 +1,56 @@
+import type { PresenceStatus } from '../types';
+
+const key = (widgetId: string) => `ajaxter_presence_${widgetId}`;
+
+export function loadPresenceStatus(widgetId: string): PresenceStatus {
+  if (typeof sessionStorage === 'undefined') return 'ACTIVE';
+  try {
+    const v = sessionStorage.getItem(key(widgetId));
+    if (v === 'ACTIVE' || v === 'AWAY' || v === 'DND') return v;
+  } catch {
+    /* */
+  }
+  return 'ACTIVE';
+}
+
+export function savePresenceStatus(widgetId: string, status: PresenceStatus): void {
+  try {
+    sessionStorage.setItem(key(widgetId), status);
+  } catch {
+    /* quota */
+  }
+}
+
+/** Prefer server value from DB when the host includes it in config */
+export function resolveInitialPresence(
+  widgetId: string,
+  serverStatus: PresenceStatus | undefined,
+): PresenceStatus {
+  if (serverStatus === 'ACTIVE' || serverStatus === 'AWAY' || serverStatus === 'DND') return serverStatus;
+  return loadPresenceStatus(widgetId);
+}
+
+export interface PresenceSyncPayload {
+  widgetId: string;
+  apiKey: string;
+  viewerUid?: string;
+  status: PresenceStatus;
+}
+
+/** Call your backend to persist presence (production DB). */
+export async function syncPresenceToServer(url: string, payload: PresenceSyncPayload): Promise<void> {
+  const res = await fetch(url, {
+    method: 'POST',
+    headers: {
+      Accept: 'application/json',
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(payload),
+    mode: 'cors',
+    credentials: 'omit',
+  });
+  if (!res.ok) {
+    const t = await res.text().catch(() => '');
+    throw new Error(t || `Presence sync failed (${res.status})`);
+  }
+}