ajaxter-chat 3.0.13 → 3.0.15

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';
@@ -20,8 +20,10 @@ 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, _f;
+import { PermissionsGateScreen } from './PermissionsGateScreen';
+import { hasStoredPermissionsGrant } from '../utils/widgetPermissions';
+export const ChatWidget = ({ theme: localTheme, viewer }) => {
+    var _a, _b, _c, _d, _e;
     /* SSR guard */
     const [mounted, setMounted] = useState(false);
     useEffect(() => { setMounted(true); }, []);
@@ -43,18 +45,22 @@ 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, _d;
         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 devs = (_b = data.developers) !== null && _b !== void 0 ? _b : [];
+            const usr = pid ? ((_c = data.users) !== null && _c !== void 0 ? _c : []).filter(u => u.project === pid) : ((_d = data.users) !== null && _d !== void 0 ? _d : []);
+            const all = [...devs, ...usr];
             const recents = Object.entries(data.sampleChats).map(([uid, msgs]) => {
                 const user = all.find(u => u.uid === uid);
                 if (!user || msgs.length === 0)
@@ -71,7 +77,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 */
@@ -104,14 +110,27 @@ 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, _e, _f;
         if (!(data === null || data === void 0 ? void 0 : data.widget) || restoredRef.current)
             return;
         const w = data.widget;
         setMessageSoundEnabledState(getMessageSoundEnabled(w.id));
-        if (w.viewerBlocked) {
+        const uidForBlock = (_b = ((_a = viewer === null || viewer === void 0 ? void 0 : viewer.uid) !== null && _a !== void 0 ? _a : w.viewerUid)) === null || _b === void 0 ? void 0 : _b.trim();
+        let viewerIsBlocked = w.viewerBlocked === true;
+        if (!viewerIsBlocked && uidForBlock) {
+            const rec = [...data.developers, ...data.users].find(x => x.uid === uidForBlock);
+            viewerIsBlocked = (rec === null || rec === void 0 ? void 0 : rec.viewerBlocked) === true;
+        }
+        if (viewerIsBlocked) {
             clearChat();
             setScreen('home');
             setActiveTab('home');
@@ -124,29 +143,42 @@ export const ChatWidget = ({ theme: localTheme }) => {
             setScreen(p.screen);
             setActiveTab(p.activeTab);
             setUserListCtx(p.userListCtx);
-            setViewingTicketId((_a = p.viewingTicketId) !== null && _a !== void 0 ? _a : null);
-            setChatReturnCtx((_b = p.chatReturnCtx) !== null && _b !== void 0 ? _b : 'conversation');
+            setViewingTicketId((_c = p.viewingTicketId) !== null && _c !== void 0 ? _c : null);
+            setChatReturnCtx((_d = p.chatReturnCtx) !== null && _d !== void 0 ? _d : 'conversation');
             if (p.activeUserUid) {
-                const u = [...data.developers, ...data.users].find(x => x.uid === p.activeUserUid);
+                const pid = (_e = viewer === null || viewer === void 0 ? void 0 : viewer.projectId) === null || _e === void 0 ? void 0 : _e.trim();
+                const pool = pid
+                    ? [...data.developers, ...data.users].filter(u => u.project === pid)
+                    : [...data.developers, ...data.users];
+                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 : []);
+                        : ((_f = data.sampleChats[u.uid]) !== null && _f !== void 0 ? _f : []);
                     selectUser(u, hist);
                 }
             }
         }
         restoredRef.current = true;
-    }, [data, selectUser, clearChat]);
+    }, [data, selectUser, clearChat, viewer === null || viewer === void 0 ? void 0 : viewer.projectId, viewer === null || viewer === void 0 ? void 0 : viewer.uid]);
     useEffect(() => {
-        var _a;
-        if (!((_a = data === null || data === void 0 ? void 0 : data.widget) === null || _a === void 0 ? void 0 : _a.viewerBlocked))
+        var _a, _b;
+        if (!(data === null || data === void 0 ? void 0 : data.widget))
+            return;
+        const w = data.widget;
+        const uid = (_b = ((_a = viewer === null || viewer === void 0 ? void 0 : viewer.uid) !== null && _a !== void 0 ? _a : w.viewerUid)) === null || _b === void 0 ? void 0 : _b.trim();
+        let blocked = w.viewerBlocked === true;
+        if (!blocked && uid) {
+            const rec = [...data.developers, ...data.users].find(x => x.uid === uid);
+            blocked = (rec === null || rec === void 0 ? void 0 : rec.viewerBlocked) === true;
+        }
+        if (!blocked)
             return;
         clearChat();
         setScreen('home');
         setActiveTab('home');
         setViewingTicketId(null);
-    }, [(_c = data === null || data === void 0 ? void 0 : data.widget) === null || _c === void 0 ? void 0 : _c.viewerBlocked, clearChat]);
+    }, [data === null || data === void 0 ? void 0 : data.widget, data === null || data === void 0 ? void 0 : data.developers, data === null || data === void 0 ? void 0 : data.users, viewer === null || viewer === void 0 ? void 0 : viewer.uid, clearChat]);
     useEffect(() => {
         if (!(data === null || data === void 0 ? void 0 : data.widget))
             return;
@@ -287,9 +319,45 @@ 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] : [];
+    /** All developers are listed; only end-`user` rows are filtered by `viewer.projectId`. */
+    const allUsers = useMemo(() => {
+        var _a, _b;
+        if (!data)
+            return [];
+        const pid = (_a = viewer === null || viewer === void 0 ? void 0 : viewer.projectId) === null || _a === void 0 ? void 0 : _a.trim();
+        const devs = (_b = data.developers) !== null && _b !== void 0 ? _b : [];
+        if (!pid)
+            return [...devs, ...data.users];
+        const usersInProject = data.users.filter(u => u.project === pid);
+        return [...devs, ...usersInProject];
+    }, [data, viewer === null || viewer === void 0 ? void 0 : viewer.projectId]);
+    const effectiveViewerBlocked = useMemo(() => {
+        var _a, _b;
+        if (!widgetConfig)
+            return false;
+        if (widgetConfig.viewerBlocked === true)
+            return true;
+        const uid = (_b = ((_a = viewer === null || viewer === void 0 ? void 0 : viewer.uid) !== null && _a !== void 0 ? _a : widgetConfig.viewerUid)) === null || _b === void 0 ? void 0 : _b.trim();
+        if (!uid || !data)
+            return false;
+        const rec = [...data.developers, ...data.users].find(x => x.uid === uid);
+        return (rec === null || rec === void 0 ? void 0 : rec.viewerBlocked) === true;
+    }, [widgetConfig, viewer === null || viewer === void 0 ? void 0 : viewer.uid, data]);
     const viewerIsDev = (widgetConfig === null || widgetConfig === void 0 ? void 0 : widgetConfig.viewerType) === 'developer';
     const viewerUid = widgetConfig === null || widgetConfig === void 0 ? void 0 : widgetConfig.viewerUid;
     const filteredUsers = screen === 'user-list'
@@ -305,7 +373,7 @@ export const ChatWidget = ({ theme: localTheme }) => {
             return u.type === 'user';
         })
         : [];
-    const otherDevelopers = (_e = data === null || data === void 0 ? void 0 : data.developers.filter(d => d.uid !== viewerUid)) !== null && _e !== void 0 ? _e : [];
+    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;
@@ -396,7 +464,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' && 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 => {
+                                }, 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 => {
                                             setListEntranceAnimation(false);
                                             setViewingTicketId(id);
                                             setScreen('ticket-detail');
@@ -404,7 +472,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 &&
+                                !effectiveViewerBlocked &&
+                                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/index.d.ts

@@ -19,4 +19,4 @@ 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/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 */
@@ -80,6 +85,11 @@ export interface ChatUser {
     avatar: string | null;
     status: OnlineStatus;
     designation: string;
+    /**
+     * When `true` for the row matching the current viewer (`viewerUid` / `viewer.uid`),
+     * the widget shows the spam/blocked screen (same as `widget.viewerBlocked`).
+     */
+    viewerBlocked?: boolean;
 }
 export interface ChatMessage {
     id: string;
@@ -138,6 +148,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/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.13",
+  "version": "3.0.15",
   "description": "Drawer-based chat widget with support chat, tickets, WebRTC calling, voice messages, block list, and transcript download.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/public/chatData.json

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

package/src/components/ChatWidget.tsx

@@ -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';
@@ -22,8 +22,10 @@ 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); }, []);
@@ -53,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 ?? []);
@@ -64,8 +68,10 @@ 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 devs = data.developers ?? [];
+      const usr = pid ? (data.users ?? []).filter(u => u.project === pid) : (data.users ?? []);
+      const all = [...devs, ...usr];
       const recents: RecentChat[] = Object.entries(data.sampleChats).map(([uid, msgs]) => {
         const user = all.find(u => u.uid === uid);
         if (!user || msgs.length === 0) return null;
@@ -81,7 +87,7 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme }) =>
       }).filter(Boolean) as RecentChat[];
       setRecentChats(recents);
     }
-  }, [data]);
+  }, [data, viewer?.projectId]);
 
   /* Chat hook */
   const {
@@ -121,12 +127,24 @@ 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) {
+    const uidForBlock = (viewer?.uid ?? w.viewerUid)?.trim();
+    let viewerIsBlocked = w.viewerBlocked === true;
+    if (!viewerIsBlocked && uidForBlock) {
+      const rec = [...data.developers, ...data.users].find(x => x.uid === uidForBlock);
+      viewerIsBlocked = rec?.viewerBlocked === true;
+    }
+    if (viewerIsBlocked) {
       clearChat();
       setScreen('home');
       setActiveTab('home');
@@ -142,7 +160,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
@@ -152,15 +174,23 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme }) =>
       }
     }
     restoredRef.current = true;
-  }, [data, selectUser, clearChat]);
+  }, [data, selectUser, clearChat, viewer?.projectId, viewer?.uid]);
 
   useEffect(() => {
-    if (!data?.widget?.viewerBlocked) return;
+    if (!data?.widget) return;
+    const w = data.widget;
+    const uid = (viewer?.uid ?? w.viewerUid)?.trim();
+    let blocked = w.viewerBlocked === true;
+    if (!blocked && uid) {
+      const rec = [...data.developers, ...data.users].find(x => x.uid === uid);
+      blocked = rec?.viewerBlocked === true;
+    }
+    if (!blocked) return;
     clearChat();
     setScreen('home');
     setActiveTab('home');
     setViewingTicketId(null);
-  }, [data?.widget?.viewerBlocked, clearChat]);
+  }, [data?.widget, data?.developers, data?.users, viewer?.uid, clearChat]);
 
   useEffect(() => {
     if (!data?.widget) return;
@@ -308,10 +338,40 @@ 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]     : [];
+  /** All developers are listed; only end-`user` rows are filtered by `viewer.projectId`. */
+  const allUsers = useMemo(() => {
+    if (!data) return [];
+    const pid = viewer?.projectId?.trim();
+    const devs = data.developers ?? [];
+    if (!pid) return [...devs, ...data.users];
+    const usersInProject = data.users.filter(u => u.project === pid);
+    return [...devs, ...usersInProject];
+  }, [data, viewer?.projectId]);
+
+  const effectiveViewerBlocked = useMemo(() => {
+    if (!widgetConfig) return false;
+    if (widgetConfig.viewerBlocked === true) return true;
+    const uid = (viewer?.uid ?? widgetConfig.viewerUid)?.trim();
+    if (!uid || !data) return false;
+    const rec = [...data.developers, ...data.users].find(x => x.uid === uid);
+    return rec?.viewerBlocked === true;
+  }, [widgetConfig, viewer?.uid, data]);
+
   const viewerIsDev  = widgetConfig?.viewerType === 'developer';
   const viewerUid    = widgetConfig?.viewerUid;
 
@@ -328,7 +388,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) => {
@@ -530,12 +593,21 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme }) =>
               )}
 
               {/* ── ACTIVE: viewer spam-blocked (no chat/tickets UI) ── */}
-              {widgetConfig.status === 'ACTIVE' && widgetConfig.viewerBlocked && (
+              {widgetConfig.status === 'ACTIVE' && effectiveViewerBlocked && (
                 <ViewerBlockedScreen config={widgetConfig} apiKey={apiKey} />
               )}
 
+              {/* ── ACTIVE: microphone, location, screen share required ── */}
+              {widgetConfig.status === 'ACTIVE' && !effectiveViewerBlocked && !permissionsOk && (
+                <PermissionsGateScreen
+                  primaryColor={primaryColor}
+                  widgetId={widgetConfig.id}
+                  onGranted={() => setPermissionsOk(true)}
+                />
+              )}
+
               {/* ── ACTIVE ── */}
-              {widgetConfig.status === 'ACTIVE' && !widgetConfig.viewerBlocked && (
+              {widgetConfig.status === 'ACTIVE' && !effectiveViewerBlocked && permissionsOk && (
                 <div className="cw-scroll" style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
 
                   {screen === 'home' && (
@@ -653,7 +725,8 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme }) =>
 
               {/* ── Bottom Tabs (hidden during chat/call/user-list/block-list) ── */}
               {widgetConfig.status === 'ACTIVE' &&
-               !widgetConfig.viewerBlocked &&
+               !effectiveViewerBlocked &&
+               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/index.ts

@@ -23,7 +23,7 @@ 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 */
@@ -95,6 +100,11 @@ export interface ChatUser {
   avatar: string | null;
   status: OnlineStatus;
   designation: string;
+  /**
+   * When `true` for the row matching the current viewer (`viewerUid` / `viewer.uid`),
+   * the widget shows the spam/blocked screen (same as `widget.viewerBlocked`).
+   */
+  viewerBlocked?: boolean;
 }
 
 // ─── Message ────────────────────────────────────────────────────────────────
@@ -167,6 +177,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/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 {
+    /* */
+  }
+}