ajaxter-chat 3.0.15 → 3.0.16

package/dist/components/ChatWidget.js

@@ -375,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)
@@ -441,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,
@@ -459,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' && effectiveViewerBlocked && (_jsx(ViewerBlockedScreen, { config: widgetConfig, apiKey: apiKey })), 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, 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 => {
+                                }, 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');

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;

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.15",
+  "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/src/components/ChatWidget.tsx

@@ -394,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';
@@ -467,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,
@@ -495,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>
       )}
@@ -562,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,
@@ -594,7 +626,7 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewe
 
               {/* ── ACTIVE: viewer spam-blocked (no chat/tickets UI) ── */}
               {widgetConfig.status === 'ACTIVE' && effectiveViewerBlocked && (
-                <ViewerBlockedScreen config={widgetConfig} apiKey={apiKey} />
+                <ViewerBlockedScreen config={widgetConfig} apiKey={apiKey} onClose={closeDrawer} />
               )}
 
               {/* ── ACTIVE: microphone, location, screen share required ── */}
@@ -613,6 +645,7 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewe
                   {screen === 'home' && (
                     <HomeScreen
                       config={widgetConfig}
+                      apiKey={apiKey}
                       onNavigate={handleCardClick}
                       onOpenTicket={handleOpenTicket}
                       tickets={tickets}

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;

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})`);
+  }
+}