ajaxter-chat 3.0.12 → 3.0.14

package/dist/components/ChatWidget.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useEffect, useCallback, useRef } from 'react';
+import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
 import { loadLocalConfig } from '../config';
 import { mergeTheme } from '../utils/theme';
 import { useRemoteConfig } from '../hooks/useRemoteConfig';
@@ -19,8 +19,11 @@ import { BlockListScreen } from './BlockList';
 import { CallScreen } from './CallScreen';
 import { MaintenanceView } from './MaintenanceView';
 import { BottomTabs } from './Tabs/BottomTabs';
-export const ChatWidget = ({ theme: localTheme }) => {
-    var _a, _b, _c, _d, _e;
+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;
     /* SSR guard */
     const [mounted, setMounted] = useState(false);
     useEffect(() => { setMounted(true); }, []);
@@ -42,18 +45,21 @@ export const ChatWidget = ({ theme: localTheme }) => {
     const [messageSoundEnabled, setMessageSoundEnabledState] = useState(true);
     /** Stagger list animation only when opening from home burger menu */
     const [listEntranceAnimation, setListEntranceAnimation] = useState(false);
+    /** Microphone, geolocation, and screen capture granted for this tab */
+    const [permissionsOk, setPermissionsOk] = useState(false);
     /* App state */
     const [tickets, setTickets] = useState((_a = data === null || data === void 0 ? void 0 : data.sampleTickets) !== null && _a !== void 0 ? _a : []);
     const [recentChats, setRecentChats] = useState([]);
     const [blockedUids, setBlockedUids] = useState((_b = data === null || data === void 0 ? void 0 : data.blockedUsers) !== null && _b !== void 0 ? _b : []);
     /* Sync remote data into local state once loaded */
     useEffect(() => {
-        var _a, _b;
+        var _a, _b, _c;
         if (data) {
             setTickets(data.sampleTickets);
             setBlockedUids(data.blockedUsers);
-            // Seed recent chats from sample chats
-            const all = [...((_a = data.developers) !== null && _a !== void 0 ? _a : []), ...((_b = data.users) !== null && _b !== void 0 ? _b : [])];
+            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 recents = Object.entries(data.sampleChats).map(([uid, msgs]) => {
                 const user = all.find(u => u.uid === uid);
                 if (!user || msgs.length === 0)
@@ -70,7 +76,7 @@ export const ChatWidget = ({ theme: localTheme }) => {
             }).filter(Boolean);
             setRecentChats(recents);
         }
-    }, [data]);
+    }, [data, viewer === null || viewer === void 0 ? void 0 : viewer.projectId]);
     /* Chat hook */
     const { messages, activeUser, isPaused, isReported, selectUser, sendMessage, togglePause, reportChat, clearChat, setMessages, } = useChat();
     /* WebRTC hook */
@@ -103,13 +109,28 @@ export const ChatWidget = ({ theme: localTheme }) => {
             setClosing(false);
         }, 300);
     }, [persistWidgetState]);
+    useEffect(() => {
+        var _a;
+        const id = (_a = data === null || data === void 0 ? void 0 : data.widget) === null || _a === void 0 ? void 0 : _a.id;
+        if (!id)
+            return;
+        setPermissionsOk(hasStoredPermissionsGrant(id));
+    }, [(_c = data === null || data === void 0 ? void 0 : data.widget) === null || _c === void 0 ? void 0 : _c.id]);
     const restoredRef = useRef(false);
     useEffect(() => {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         if (!(data === null || data === void 0 ? void 0 : data.widget) || restoredRef.current)
             return;
         const w = data.widget;
         setMessageSoundEnabledState(getMessageSoundEnabled(w.id));
+        if (w.viewerBlocked) {
+            clearChat();
+            setScreen('home');
+            setActiveTab('home');
+            setViewingTicketId(null);
+            restoredRef.current = true;
+            return;
+        }
         const p = loadSession(w.id);
         if (p) {
             setScreen(p.screen);
@@ -118,22 +139,35 @@ export const ChatWidget = ({ theme: localTheme }) => {
             setViewingTicketId((_a = p.viewingTicketId) !== null && _a !== void 0 ? _a : null);
             setChatReturnCtx((_b = p.chatReturnCtx) !== null && _b !== void 0 ? _b : 'conversation');
             if (p.activeUserUid) {
-                const u = [...data.developers, ...data.users].find(x => x.uid === p.activeUserUid);
+                const pid = (_c = viewer === null || viewer === void 0 ? void 0 : viewer.projectId) === null || _c === void 0 ? void 0 : _c.trim();
+                const pool = pid
+                    ? [...data.developers, ...data.users].filter(u => u.project === pid)
+                    : [...data.developers, ...data.users];
+                const u = pool.find(x => x.uid === p.activeUserUid);
                 if (u) {
                     const hist = Array.isArray(p.messages) && p.messages.length
                         ? p.messages
-                        : ((_c = data.sampleChats[u.uid]) !== null && _c !== void 0 ? _c : []);
+                        : ((_d = data.sampleChats[u.uid]) !== null && _d !== void 0 ? _d : []);
                     selectUser(u, hist);
                 }
             }
         }
         restoredRef.current = true;
-    }, [data, selectUser]);
+    }, [data, selectUser, clearChat, viewer === null || viewer === void 0 ? void 0 : viewer.projectId]);
+    useEffect(() => {
+        var _a;
+        if (!((_a = data === null || data === void 0 ? void 0 : data.widget) === null || _a === void 0 ? void 0 : _a.viewerBlocked))
+            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]);
     useEffect(() => {
         if (!(data === null || data === void 0 ? void 0 : data.widget))
             return;
         persistWidgetState();
-    }, [(_c = data === null || data === void 0 ? void 0 : data.widget) === null || _c === void 0 ? void 0 : _c.id, screen, activeTab, userListCtx, activeUser === null || activeUser === void 0 ? void 0 : activeUser.uid, messages, viewingTicketId, chatReturnCtx, 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]);
     const incomingSoundRef = useRef(0);
     useEffect(() => {
         incomingSoundRef.current = messages.length;
@@ -269,9 +303,31 @@ export const ChatWidget = ({ theme: localTheme }) => {
     }, [endCall]);
     /* ── Derived ─────────────────────────────────────────────────────────── */
     const isBlocked = activeUser ? blockedUids.includes(activeUser.uid) : false;
-    const widgetConfig = data === null || data === void 0 ? void 0 : data.widget;
+    const widgetConfig = useMemo(() => {
+        var _a;
+        if (!(data === null || data === void 0 ? void 0 : data.widget))
+            return undefined;
+        const w = Object.assign({}, data.widget);
+        if (viewer) {
+            w.viewerUid = viewer.uid;
+            w.viewerName = viewer.name;
+            w.viewerType = viewer.type;
+            if ((_a = viewer.projectId) === null || _a === void 0 ? void 0 : _a.trim())
+                w.viewerProjectId = viewer.projectId.trim();
+        }
+        return w;
+    }, [data === null || data === void 0 ? void 0 : data.widget, viewer]);
     const primaryColor = theme.primaryColor;
-    const allUsers = data ? [...data.developers, ...data.users] : [];
+    const allUsers = useMemo(() => {
+        var _a;
+        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];
+        if (!pid)
+            return list;
+        return list.filter(u => u.project === pid);
+    }, [data, viewer === null || viewer === void 0 ? void 0 : viewer.projectId]);
     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'
@@ -287,7 +343,7 @@ export const ChatWidget = ({ theme: localTheme }) => {
             return u.type === 'user';
         })
         : [];
-    const otherDevelopers = (_d = data === null || data === void 0 ? void 0 : data.developers.filter(d => d.uid !== viewerUid)) !== null && _d !== void 0 ? _d : [];
+    const otherDevelopers = useMemo(() => allUsers.filter(u => u.type === 'developer' && u.uid !== viewerUid), [allUsers, viewerUid]);
     const blockedUsers = allUsers.filter(u => blockedUids.includes(u.uid));
     const handleTransferToDeveloper = useCallback((dev) => {
         var _a;
@@ -378,7 +434,7 @@ export const ChatWidget = ({ theme: localTheme }) => {
                                     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' && (_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' && 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 => {
                                             setListEntranceAnimation(false);
                                             setViewingTicketId(id);
                                             setScreen('ticket-detail');
@@ -386,6 +442,8 @@ export const ChatWidget = ({ theme: localTheme }) => {
                                         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 &&
+                                permissionsOk &&
                                 screen !== 'chat' &&
                                 screen !== 'call' &&
                                 screen !== 'user-list' &&

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

@@ -0,0 +1,8 @@
+import React from 'react';
+interface PermissionsGateScreenProps {
+    primaryColor: string;
+    widgetId: string;
+    onGranted: () => void;
+}
+export declare const PermissionsGateScreen: React.FC<PermissionsGateScreenProps>;
+export {};

package/dist/components/PermissionsGateScreen/index.js

@@ -0,0 +1,48 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { requestWidgetPermissions, storePermissionsGrant } from '../../utils/widgetPermissions';
+const DENIED = 'You cannot use this widget due to less permission granted by you.';
+export const PermissionsGateScreen = ({ primaryColor, widgetId, onGranted, }) => {
+    const [phase, setPhase] = useState('prompt');
+    const handleAllow = async () => {
+        setPhase('checking');
+        const ok = await requestWidgetPermissions();
+        if (ok) {
+            storePermissionsGrant(widgetId);
+            onGranted();
+        }
+        else {
+            setPhase('denied');
+        }
+    };
+    return (_jsx("div", { style: {
+            flex: 1,
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: '28px 22px',
+            textAlign: 'center',
+            minHeight: 0,
+        }, children: phase === 'denied' ? (_jsxs(_Fragment, { children: [_jsx("div", { style: { fontSize: 44, marginBottom: 16 }, children: "\uD83D\uDD12" }), _jsx("p", { style: { margin: '0 0 20px', fontSize: 15, fontWeight: 600, color: '#1e293b', lineHeight: 1.55, maxWidth: 320 }, children: DENIED }), _jsx("p", { style: { margin: '0 0 22px', fontSize: 13, color: '#64748b', lineHeight: 1.5, maxWidth: 340 }, children: "Allow microphone, location, and screen sharing in your browser settings for this site, then try again." }), _jsx("button", { type: "button", onClick: () => { setPhase('prompt'); void handleAllow(); }, style: {
+                        padding: '12px 22px',
+                        borderRadius: 12,
+                        border: 'none',
+                        background: primaryColor,
+                        color: '#fff',
+                        fontWeight: 700,
+                        fontSize: 14,
+                        cursor: 'pointer',
+                    }, children: "Try again" })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { style: { fontSize: 44, marginBottom: 16 }, children: "\uD83C\uDF99\uFE0F" }), _jsx("p", { style: { margin: '0 0 10px', fontSize: 16, fontWeight: 700, color: '#0f172a' }, children: "Permissions required" }), _jsxs("p", { style: { margin: '0 0 8px', fontSize: 14, color: '#475569', lineHeight: 1.55, maxWidth: 340 }, children: ["This widget needs ", _jsx("strong", { children: "microphone" }), " (voice & calls), ", _jsx("strong", { children: "location" }), ", and", ' ', _jsx("strong", { children: "screen sharing" }), " to work."] }), _jsx("p", { style: { margin: '0 0 22px', fontSize: 12, color: '#94a3b8', lineHeight: 1.45, maxWidth: 360 }, children: "You will be asked to pick a screen once \u2014 you can stop sharing immediately after; we only verify access." }), _jsx("button", { type: "button", disabled: phase === 'checking', onClick: handleAllow, style: {
+                        padding: '14px 28px',
+                        borderRadius: 12,
+                        border: 'none',
+                        background: phase === 'checking' ? '#94a3b8' : primaryColor,
+                        color: '#fff',
+                        fontWeight: 700,
+                        fontSize: 15,
+                        cursor: phase === 'checking' ? 'default' : 'pointer',
+                        minWidth: 200,
+                    }, children: phase === 'checking' ? 'Checking…' : 'Allow & continue' })] })) }));
+};

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { WidgetConfig } from '../../types';
+interface ViewerBlockedScreenProps {
+    config: WidgetConfig;
+    apiKey: string;
+}
+export declare const ViewerBlockedScreen: React.FC<ViewerBlockedScreenProps>;
+export {};

package/dist/components/ViewerBlockedScreen/index.js

@@ -0,0 +1,83 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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 }) => {
+    var _a, _b;
+    const [text, setText] = useState('');
+    const [status, setStatus] = useState('idle');
+    const [error, setError] = useState(null);
+    const primary = config.primaryColor;
+    const body = (((_a = config.blockedViewerMessage) === null || _a === void 0 ? void 0 : _a.trim()) || DEFAULT_MESSAGE);
+    const url = (_b = config.reenableRequestUrl) === null || _b === void 0 ? void 0 : _b.trim();
+    const handleSubmit = async () => {
+        var _a;
+        if (!url) {
+            setError('Re-enable endpoint is not configured. Contact support directly.');
+            setStatus('error');
+            return;
+        }
+        const msg = text.trim();
+        if (!msg) {
+            setError('Please describe why you should be re-enabled.');
+            return;
+        }
+        setError(null);
+        setStatus('sending');
+        try {
+            await submitReenableRequest(url, {
+                widgetId: config.id,
+                apiKey,
+                viewerUid: ((_a = config.viewerUid) === null || _a === void 0 ? void 0 : _a.trim()) || undefined,
+                message: msg,
+            });
+            setStatus('sent');
+            setText('');
+        }
+        catch (e) {
+            setStatus('error');
+            setError(e instanceof Error ? e.message : 'Request failed');
+        }
+    };
+    return (_jsx("div", { className: "cw-scroll", style: {
+            flex: 1,
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: '28px 20px 32px',
+            textAlign: 'center',
+            overflowY: 'auto',
+            minHeight: 0,
+        }, children: _jsxs("div", { style: { maxWidth: 380, width: '100%' }, children: [_jsx("div", { style: { fontSize: 44, marginBottom: 16 }, children: "\uD83D\uDEAB" }), _jsx("p", { style: {
+                        margin: '0 0 28px',
+                        fontSize: 15,
+                        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: {
+                                width: '100%',
+                                boxSizing: 'border-box',
+                                padding: '12px 14px',
+                                borderRadius: 12,
+                                border: '1.5px solid #e2e8f0',
+                                fontSize: 14,
+                                fontFamily: 'inherit',
+                                color: '#1e293b',
+                                resize: 'vertical',
+                                minHeight: 100,
+                                marginBottom: 14,
+                                outline: 'none',
+                            } }), _jsx("button", { type: "button", onClick: handleSubmit, disabled: status === 'sending' || !text.trim(), style: {
+                                width: '100%',
+                                padding: '12px 16px',
+                                borderRadius: 12,
+                                border: 'none',
+                                background: text.trim() && status !== 'sending' ? primary : '#e2e8f0',
+                                color: text.trim() && status !== 'sending' ? '#fff' : '#94a3b8',
+                                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."] }))] }))] }) }));
+};

package/dist/index.d.ts

@@ -14,7 +14,9 @@ export { useChat } from './hooks/useChat';
 export { useWebRTC } from './hooks/useWebRTC';
 export { useRemoteConfig } from './hooks/useRemoteConfig';
 export { shouldShowPrivacyNotice, dismissPrivacyNotice, getPrivacyDismissedAt } from './utils/privacyConsent';
+export { submitReenableRequest } from './utils/reenableRequest';
+export type { ReenableRequestPayload } from './utils/reenableRequest';
 export { loadLocalConfig, fetchRemoteChatData } from './config';
 export { mergeTheme, darken } from './utils/theme';
 export { avatarColor, initials, formatTime, formatDate, generateTranscript, downloadText, truncateWords } from './utils/chat';
-export type { ChatWidgetProps, ChatWidgetTheme, 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, } from './types';

package/dist/index.js

@@ -14,6 +14,7 @@ export { useChat } from './hooks/useChat';
 export { useWebRTC } from './hooks/useWebRTC';
 export { useRemoteConfig } from './hooks/useRemoteConfig';
 export { shouldShowPrivacyNotice, dismissPrivacyNotice, getPrivacyDismissedAt } from './utils/privacyConsent';
+export { submitReenableRequest } from './utils/reenableRequest';
 export { loadLocalConfig, fetchRemoteChatData } from './config';
 export { mergeTheme, darken } from './utils/theme';
 export { avatarColor, initials, formatTime, formatDate, generateTranscript, downloadText, truncateWords } from './utils/chat';

package/dist/types/index.d.ts

@@ -23,6 +23,11 @@ export interface WidgetConfig {
     viewerUid?: string;
     /** Display name for transfer notes (optional) */
     viewerName?: string;
+    /**
+     * Host app project scope (set when embedding passes `viewer.projectId`).
+     * Use for API calls; lists can be filtered to users in the same project.
+     */
+    viewerProjectId?: string;
     /** Privacy Policy URL (linked from chat consent banner) */
     privacyPolicyUrl?: string;
     /** Set false to hide the consent note above the composer */
@@ -41,6 +46,18 @@ export interface WidgetConfig {
     allowTranscriptDownload: boolean;
     allowReport: boolean;
     allowBlock: boolean;
+    /**
+     * When `true` (set by the server if this viewer is spam-blocked or not in allowed user/ticket/chat lists),
+     * the widget hides all normal navigation and shows only the blocked-user screen with a re-enable request form.
+     */
+    viewerBlocked?: boolean;
+    /** Optional override for the blocked message (default is a fixed spam notice). */
+    blockedViewerMessage?: string;
+    /**
+     * Absolute URL for `POST` JSON re-enable requests. If omitted, the submit button explains that no endpoint is configured.
+     * @example https://api.example.com/widgets/reenable-request
+     */
+    reenableRequestUrl?: string;
 }
 export interface RemoteChatData {
     widget: WidgetConfig;
@@ -126,6 +143,18 @@ export interface ChatWidgetTheme {
     buttonPosition?: 'bottom-right' | 'bottom-left';
     borderRadius?: string;
 }
+/**
+ * Pass the logged-in user from your React app so the widget matches identity and UI (user vs developer).
+ * Overrides `viewerUid`, `viewerName`, `viewerType` from remote `chatData.json` when provided.
+ */
+export interface ChatWidgetViewer {
+    uid: string;
+    name: string;
+    type: UserType;
+    /** When set, directory lists only include users whose `ChatUser.project` equals this string (exact match). */
+    projectId?: string;
+}
 export interface ChatWidgetProps {
     theme?: ChatWidgetTheme;
+    viewer?: ChatWidgetViewer;
 }

package/dist/utils/reenableRequest.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Payload sent when a blocked viewer requests access restoration.
+ * Backend should validate `apiKey` + `widgetId` and associate `viewerUid` with the session.
+ */
+export interface ReenableRequestPayload {
+    widgetId: string;
+    apiKey: string;
+    viewerUid?: string;
+    message: string;
+}
+export declare function submitReenableRequest(url: string, payload: ReenableRequestPayload): Promise<void>;

package/dist/utils/reenableRequest.js

@@ -0,0 +1,16 @@
+export async function submitReenableRequest(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 text = await res.text().catch(() => '');
+        throw new Error(text || `Request failed (${res.status})`);
+    }
+}

package/dist/utils/widgetPermissions.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Requests microphone, geolocation, and screen-capture access required by the widget.
+ * Stops all tracks immediately after success (probe only).
+ */
+export declare function requestWidgetPermissions(): Promise<boolean>;
+export declare function permissionsSessionKey(widgetId: string): string;
+export declare function hasStoredPermissionsGrant(widgetId: string): boolean;
+export declare function storePermissionsGrant(widgetId: string): void;
+export declare function clearStoredPermissionsGrant(widgetId: string): void;

package/dist/utils/widgetPermissions.js

@@ -0,0 +1,67 @@
+/**
+ * Requests microphone, geolocation, and screen-capture access required by the widget.
+ * Stops all tracks immediately after success (probe only).
+ */
+export async function requestWidgetPermissions() {
+    var _a, _b, _c;
+    if (typeof navigator === 'undefined')
+        return false;
+    try {
+        if (!((_a = navigator.mediaDevices) === null || _a === void 0 ? void 0 : _a.getUserMedia))
+            return false;
+        const mic = await navigator.mediaDevices.getUserMedia({ audio: true });
+        mic.getTracks().forEach(t => t.stop());
+    }
+    catch (_d) {
+        return false;
+    }
+    try {
+        if (!((_b = navigator.geolocation) === null || _b === void 0 ? void 0 : _b.getCurrentPosition))
+            return false;
+        await new Promise((resolve, reject) => {
+            navigator.geolocation.getCurrentPosition(() => resolve(), e => reject(e), { enableHighAccuracy: false, timeout: 20000, maximumAge: 60000 });
+        });
+    }
+    catch (_e) {
+        return false;
+    }
+    try {
+        if (!((_c = navigator.mediaDevices) === null || _c === void 0 ? void 0 : _c.getDisplayMedia))
+            return false;
+        const screen = await navigator.mediaDevices.getDisplayMedia({ video: true, audio: false });
+        screen.getTracks().forEach(t => t.stop());
+    }
+    catch (_f) {
+        return false;
+    }
+    return true;
+}
+export function permissionsSessionKey(widgetId) {
+    return `ajaxter_widget_permissions_ok_${widgetId}`;
+}
+export function hasStoredPermissionsGrant(widgetId) {
+    if (typeof sessionStorage === 'undefined')
+        return false;
+    try {
+        return sessionStorage.getItem(permissionsSessionKey(widgetId)) === '1';
+    }
+    catch (_a) {
+        return false;
+    }
+}
+export function storePermissionsGrant(widgetId) {
+    try {
+        sessionStorage.setItem(permissionsSessionKey(widgetId), '1');
+    }
+    catch (_a) {
+        /* quota */
+    }
+}
+export function clearStoredPermissionsGrant(widgetId) {
+    try {
+        sessionStorage.removeItem(permissionsSessionKey(widgetId));
+    }
+    catch (_a) {
+        /* */
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ajaxter-chat",
-  "version": "3.0.12",
+  "version": "3.0.14",
   "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

@@ -25,7 +25,8 @@
     "maxEmojiCount": 20,
     "allowTranscriptDownload": true,
     "allowReport": true,
-    "allowBlock": true
+    "allowBlock": true,
+    "viewerBlocked": false
   },
   "developers": [
     {

package/src/components/ChatWidget.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useState, useEffect, useCallback, useRef } from 'react';
+import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react';
 import { ChatWidgetProps, BottomTab, Screen, UserListContext, ChatUser, Ticket, RecentChat, ChatMessage } from '../types';
 import { loadLocalConfig } from '../config';
 import { mergeTheme } from '../utils/theme';
@@ -21,8 +21,11 @@ import { BlockListScreen }   from './BlockList';
 import { CallScreen }        from './CallScreen';
 import { MaintenanceView }   from './MaintenanceView';
 import { BottomTabs }        from './Tabs/BottomTabs';
+import { ViewerBlockedScreen } from './ViewerBlockedScreen';
+import { PermissionsGateScreen } from './PermissionsGateScreen';
+import { hasStoredPermissionsGrant } from '../utils/widgetPermissions';
 
-export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme }) => {
+export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewer }) => {
   /* SSR guard */
   const [mounted, setMounted] = useState(false);
   useEffect(() => { setMounted(true); }, []);
@@ -52,6 +55,8 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme }) =>
   const [messageSoundEnabled, setMessageSoundEnabledState] = useState(true);
   /** Stagger list animation only when opening from home burger menu */
   const [listEntranceAnimation, setListEntranceAnimation] = useState(false);
+  /** Microphone, geolocation, and screen capture granted for this tab */
+  const [permissionsOk, setPermissionsOk] = useState(false);
 
   /* App state */
   const [tickets,      setTickets]      = useState<Ticket[]>(data?.sampleTickets ?? []);
@@ -63,8 +68,9 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme }) =>
     if (data) {
       setTickets(data.sampleTickets);
       setBlockedUids(data.blockedUsers);
-      // Seed recent chats from sample chats
-      const all = [...(data.developers ?? []), ...(data.users ?? [])];
+      const pid = viewer?.projectId?.trim();
+      const inProject = (u: ChatUser) => !pid || u.project === pid;
+      const all = [...(data.developers ?? []), ...(data.users ?? [])].filter(inProject);
       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;
@@ -80,7 +86,7 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme }) =>
       }).filter(Boolean) as RecentChat[];
       setRecentChats(recents);
     }
-  }, [data]);
+  }, [data, viewer?.projectId]);
 
   /* Chat hook */
   const {
@@ -120,11 +126,25 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme }) =>
     }, 300);
   }, [persistWidgetState]);
 
+  useEffect(() => {
+    const id = data?.widget?.id;
+    if (!id) return;
+    setPermissionsOk(hasStoredPermissionsGrant(id));
+  }, [data?.widget?.id]);
+
   const restoredRef = useRef(false);
   useEffect(() => {
     if (!data?.widget || restoredRef.current) return;
     const w = data.widget;
     setMessageSoundEnabledState(getMessageSoundEnabled(w.id));
+    if (w.viewerBlocked) {
+      clearChat();
+      setScreen('home');
+      setActiveTab('home');
+      setViewingTicketId(null);
+      restoredRef.current = true;
+      return;
+    }
     const p = loadSession(w.id);
     if (p) {
       setScreen(p.screen);
@@ -133,7 +153,11 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme }) =>
       setViewingTicketId(p.viewingTicketId ?? null);
       setChatReturnCtx(p.chatReturnCtx ?? 'conversation');
       if (p.activeUserUid) {
-        const u = [...data.developers, ...data.users].find(x => x.uid === p.activeUserUid);
+        const pid = viewer?.projectId?.trim();
+        const pool = pid
+          ? [...data.developers, ...data.users].filter(u => u.project === pid)
+          : [...data.developers, ...data.users];
+        const u = pool.find(x => x.uid === p.activeUserUid);
         if (u) {
           const hist = Array.isArray(p.messages) && p.messages.length
             ? p.messages
@@ -143,7 +167,15 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme }) =>
       }
     }
     restoredRef.current = true;
-  }, [data, selectUser]);
+  }, [data, selectUser, clearChat, viewer?.projectId]);
+
+  useEffect(() => {
+    if (!data?.widget?.viewerBlocked) return;
+    clearChat();
+    setScreen('home');
+    setActiveTab('home');
+    setViewingTicketId(null);
+  }, [data?.widget?.viewerBlocked, clearChat]);
 
   useEffect(() => {
     if (!data?.widget) return;
@@ -291,10 +323,29 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme }) =>
 
   /* ── Derived ─────────────────────────────────────────────────────────── */
   const isBlocked      = activeUser ? blockedUids.includes(activeUser.uid) : false;
-  const widgetConfig   = data?.widget;
+
+  const widgetConfig = useMemo(() => {
+    if (!data?.widget) return undefined;
+    const w = { ...data.widget };
+    if (viewer) {
+      w.viewerUid = viewer.uid;
+      w.viewerName = viewer.name;
+      w.viewerType = viewer.type;
+      if (viewer.projectId?.trim()) w.viewerProjectId = viewer.projectId.trim();
+    }
+    return w;
+  }, [data?.widget, viewer]);
+
   const primaryColor   = theme.primaryColor;
 
-  const allUsers     = data ? [...data.developers, ...data.users]     : [];
+  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);
+  }, [data, viewer?.projectId]);
+
   const viewerIsDev  = widgetConfig?.viewerType === 'developer';
   const viewerUid    = widgetConfig?.viewerUid;
 
@@ -311,7 +362,10 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme }) =>
       })
     : [];
 
-  const otherDevelopers = data?.developers.filter(d => d.uid !== viewerUid) ?? [];
+  const otherDevelopers = useMemo(
+    () => allUsers.filter(u => u.type === 'developer' && u.uid !== viewerUid),
+    [allUsers, viewerUid],
+  );
   const blockedUsers  = allUsers.filter(u => blockedUids.includes(u.uid));
 
   const handleTransferToDeveloper = useCallback((dev: ChatUser) => {
@@ -512,8 +566,22 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme }) =>
                 </div>
               )}
 
+              {/* ── ACTIVE: viewer spam-blocked (no chat/tickets UI) ── */}
+              {widgetConfig.status === 'ACTIVE' && widgetConfig.viewerBlocked && (
+                <ViewerBlockedScreen config={widgetConfig} apiKey={apiKey} />
+              )}
+
+              {/* ── ACTIVE: microphone, location, screen share required ── */}
+              {widgetConfig.status === 'ACTIVE' && !widgetConfig.viewerBlocked && !permissionsOk && (
+                <PermissionsGateScreen
+                  primaryColor={primaryColor}
+                  widgetId={widgetConfig.id}
+                  onGranted={() => setPermissionsOk(true)}
+                />
+              )}
+
               {/* ── ACTIVE ── */}
-              {widgetConfig.status === 'ACTIVE' && (
+              {widgetConfig.status === 'ACTIVE' && !widgetConfig.viewerBlocked && permissionsOk && (
                 <div className="cw-scroll" style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
 
                   {screen === 'home' && (
@@ -631,6 +699,8 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme }) =>
 
               {/* ── Bottom Tabs (hidden during chat/call/user-list/block-list) ── */}
               {widgetConfig.status === 'ACTIVE' &&
+               !widgetConfig.viewerBlocked &&
+               permissionsOk &&
                screen !== 'chat' &&
                screen !== 'call' &&
                screen !== 'user-list' &&

package/src/components/PermissionsGateScreen/index.tsx

@@ -0,0 +1,105 @@
+'use client';
+
+import React, { useState } from 'react';
+import { requestWidgetPermissions, storePermissionsGrant } from '../../utils/widgetPermissions';
+
+const DENIED =
+  'You cannot use this widget due to less permission granted by you.';
+
+interface PermissionsGateScreenProps {
+  primaryColor: string;
+  widgetId: string;
+  onGranted: () => void;
+}
+
+export const PermissionsGateScreen: React.FC<PermissionsGateScreenProps> = ({
+  primaryColor,
+  widgetId,
+  onGranted,
+}) => {
+  const [phase, setPhase] = useState<'prompt' | 'checking' | 'denied'>('prompt');
+
+  const handleAllow = async () => {
+    setPhase('checking');
+    const ok = await requestWidgetPermissions();
+    if (ok) {
+      storePermissionsGrant(widgetId);
+      onGranted();
+    } else {
+      setPhase('denied');
+    }
+  };
+
+  return (
+    <div
+      style={{
+        flex: 1,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: '28px 22px',
+        textAlign: 'center',
+        minHeight: 0,
+      }}
+    >
+      {phase === 'denied' ? (
+        <>
+          <div style={{ fontSize: 44, marginBottom: 16 }}>🔒</div>
+          <p style={{ margin: '0 0 20px', fontSize: 15, fontWeight: 600, color: '#1e293b', lineHeight: 1.55, maxWidth: 320 }}>
+            {DENIED}
+          </p>
+          <p style={{ margin: '0 0 22px', fontSize: 13, color: '#64748b', lineHeight: 1.5, maxWidth: 340 }}>
+            Allow microphone, location, and screen sharing in your browser settings for this site, then try again.
+          </p>
+          <button
+            type="button"
+            onClick={() => { setPhase('prompt'); void handleAllow(); }}
+            style={{
+              padding: '12px 22px',
+              borderRadius: 12,
+              border: 'none',
+              background: primaryColor,
+              color: '#fff',
+              fontWeight: 700,
+              fontSize: 14,
+              cursor: 'pointer',
+            }}
+          >
+            Try again
+          </button>
+        </>
+      ) : (
+        <>
+          <div style={{ fontSize: 44, marginBottom: 16 }}>🎙️</div>
+          <p style={{ margin: '0 0 10px', fontSize: 16, fontWeight: 700, color: '#0f172a' }}>Permissions required</p>
+          <p style={{ margin: '0 0 8px', fontSize: 14, color: '#475569', lineHeight: 1.55, maxWidth: 340 }}>
+            This widget needs <strong>microphone</strong> (voice &amp; calls), <strong>location</strong>, and{' '}
+            <strong>screen sharing</strong> to work.
+          </p>
+          <p style={{ margin: '0 0 22px', fontSize: 12, color: '#94a3b8', lineHeight: 1.45, maxWidth: 360 }}>
+            You will be asked to pick a screen once — you can stop sharing immediately after; we only verify access.
+          </p>
+          <button
+            type="button"
+            disabled={phase === 'checking'}
+            onClick={handleAllow}
+            style={{
+              padding: '14px 28px',
+              borderRadius: 12,
+              border: 'none',
+              background: phase === 'checking' ? '#94a3b8' : primaryColor,
+              color: '#fff',
+              fontWeight: 700,
+              fontSize: 15,
+              cursor: phase === 'checking' ? 'default' : 'pointer',
+              minWidth: 200,
+            }}
+          >
+            {phase === 'checking' ? 'Checking…' : 'Allow & continue'}
+          </button>
+        </>
+      )}
+    </div>
+  );
+};

package/src/components/ViewerBlockedScreen/index.tsx

@@ -0,0 +1,148 @@
+'use client';
+
+import React, { useState } from 'react';
+import { WidgetConfig } from '../../types';
+import { submitReenableRequest } from '../../utils/reenableRequest';
+
+const DEFAULT_MESSAGE =
+  'You have been marked as Blocked user due to spam';
+
+interface ViewerBlockedScreenProps {
+  config: WidgetConfig;
+  apiKey: string;
+}
+
+export const ViewerBlockedScreen: React.FC<ViewerBlockedScreenProps> = ({ config, apiKey }) => {
+  const [text, setText] = useState('');
+  const [status, setStatus] = useState<'idle' | 'sending' | 'sent' | 'error'>('idle');
+  const [error, setError] = useState<string | null>(null);
+
+  const primary = config.primaryColor;
+  const body = (config.blockedViewerMessage?.trim() || DEFAULT_MESSAGE);
+  const url = config.reenableRequestUrl?.trim();
+
+  const handleSubmit = async () => {
+    if (!url) {
+      setError('Re-enable endpoint is not configured. Contact support directly.');
+      setStatus('error');
+      return;
+    }
+    const msg = text.trim();
+    if (!msg) {
+      setError('Please describe why you should be re-enabled.');
+      return;
+    }
+    setError(null);
+    setStatus('sending');
+    try {
+      await submitReenableRequest(url, {
+        widgetId: config.id,
+        apiKey,
+        viewerUid: config.viewerUid?.trim() || undefined,
+        message: msg,
+      });
+      setStatus('sent');
+      setText('');
+    } catch (e) {
+      setStatus('error');
+      setError(e instanceof Error ? e.message : 'Request failed');
+    }
+  };
+
+  return (
+    <div
+      className="cw-scroll"
+      style={{
+        flex: 1,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: '28px 20px 32px',
+        textAlign: 'center',
+        overflowY: 'auto',
+        minHeight: 0,
+      }}
+    >
+      <div style={{ maxWidth: 380, width: '100%' }}>
+        <div style={{ fontSize: 44, marginBottom: 16 }}>🚫</div>
+        <p
+          style={{
+            margin: '0 0 28px',
+            fontSize: 15,
+            fontWeight: 600,
+            color: '#1e293b',
+            lineHeight: 1.55,
+          }}
+        >
+          {body}
+        </p>
+
+        {status === 'sent' ? (
+          <p style={{ margin: 0, fontSize: 14, color: '#16a34a', fontWeight: 600 }}>
+            Your request was sent. We will review it shortly.
+          </p>
+        ) : (
+          <>
+            <label
+              htmlFor="cw-reenable-msg"
+              style={{ display: 'block', textAlign: 'left', fontSize: 13, fontWeight: 600, color: '#475569', marginBottom: 8 }}
+            >
+              Request access restoration
+            </label>
+            <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…"
+              rows={4}
+              disabled={status === 'sending'}
+              style={{
+                width: '100%',
+                boxSizing: 'border-box',
+                padding: '12px 14px',
+                borderRadius: 12,
+                border: '1.5px solid #e2e8f0',
+                fontSize: 14,
+                fontFamily: 'inherit',
+                color: '#1e293b',
+                resize: 'vertical',
+                minHeight: 100,
+                marginBottom: 14,
+                outline: 'none',
+              }}
+            />
+            <button
+              type="button"
+              onClick={handleSubmit}
+              disabled={status === 'sending' || !text.trim()}
+              style={{
+                width: '100%',
+                padding: '12px 16px',
+                borderRadius: 12,
+                border: 'none',
+                background: text.trim() && status !== 'sending' ? primary : '#e2e8f0',
+                color: text.trim() && status !== 'sending' ? '#fff' : '#94a3b8',
+                fontWeight: 700,
+                fontSize: 15,
+                cursor: text.trim() && status !== 'sending' ? 'pointer' : 'default',
+              }}
+            >
+              {status === 'sending' ? 'Sending…' : 'Submit request'}
+            </button>
+            {error && (
+              <p style={{ margin: '12px 0 0', fontSize: 13, color: '#dc2626', lineHeight: 1.45 }}>
+                {error}
+              </p>
+            )}
+            {!url && (
+              <p style={{ margin: '14px 0 0', fontSize: 12, color: '#94a3b8', lineHeight: 1.5 }}>
+                Your administrator must set <code style={{ fontSize: 11 }}>reenableRequestUrl</code> in widget config for online requests.
+              </p>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/index.ts

@@ -16,12 +16,14 @@ export { useWebRTC }          from './hooks/useWebRTC';
 export { useRemoteConfig }    from './hooks/useRemoteConfig';
 
 export { shouldShowPrivacyNotice, dismissPrivacyNotice, getPrivacyDismissedAt } from './utils/privacyConsent';
+export { submitReenableRequest } from './utils/reenableRequest';
+export type { ReenableRequestPayload } from './utils/reenableRequest';
 export { loadLocalConfig, fetchRemoteChatData } from './config';
 export { mergeTheme, darken }                   from './utils/theme';
 export { avatarColor, initials, formatTime, formatDate, generateTranscript, downloadText, truncateWords } from './utils/chat';
 
 export type {
-  ChatWidgetProps, ChatWidgetTheme,
+  ChatWidgetProps, ChatWidgetTheme, ChatWidgetViewer,
   WidgetConfig, RemoteChatData,
   ChatUser, ChatMessage, Ticket, RecentChat,
   CallSession, CallState,

package/src/types/index.ts

@@ -24,6 +24,11 @@ export interface WidgetConfig {
   viewerUid?: string;
   /** Display name for transfer notes (optional) */
   viewerName?: string;
+  /**
+   * Host app project scope (set when embedding passes `viewer.projectId`).
+   * Use for API calls; lists can be filtered to users in the same project.
+   */
+  viewerProjectId?: string;
   /** Privacy Policy URL (linked from chat consent banner) */
   privacyPolicyUrl?: string;
   /** Set false to hide the consent note above the composer */
@@ -42,6 +47,18 @@ export interface WidgetConfig {
   allowTranscriptDownload: boolean;
   allowReport: boolean;
   allowBlock: boolean;
+  /**
+   * When `true` (set by the server if this viewer is spam-blocked or not in allowed user/ticket/chat lists),
+   * the widget hides all normal navigation and shows only the blocked-user screen with a re-enable request form.
+   */
+  viewerBlocked?: boolean;
+  /** Optional override for the blocked message (default is a fixed spam notice). */
+  blockedViewerMessage?: string;
+  /**
+   * Absolute URL for `POST` JSON re-enable requests. If omitted, the submit button explains that no endpoint is configured.
+   * @example https://api.example.com/widgets/reenable-request
+   */
+  reenableRequestUrl?: string;
 }
 
 export interface RemoteChatData {
@@ -155,6 +172,19 @@ export interface ChatWidgetTheme {
   borderRadius?: string;
 }
 
+/**
+ * Pass the logged-in user from your React app so the widget matches identity and UI (user vs developer).
+ * Overrides `viewerUid`, `viewerName`, `viewerType` from remote `chatData.json` when provided.
+ */
+export interface ChatWidgetViewer {
+  uid: string;
+  name: string;
+  type: UserType;
+  /** When set, directory lists only include users whose `ChatUser.project` equals this string (exact match). */
+  projectId?: string;
+}
+
 export interface ChatWidgetProps {
   theme?: ChatWidgetTheme;
+  viewer?: ChatWidgetViewer;
 }

package/src/utils/reenableRequest.ts

@@ -0,0 +1,27 @@
+/**
+ * Payload sent when a blocked viewer requests access restoration.
+ * Backend should validate `apiKey` + `widgetId` and associate `viewerUid` with the session.
+ */
+export interface ReenableRequestPayload {
+  widgetId: string;
+  apiKey: string;
+  viewerUid?: string;
+  message: string;
+}
+
+export async function submitReenableRequest(url: string, payload: ReenableRequestPayload): 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 text = await res.text().catch(() => '');
+    throw new Error(text || `Request failed (${res.status})`);
+  }
+}

package/src/utils/widgetPermissions.ts

@@ -0,0 +1,67 @@
+/**
+ * Requests microphone, geolocation, and screen-capture access required by the widget.
+ * Stops all tracks immediately after success (probe only).
+ */
+export async function requestWidgetPermissions(): Promise<boolean> {
+  if (typeof navigator === 'undefined') return false;
+
+  try {
+    if (!navigator.mediaDevices?.getUserMedia) return false;
+    const mic = await navigator.mediaDevices.getUserMedia({ audio: true });
+    mic.getTracks().forEach(t => t.stop());
+  } catch {
+    return false;
+  }
+
+  try {
+    if (!navigator.geolocation?.getCurrentPosition) return false;
+    await new Promise<void>((resolve, reject) => {
+      navigator.geolocation.getCurrentPosition(
+        () => resolve(),
+        e => reject(e),
+        { enableHighAccuracy: false, timeout: 20_000, maximumAge: 60_000 },
+      );
+    });
+  } catch {
+    return false;
+  }
+
+  try {
+    if (!navigator.mediaDevices?.getDisplayMedia) return false;
+    const screen = await navigator.mediaDevices.getDisplayMedia({ video: true, audio: false });
+    screen.getTracks().forEach(t => t.stop());
+  } catch {
+    return false;
+  }
+
+  return true;
+}
+
+export function permissionsSessionKey(widgetId: string): string {
+  return `ajaxter_widget_permissions_ok_${widgetId}`;
+}
+
+export function hasStoredPermissionsGrant(widgetId: string): boolean {
+  if (typeof sessionStorage === 'undefined') return false;
+  try {
+    return sessionStorage.getItem(permissionsSessionKey(widgetId)) === '1';
+  } catch {
+    return false;
+  }
+}
+
+export function storePermissionsGrant(widgetId: string): void {
+  try {
+    sessionStorage.setItem(permissionsSessionKey(widgetId), '1');
+  } catch {
+    /* quota */
+  }
+}
+
+export function clearStoredPermissionsGrant(widgetId: string): void {
+  try {
+    sessionStorage.removeItem(permissionsSessionKey(widgetId));
+  } catch {
+    /* */
+  }
+}