ajaxter-chat 3.0.11 → 3.0.13

package/dist/components/ChatWidget.js

@@ -19,8 +19,9 @@ import { BlockListScreen } from './BlockList';
 import { CallScreen } from './CallScreen';
 import { MaintenanceView } from './MaintenanceView';
 import { BottomTabs } from './Tabs/BottomTabs';
+import { ViewerBlockedScreen } from './ViewerBlockedScreen';
 export const ChatWidget = ({ theme: localTheme }) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
     /* SSR guard */
     const [mounted, setMounted] = useState(false);
     useEffect(() => { setMounted(true); }, []);
@@ -110,6 +111,14 @@ export const ChatWidget = ({ theme: localTheme }) => {
             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);
@@ -128,12 +137,21 @@ export const ChatWidget = ({ theme: localTheme }) => {
             }
         }
         restoredRef.current = true;
-    }, [data, selectUser]);
+    }, [data, selectUser, clearChat]);
+    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);
+    }, [(_c = data === null || data === void 0 ? void 0 : data.widget) === null || _c === void 0 ? void 0 : _c.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]);
+    }, [(_d = data === null || data === void 0 ? void 0 : data.widget) === null || _d === void 0 ? void 0 : _d.id, screen, activeTab, userListCtx, activeUser === null || activeUser === void 0 ? void 0 : activeUser.uid, messages, viewingTicketId, chatReturnCtx, persistWidgetState]);
     const incomingSoundRef = useRef(0);
     useEffect(() => {
         incomingSoundRef.current = messages.length;
@@ -287,7 +305,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 = (_e = data === null || data === void 0 ? void 0 : data.developers.filter(d => d.uid !== viewerUid)) !== null && _e !== void 0 ? _e : [];
     const blockedUsers = allUsers.filter(u => blockedUids.includes(u.uid));
     const handleTransferToDeveloper = useCallback((dev) => {
         var _a;
@@ -378,7 +396,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 && (_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 +404,7 @@ 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 &&
                                 screen !== 'chat' &&
                                 screen !== 'call' &&
                                 screen !== 'user-list' &&

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,6 +14,8 @@ 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';

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

@@ -41,6 +41,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;

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/package.json

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

@@ -21,6 +21,7 @@ import { BlockListScreen }   from './BlockList';
 import { CallScreen }        from './CallScreen';
 import { MaintenanceView }   from './MaintenanceView';
 import { BottomTabs }        from './Tabs/BottomTabs';
+import { ViewerBlockedScreen } from './ViewerBlockedScreen';
 
 export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme }) => {
   /* SSR guard */
@@ -125,6 +126,14 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme }) =>
     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);
@@ -143,7 +152,15 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme }) =>
       }
     }
     restoredRef.current = true;
-  }, [data, selectUser]);
+  }, [data, selectUser, clearChat]);
+
+  useEffect(() => {
+    if (!data?.widget?.viewerBlocked) return;
+    clearChat();
+    setScreen('home');
+    setActiveTab('home');
+    setViewingTicketId(null);
+  }, [data?.widget?.viewerBlocked, clearChat]);
 
   useEffect(() => {
     if (!data?.widget) return;
@@ -512,8 +529,13 @@ 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 ── */}
-              {widgetConfig.status === 'ACTIVE' && (
+              {widgetConfig.status === 'ACTIVE' && !widgetConfig.viewerBlocked && (
                 <div className="cw-scroll" style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
 
                   {screen === 'home' && (
@@ -631,6 +653,7 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme }) =>
 
               {/* ── Bottom Tabs (hidden during chat/call/user-list/block-list) ── */}
               {widgetConfig.status === 'ACTIVE' &&
+               !widgetConfig.viewerBlocked &&
                screen !== 'chat' &&
                screen !== 'call' &&
                screen !== 'user-list' &&

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,6 +16,8 @@ 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';

package/src/types/index.ts

@@ -42,6 +42,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 {

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