ajaxter-chat 3.0.5 → 3.0.7

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

@@ -16,6 +16,9 @@ interface ChatScreenProps {
     onStartCall: (withVideo: boolean) => void;
     /** Navigate to support list, colleague list, or tickets (from slide menu) */
     onNavAction: (ctx: UserListContext | 'ticket') => void;
+    /** Other devs (excl. viewer) — for transfer when staff chats with a customer */
+    otherDevelopers?: ChatUser[];
+    onTransferToDeveloper?: (dev: ChatUser) => void;
 }
 export declare const ChatScreen: React.FC<ChatScreenProps>;
 export {};

package/dist/components/ChatScreen/index.js

@@ -1,16 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useState, useRef, useEffect, useCallback } from 'react';
 import { avatarColor, initials, formatTime, formatDate, generateTranscript, downloadText } from '../../utils/chat';
+import { shouldShowPrivacyNotice, dismissPrivacyNotice } from '../../utils/privacyConsent';
 import { EmojiPicker } from '../EmojiPicker';
 import { SlideNavMenu } from '../SlideNavMenu';
-export const ChatScreen = ({ activeUser, messages, config, isPaused, isReported, isBlocked, onSend, onBack, onClose, onTogglePause, onReport, onBlock, onStartCall, onNavAction, }) => {
+export const ChatScreen = ({ activeUser, messages, config, isPaused, isReported, isBlocked, onSend, onBack, onClose, onTogglePause, onReport, onBlock, onStartCall, onNavAction, otherDevelopers = [], onTransferToDeveloper, }) => {
+    var _a;
     const [text, setText] = useState('');
     const [showEmoji, setShowEmoji] = useState(false);
     const [showMenu, setShowMenu] = useState(false);
     const [slideMenuOpen, setSlideMenuOpen] = useState(false);
+    const [transferOpen, setTransferOpen] = useState(false);
     const [isRecording, setIsRecording] = useState(false);
     const [recordSec, setRecordSec] = useState(0);
     const [showConfirm, setShowConfirm] = useState(null);
+    const [showPrivacy, setShowPrivacy] = useState(false);
     const endRef = useRef(null);
     const inputRef = useRef(null);
     const fileRef = useRef(null);
@@ -18,6 +22,24 @@ export const ChatScreen = ({ activeUser, messages, config, isPaused, isReported,
     const mediaRecorder = useRef(null);
     const recordChunks = useRef([]);
     useEffect(() => { var _a; (_a = endRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'smooth' }); }, [messages]);
+    const privacyEnabled = config.showPrivacyNotice !== false;
+    useEffect(() => {
+        if (!privacyEnabled)
+            return;
+        setShowPrivacy(shouldShowPrivacyNotice(config.id));
+    }, [config.id, privacyEnabled]);
+    useEffect(() => {
+        if (!privacyEnabled)
+            return;
+        const id = window.setInterval(() => {
+            setShowPrivacy(shouldShowPrivacyNotice(config.id));
+        }, 60000);
+        return () => window.clearInterval(id);
+    }, [config.id, privacyEnabled]);
+    const dismissPrivacy = useCallback(() => {
+        dismissPrivacyNotice(config.id);
+        setShowPrivacy(false);
+    }, [config.id]);
     const handleSend = useCallback(() => {
         var _a;
         if (!text.trim() || isPaused || isBlocked)
@@ -96,10 +118,37 @@ export const ChatScreen = ({ activeUser, messages, config, isPaused, isReported,
     const peerAvatar = avatarColor(activeUser.name);
     const peerInit = initials(activeUser.name);
     const grouped = groupByDate(messages);
-    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', height: '100%', animation: 'cw-slideIn 0.22s ease', position: 'relative', overflow: 'hidden' }, children: [_jsx(SlideNavMenu, { open: slideMenuOpen, onClose: () => setSlideMenuOpen(false), primaryColor: config.primaryColor, chatType: config.chatType, onSelect: onNavAction, onBackHome: onBack }), _jsxs("div", { style: {
+    const viewerIsDev = config.viewerType === 'developer';
+    const headerRole = viewerIsDev
+        ? (activeUser.type === 'user' ? 'Customer' : 'Developer')
+        : 'Support';
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', height: '100%', animation: 'cw-slideIn 0.22s ease', position: 'relative', overflow: 'hidden' }, children: [_jsx(SlideNavMenu, { open: slideMenuOpen, onClose: () => setSlideMenuOpen(false), primaryColor: config.primaryColor, chatType: config.chatType, viewerType: (_a = config.viewerType) !== null && _a !== void 0 ? _a : 'user', onSelect: onNavAction, onBackHome: onBack }), _jsxs("div", { style: {
                     background: `linear-gradient(135deg,${config.primaryColor},${config.primaryColor}cc)`,
                     padding: '10px 12px', display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0,
-                }, children: [_jsx("button", { type: "button", onClick: () => setSlideMenuOpen(true), style: hdrBtn, "aria-label": "Open menu", children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: [_jsx("line", { x1: "3", y1: "6", x2: "21", y2: "6", stroke: "#fff", strokeWidth: "2.2", strokeLinecap: "round" }), _jsx("line", { x1: "3", y1: "12", x2: "21", y2: "12", stroke: "#fff", strokeWidth: "2.2", strokeLinecap: "round" }), _jsx("line", { x1: "3", y1: "18", x2: "21", y2: "18", stroke: "#fff", strokeWidth: "2.2", strokeLinecap: "round" })] }) }), _jsxs("div", { style: { width: 36, height: 36, borderRadius: '50%', backgroundColor: peerAvatar, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontWeight: 700, fontSize: 13, flexShrink: 0, position: 'relative' }, children: [peerInit, _jsx("span", { style: { position: 'absolute', bottom: 0, right: 0, width: 9, height: 9, borderRadius: '50%', border: '2px solid', borderColor: 'transparent', backgroundColor: activeUser.status === 'online' ? '#22c55e' : activeUser.status === 'away' ? '#f59e0b' : '#9ca3af' } })] }), _jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [_jsx("div", { style: { fontWeight: 700, fontSize: 14, color: '#fff', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: activeUser.name }), _jsx("div", { style: { fontSize: 11, color: 'rgba(255,255,255,0.8)' }, children: activeUser.designation })] }), _jsx("span", { style: { fontSize: 13, fontWeight: 700, color: '#fff', opacity: 0.95, flexShrink: 0 }, children: "Support" }), config.allowWebCall && (_jsx("button", { type: "button", onClick: () => onStartCall(false), style: hdrBtn, title: "Voice Call", children: _jsx("svg", { width: "17", height: "17", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 10.8a19.79 19.79 0 01-3.07-8.68A2 2 0 012 0h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.09 7.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 14.92v2z", fill: "#fff" }) }) })), _jsx("button", { type: "button", onClick: () => setShowMenu(v => !v), style: Object.assign(Object.assign({}, hdrBtn), { background: 'rgba(255,255,255,0.2)' }), title: "More options", "aria-expanded": showMenu, children: _jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: [_jsx("circle", { cx: "12", cy: "5", r: "1.5", fill: "#fff" }), _jsx("circle", { cx: "12", cy: "12", r: "1.5", fill: "#fff" }), _jsx("circle", { cx: "12", cy: "19", r: "1.5", fill: "#fff" })] }) })] }), showMenu && (_jsxs("div", { style: { position: 'absolute', top: 52, right: 12, zIndex: 120, background: '#fff', borderRadius: 12, boxShadow: '0 8px 30px rgba(0,0,0,0.16)', padding: '6px', minWidth: 200, animation: 'cw-fadeUp 0.18s ease' }, children: [config.allowTranscriptDownload && (_jsx(MenuItem, { icon: "\uD83D\uDCE5", label: "Download Transcript", onClick: handleTranscript })), _jsx(MenuItem, { icon: isPaused ? '▶️' : '⏸', label: isPaused ? 'Resume Chat' : 'Pause Chat', onClick: () => { setShowMenu(false); setShowConfirm('pause'); } }), config.allowReport && !isReported && (_jsx(MenuItem, { icon: "\u26A0\uFE0F", label: "Report Chat", onClick: () => { setShowMenu(false); setShowConfirm('report'); } })), config.allowBlock && activeUser.type === 'user' && !isBlocked && (_jsx(MenuItem, { icon: "\uD83D\uDEAB", label: "Block User", onClick: () => { setShowMenu(false); setShowConfirm('block'); }, danger: true })), _jsx("div", { style: { borderTop: '1px solid #f0f2f5', margin: '4px 0' } }), _jsx(MenuItem, { icon: "\u2715", label: "Close Chat", onClick: onClose })] })), isPaused && (_jsxs("div", { style: { background: '#fef3c7', padding: '8px 16px', fontSize: 12, fontWeight: 600, color: '#92400e', textAlign: 'center', flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }, children: ["\u23F8 Chat is paused \u2014 users cannot send messages", _jsx("button", { type: "button", onClick: onTogglePause, style: { background: '#92400e', color: '#fff', border: 'none', borderRadius: 6, padding: '2px 8px', fontSize: 11, cursor: 'pointer', marginLeft: 4 }, children: "Resume" })] })), isBlocked && (_jsx("div", { style: { background: '#fee2e2', padding: '8px 16px', fontSize: 12, fontWeight: 600, color: '#991b1b', textAlign: 'center', flexShrink: 0 }, children: "\uD83D\uDEAB This user is blocked" })), isReported && (_jsx("div", { style: { background: '#fef3c7', padding: '6px 16px', fontSize: 11, color: '#92400e', textAlign: 'center', flexShrink: 0 }, children: "\u26A0\uFE0F This chat has been reported" })), _jsxs("div", { style: { flex: 1, overflowY: 'auto', padding: '14px', display: 'flex', flexDirection: 'column', gap: 10, background: '#f8f9fc' }, className: "cw-scroll", children: [grouped.map(({ date, msgs }) => (_jsxs(React.Fragment, { children: [_jsx(DateDivider, { label: date }), msgs.map(msg => (_jsx(Bubble, { msg: msg, primaryColor: config.primaryColor }, msg.id)))] }, date))), messages.length === 0 && (_jsxs("div", { style: { margin: 'auto', textAlign: 'center', color: '#c4cad4', fontSize: 13 }, children: [_jsx("div", { style: { fontSize: 28, marginBottom: 8 }, children: "\uD83D\uDCAC" }), "Say hello to ", activeUser.name, "!"] })), _jsx("div", { ref: endRef })] }), _jsxs("div", { style: { borderTop: '1px solid #eef0f5', padding: '10px 12px 8px', background: '#fff', flexShrink: 0, position: 'relative' }, children: [showEmoji && config.allowEmoji && (_jsx(EmojiPicker, { primaryColor: config.primaryColor, onSelect: e => setText(t => t + e), onClose: () => setShowEmoji(false) })), isRecording && (_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8, padding: '8px 12px', background: '#fee2e2', borderRadius: 10 }, children: [_jsx("span", { style: { width: 8, height: 8, borderRadius: '50%', background: '#ef4444', display: 'inline-block', animation: 'cw-pulse 1s infinite' } }), _jsxs("span", { style: { fontSize: 13, color: '#991b1b', fontWeight: 600 }, children: ["Recording ", recordSec, "s"] }), _jsx("button", { type: "button", onClick: stopRecording, style: { marginLeft: 'auto', background: '#ef4444', color: '#fff', border: 'none', borderRadius: 6, padding: '4px 12px', fontSize: 12, cursor: 'pointer', fontWeight: 600 }, children: "Stop & send" })] })), _jsxs("div", { style: {
+                }, children: [_jsx("button", { type: "button", onClick: () => setSlideMenuOpen(true), style: hdrBtn, "aria-label": "Open menu", children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: [_jsx("line", { x1: "3", y1: "6", x2: "21", y2: "6", stroke: "#fff", strokeWidth: "2.2", strokeLinecap: "round" }), _jsx("line", { x1: "3", y1: "12", x2: "21", y2: "12", stroke: "#fff", strokeWidth: "2.2", strokeLinecap: "round" }), _jsx("line", { x1: "3", y1: "18", x2: "21", y2: "18", stroke: "#fff", strokeWidth: "2.2", strokeLinecap: "round" })] }) }), _jsxs("div", { style: { width: 36, height: 36, borderRadius: '50%', backgroundColor: peerAvatar, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontWeight: 700, fontSize: 13, flexShrink: 0, position: 'relative' }, children: [peerInit, _jsx("span", { style: { position: 'absolute', bottom: 0, right: 0, width: 9, height: 9, borderRadius: '50%', border: '2px solid', borderColor: 'transparent', backgroundColor: activeUser.status === 'online' ? '#22c55e' : activeUser.status === 'away' ? '#f59e0b' : '#9ca3af' } })] }), _jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [_jsx("div", { style: { fontWeight: 700, fontSize: 14, color: '#fff', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: activeUser.name }), _jsx("div", { style: { fontSize: 11, color: 'rgba(255,255,255,0.8)' }, children: activeUser.designation })] }), _jsx("span", { style: { fontSize: 13, fontWeight: 700, color: '#fff', opacity: 0.95, flexShrink: 0 }, children: headerRole }), config.allowWebCall && (_jsx("button", { type: "button", onClick: () => onStartCall(false), style: hdrBtn, title: "Voice Call", children: _jsx("svg", { width: "17", height: "17", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 10.8a19.79 19.79 0 01-3.07-8.68A2 2 0 012 0h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.09 7.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 14.92v2z", fill: "#fff" }) }) })), _jsx("button", { type: "button", onClick: () => setShowMenu(v => !v), style: Object.assign(Object.assign({}, hdrBtn), { background: 'rgba(255,255,255,0.2)' }), title: "More options", "aria-expanded": showMenu, children: _jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: [_jsx("circle", { cx: "12", cy: "5", r: "1.5", fill: "#fff" }), _jsx("circle", { cx: "12", cy: "12", r: "1.5", fill: "#fff" }), _jsx("circle", { cx: "12", cy: "19", r: "1.5", fill: "#fff" })] }) })] }), showMenu && (_jsxs("div", { style: { position: 'absolute', top: 52, right: 12, zIndex: 120, background: '#fff', borderRadius: 12, boxShadow: '0 8px 30px rgba(0,0,0,0.16)', padding: '6px', minWidth: 200, animation: 'cw-fadeUp 0.18s ease' }, children: [config.allowTranscriptDownload && (_jsx(MenuItem, { icon: "\uD83D\uDCE5", label: "Download Transcript", onClick: handleTranscript })), viewerIsDev && activeUser.type === 'user' && otherDevelopers.length > 0 && onTransferToDeveloper && (_jsx(MenuItem, { icon: "\uD83D\uDD00", label: "Transfer to developer", onClick: () => { setShowMenu(false); setTransferOpen(true); } })), _jsx(MenuItem, { icon: isPaused ? '▶️' : '⏸', label: isPaused ? 'Resume Chat' : 'Pause Chat', onClick: () => { setShowMenu(false); setShowConfirm('pause'); } }), config.allowReport && !isReported && (_jsx(MenuItem, { icon: "\u26A0\uFE0F", label: "Report Chat", onClick: () => { setShowMenu(false); setShowConfirm('report'); } })), config.allowBlock && activeUser.type === 'user' && !isBlocked && (_jsx(MenuItem, { icon: "\uD83D\uDEAB", label: "Block User", onClick: () => { setShowMenu(false); setShowConfirm('block'); }, danger: true })), _jsx("div", { style: { borderTop: '1px solid #f0f2f5', margin: '4px 0' } }), _jsx(MenuItem, { icon: "\u2715", label: "Close Chat", onClick: onClose })] })), isPaused && (_jsxs("div", { style: { background: '#fef3c7', padding: '8px 16px', fontSize: 12, fontWeight: 600, color: '#92400e', textAlign: 'center', flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }, children: ["\u23F8 Chat is paused \u2014 users cannot send messages", _jsx("button", { type: "button", onClick: onTogglePause, style: { background: '#92400e', color: '#fff', border: 'none', borderRadius: 6, padding: '2px 8px', fontSize: 11, cursor: 'pointer', marginLeft: 4 }, children: "Resume" })] })), isBlocked && (_jsx("div", { style: { background: '#fee2e2', padding: '8px 16px', fontSize: 12, fontWeight: 600, color: '#991b1b', textAlign: 'center', flexShrink: 0 }, children: "\uD83D\uDEAB This user is blocked" })), isReported && (_jsx("div", { style: { background: '#fef3c7', padding: '6px 16px', fontSize: 11, color: '#92400e', textAlign: 'center', flexShrink: 0 }, children: "\u26A0\uFE0F This chat has been reported" })), _jsxs("div", { style: { flex: 1, overflowY: 'auto', padding: '14px', display: 'flex', flexDirection: 'column', gap: 10, background: '#f8f9fc' }, className: "cw-scroll", children: [grouped.map(({ date, msgs }) => (_jsxs(React.Fragment, { children: [_jsx(DateDivider, { label: date }), msgs.map(msg => (_jsx(Bubble, { msg: msg, primaryColor: config.primaryColor }, msg.id)))] }, date))), messages.length === 0 && (_jsxs("div", { style: { margin: 'auto', textAlign: 'center', color: '#c4cad4', fontSize: 13 }, children: [_jsx("div", { style: { fontSize: 28, marginBottom: 8 }, children: "\uD83D\uDCAC" }), "Say hello to ", activeUser.name, "!"] })), _jsx("div", { ref: endRef })] }), _jsxs("div", { style: { borderTop: '1px solid #eef0f5', padding: '10px 12px 8px', background: '#fff', flexShrink: 0, position: 'relative' }, children: [privacyEnabled && showPrivacy && (_jsxs("div", { style: {
+                            position: 'relative',
+                            marginBottom: 10,
+                            padding: '12px 36px 12px 12px',
+                            borderRadius: 12,
+                            background: '#fff',
+                            border: '1px solid #e8ecf1',
+                            boxShadow: '0 1px 4px rgba(15,23,42,0.06)',
+                        }, children: [_jsx("button", { type: "button", "aria-label": "Dismiss privacy notice", onClick: dismissPrivacy, style: {
+                                    position: 'absolute',
+                                    top: 8,
+                                    right: 8,
+                                    width: 26,
+                                    height: 26,
+                                    borderRadius: '50%',
+                                    border: 'none',
+                                    background: '#f1f5f9',
+                                    cursor: 'pointer',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    padding: 0,
+                                    lineHeight: 1,
+                                }, children: _jsx("span", { style: { fontSize: 14, color: '#475569', fontWeight: 700 }, children: "\u00D7" }) }), _jsxs("p", { style: { margin: 0, fontSize: 12, color: '#64748b', lineHeight: 1.55 }, children: ["By chatting here, you agree we and authorized partners may process, monitor, and record this chat and your data in line with", ' ', config.privacyPolicyUrl ? (_jsx("a", { href: config.privacyPolicyUrl, target: "_blank", rel: "noopener noreferrer", style: { color: config.primaryColor, textDecoration: 'underline', fontWeight: 600 }, children: "Privacy Policy" })) : (_jsx("span", { style: { textDecoration: 'underline', fontWeight: 600 }, children: "Privacy Policy" })), "."] })] })), showEmoji && config.allowEmoji && (_jsx(EmojiPicker, { primaryColor: config.primaryColor, onSelect: e => setText(t => t + e), onClose: () => setShowEmoji(false) })), isRecording && (_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8, padding: '8px 12px', background: '#fee2e2', borderRadius: 10 }, children: [_jsx("span", { style: { width: 8, height: 8, borderRadius: '50%', background: '#ef4444', display: 'inline-block', animation: 'cw-pulse 1s infinite' } }), _jsxs("span", { style: { fontSize: 13, color: '#991b1b', fontWeight: 600 }, children: ["Recording ", recordSec, "s"] }), _jsx("button", { type: "button", onClick: stopRecording, style: { marginLeft: 'auto', background: '#ef4444', color: '#fff', border: 'none', borderRadius: 6, padding: '4px 12px', fontSize: 12, cursor: 'pointer', fontWeight: 600 }, children: "Stop & send" })] })), _jsxs("div", { style: {
                             border: `1.5px solid ${isPaused || isBlocked ? '#e5e7eb' : '#bfdbfe'}`,
                             borderRadius: 16,
                             padding: '10px 12px 8px',
@@ -129,7 +178,52 @@ export const ChatScreen = ({ activeUser, messages, config, isPaused, isReported,
                                             justifyContent: 'center',
                                             flexShrink: 0,
                                             transition: 'background 0.15s',
-                                        }, title: "Send", children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M22 2L11 13M22 2L15 22L11 13L2 9L22 2Z", stroke: text.trim() && !isPaused && !isBlocked ? '#fff' : '#94a3b8', strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] })] }), (config.footerPoweredBy || config.branch) && (_jsxs("p", { style: { margin: '10px 0 0', textAlign: 'center', fontSize: 12, color: '#94a3b8' }, children: [config.footerPoweredBy, config.footerPoweredBy && config.branch ? ' · ' : '', config.branch && _jsx("span", { style: { fontWeight: 600, color: '#64748b' }, children: config.branch })] }))] }), showConfirm && (_jsx("div", { style: {
+                                        }, title: "Send", children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M22 2L11 13M22 2L15 22L11 13L2 9L22 2Z", stroke: text.trim() && !isPaused && !isBlocked ? '#fff' : '#94a3b8', strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] })] }), (config.footerPoweredBy || config.branch) && (_jsxs("p", { style: { margin: '10px 0 0', textAlign: 'center', fontSize: 12, color: '#94a3b8' }, children: [config.footerPoweredBy, config.footerPoweredBy && config.branch ? ' · ' : '', config.branch && _jsx("span", { style: { fontWeight: 600, color: '#64748b' }, children: config.branch })] }))] }), transferOpen && otherDevelopers.length > 0 && onTransferToDeveloper && (_jsx("div", { style: {
+                    position: 'absolute',
+                    inset: 0,
+                    background: 'rgba(0,0,0,0.45)',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    zIndex: 280,
+                    padding: 16,
+                }, children: _jsxs("div", { style: {
+                        background: '#fff',
+                        borderRadius: 16,
+                        padding: '18px 16px',
+                        width: '100%',
+                        maxWidth: 320,
+                        maxHeight: '70%',
+                        overflow: 'hidden',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        boxShadow: '0 16px 48px rgba(0,0,0,0.22)',
+                    }, children: [_jsx("div", { style: { fontWeight: 800, fontSize: 16, color: '#1a2332', marginBottom: 6 }, children: "Transfer chat to" }), _jsx("p", { style: { fontSize: 12, color: '#7b8fa1', margin: '0 0 12px', lineHeight: 1.5 }, children: "Assign this conversation to another developer. History is kept and a handoff note is added." }), _jsx("div", { className: "cw-scroll", style: { flex: 1, overflowY: 'auto', margin: '0 -4px' }, children: otherDevelopers.map(dev => (_jsxs("button", { type: "button", onClick: () => {
+                                    onTransferToDeveloper(dev);
+                                    setTransferOpen(false);
+                                }, style: {
+                                    width: '100%',
+                                    textAlign: 'left',
+                                    padding: '12px 12px',
+                                    marginBottom: 6,
+                                    border: '1px solid #eef0f5',
+                                    borderRadius: 12,
+                                    background: '#f8fafc',
+                                    cursor: 'pointer',
+                                    fontSize: 14,
+                                    fontWeight: 600,
+                                    color: '#1e293b',
+                                }, children: [dev.name, _jsx("span", { style: { display: 'block', fontSize: 11, fontWeight: 500, color: '#64748b', marginTop: 2 }, children: dev.designation })] }, dev.uid))) }), _jsx("button", { type: "button", onClick: () => setTransferOpen(false), style: {
+                                marginTop: 12,
+                                padding: '10px',
+                                borderRadius: 10,
+                                border: '1.5px solid #e5e7eb',
+                                background: '#fff',
+                                fontWeight: 600,
+                                fontSize: 13,
+                                color: '#475569',
+                                cursor: 'pointer',
+                            }, children: "Cancel" })] }) })), showConfirm && (_jsx("div", { style: {
                     position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.45)',
                     display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 300,
                     borderRadius: 'inherit',

package/dist/components/ChatWidget.js

@@ -19,7 +19,7 @@ import { BottomTabs } from './Tabs/BottomTabs';
 const DRAWER_W_NORMAL = 380;
 const DRAWER_W_MAX = 480;
 export const ChatWidget = ({ theme: localTheme }) => {
-    var _a, _b;
+    var _a, _b, _c, _d;
     /* SSR guard */
     const [mounted, setMounted] = useState(false);
     useEffect(() => { setMounted(true); }, []);
@@ -172,10 +172,39 @@ export const ChatWidget = ({ theme: localTheme }) => {
     const widgetConfig = data === null || data === void 0 ? void 0 : data.widget;
     const primaryColor = theme.primaryColor;
     const allUsers = data ? [...data.developers, ...data.users] : [];
+    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'
-        ? allUsers.filter(u => userListCtx === 'support' ? u.type === 'developer' : u.type === 'user')
+        ? allUsers.filter(u => {
+            if (userListCtx === 'support') {
+                if (viewerIsDev)
+                    return u.type === 'user';
+                return u.type === 'developer';
+            }
+            if (viewerIsDev) {
+                return u.type === 'developer' && u.uid !== viewerUid;
+            }
+            return u.type === 'user';
+        })
         : [];
+    const otherDevelopers = (_c = data === null || data === void 0 ? void 0 : data.developers.filter(d => d.uid !== viewerUid)) !== null && _c !== void 0 ? _c : [];
     const blockedUsers = allUsers.filter(u => blockedUids.includes(u.uid));
+    const handleTransferToDeveloper = useCallback((dev) => {
+        var _a;
+        if (!activeUser || !widgetConfig)
+            return;
+        const agent = ((_a = widgetConfig.viewerName) === null || _a === void 0 ? void 0 : _a.trim()) || 'Agent';
+        const transferNote = {
+            id: `tr_${Date.now()}_${Math.random().toString(36).slice(2)}`,
+            senderId: 'me',
+            receiverId: dev.uid,
+            text: `— ${agent} transferred this conversation from ${activeUser.name} to ${dev.name} —`,
+            timestamp: new Date().toISOString(),
+            type: 'text',
+            status: 'sent',
+        };
+        selectUser(dev, [...messages, transferNote]);
+    }, [activeUser, messages, selectUser, widgetConfig]);
     /* Position */
     const posStyle = theme.buttonPosition === 'bottom-left'
         ? { left: 24, right: 'auto' }
@@ -231,7 +260,7 @@ export const ChatWidget = ({ theme: localTheme }) => {
                                     zIndex: 20, display: 'flex', gap: 6,
                                 }, children: [_jsx(CornerBtn, { onClick: () => setIsMaximized(m => !m), title: isMaximized ? 'Minimize' : 'Maximize', children: isMaximized
                                             ? _jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M8 3v5H3M21 8h-5V3M3 16h5v5M16 21v-5h5", stroke: "#fff", strokeWidth: "2.2", strokeLinecap: "round" }) })
-                                            : _jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M8 3H5a2 2 0 00-2 2v3M21 8V5a2 2 0 00-2-2h-3M3 16v3a2 2 0 002 2h3M16 21h3a2 2 0 002-2v-3", stroke: "#fff", strokeWidth: "2.2", strokeLinecap: "round" }) }) }), _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, tickets: tickets })), screen === 'user-list' && (_jsx(UserListScreen, { context: userListCtx, users: filteredUsers, primaryColor: primaryColor, onBack: () => setScreen('home'), onSelectUser: handleSelectUser })), screen === 'chat' && activeUser && (_jsx(ChatScreen, { activeUser: activeUser, messages: messages, config: widgetConfig, isPaused: isPaused, isReported: isReported, isBlocked: isBlocked, onSend: sendMessage, onBack: () => { clearChat(); setScreen('home'); setActiveTab('home'); }, onClose: closeDrawer, onTogglePause: handleTogglePause, onReport: reportChat, onBlock: handleBlock, onStartCall: handleStartCall, onNavAction: handleNavFromMenu })), 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: handleSelectUser })), screen === 'tickets' && (_jsx(TicketScreen, { tickets: tickets, config: widgetConfig, onRaiseTicket: handleRaiseTicket })), screen === 'block-list' && (_jsx(BlockListScreen, { blockedUsers: blockedUsers, config: widgetConfig, onUnblock: handleUnblock, onBack: () => { setScreen('home'); setActiveTab('home'); } }))] })), widgetConfig.status === 'ACTIVE' &&
+                                            : _jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M8 3H5a2 2 0 00-2 2v3M21 8V5a2 2 0 00-2-2h-3M3 16v3a2 2 0 002 2h3M16 21h3a2 2 0 002-2v-3", stroke: "#fff", strokeWidth: "2.2", strokeLinecap: "round" }) }) }), _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, tickets: tickets })), screen === 'user-list' && (_jsx(UserListScreen, { context: userListCtx, users: filteredUsers, primaryColor: primaryColor, viewerType: (_d = widgetConfig.viewerType) !== null && _d !== void 0 ? _d : 'user', onBack: () => setScreen('home'), onSelectUser: handleSelectUser })), screen === 'chat' && activeUser && (_jsx(ChatScreen, { activeUser: activeUser, messages: messages, config: widgetConfig, isPaused: isPaused, isReported: isReported, isBlocked: isBlocked, onSend: sendMessage, onBack: () => { clearChat(); setScreen('home'); setActiveTab('home'); }, onClose: closeDrawer, onTogglePause: handleTogglePause, onReport: reportChat, onBlock: handleBlock, onStartCall: handleStartCall, onNavAction: handleNavFromMenu, otherDevelopers: otherDevelopers, onTransferToDeveloper: handleTransferToDeveloper })), 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: handleSelectUser })), screen === 'tickets' && (_jsx(TicketScreen, { tickets: tickets, config: widgetConfig, onRaiseTicket: handleRaiseTicket })), screen === 'block-list' && (_jsx(BlockListScreen, { blockedUsers: blockedUsers, config: widgetConfig, onUnblock: handleUnblock, onBack: () => { setScreen('home'); setActiveTab('home'); } }))] })), widgetConfig.status === 'ACTIVE' &&
                                 screen !== 'chat' &&
                                 screen !== 'call' &&
                                 screen !== 'user-list' &&

package/dist/components/HomeScreen/index.js

@@ -1,11 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useState, useMemo } from 'react';
 import { SlideNavMenu } from '../SlideNavMenu';
+import { truncateWords } from '../../utils/chat';
 export const HomeScreen = ({ config, onNavigate, tickets }) => {
+    var _a, _b, _c, _d;
     const [menuOpen, setMenuOpen] = useState(false);
     const showSupport = config.chatType === 'SUPPORT' || config.chatType === 'BOTH';
     const showChat = config.chatType === 'CHAT' || config.chatType === 'BOTH';
-    const continueItems = tickets.slice(0, 2);
+    const viewerIsDev = config.viewerType === 'developer';
+    const pendingTickets = useMemo(() => tickets
+        .filter(t => t.status === 'open' || t.status === 'in-progress')
+        .sort((a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime())
+        .slice(0, 5), [tickets]);
+    const brand = ((_a = config.brandName) === null || _a === void 0 ? void 0 : _a.trim()) || 'Ajaxter';
+    const promotionLead = ((_b = config.promotionLead) === null || _b === void 0 ? void 0 : _b.trim()) ||
+        'Need specialized help? Our teams are ready to assist you with any questions.';
+    const tourUrl = (_c = config.websiteTourUrl) === null || _c === void 0 ? void 0 : _c.trim();
     const handleCallUs = () => {
         var _a;
         const raw = (_a = config.supportPhone) === null || _a === void 0 ? void 0 : _a.trim();
@@ -13,7 +23,7 @@ export const HomeScreen = ({ config, onNavigate, tickets }) => {
             return;
         window.location.href = `tel:${raw.replace(/\s/g, '')}`;
     };
-    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', height: '100%', position: 'relative', overflow: 'hidden', background: '#fafbfc' }, children: [_jsx(SlideNavMenu, { open: menuOpen, onClose: () => setMenuOpen(false), primaryColor: config.primaryColor, chatType: config.chatType, onSelect: onNavigate }), _jsx("div", { style: {
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', height: '100%', position: 'relative', overflow: 'hidden', background: '#fafbfc' }, children: [_jsx(SlideNavMenu, { open: menuOpen, onClose: () => setMenuOpen(false), primaryColor: config.primaryColor, chatType: config.chatType, viewerType: (_d = config.viewerType) !== null && _d !== void 0 ? _d : 'user', onSelect: onNavigate }), _jsx("div", { style: {
                     flexShrink: 0,
                     padding: '14px 16px 10px',
                     display: 'flex',
@@ -41,7 +51,7 @@ export const HomeScreen = ({ config, onNavigate, tickets }) => {
                             color: '#0f172a',
                             letterSpacing: '-0.03em',
                             lineHeight: 1.2,
-                        }, children: config.welcomeTitle }), _jsx("p", { style: { margin: '0 0 28px', fontSize: 14, color: '#64748b', lineHeight: 1.55 }, children: config.welcomeSubtitle }), _jsx("h2", { style: { margin: '0 0 12px', fontSize: 15, fontWeight: 800, color: '#0f172a' }, children: "Continue Conversations" }), _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 28 }, children: continueItems.length > 0 ? (continueItems.map(t => (_jsx("button", { type: "button", onClick: () => onNavigate('ticket'), style: {
+                        }, children: config.welcomeTitle }), _jsx("p", { style: { margin: '0 0 28px', fontSize: 14, color: '#64748b', lineHeight: 1.55 }, children: config.welcomeSubtitle }), _jsx("h2", { style: { margin: '0 0 12px', fontSize: 15, fontWeight: 800, color: '#0f172a' }, children: "Continue Conversations" }), _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 28 }, children: pendingTickets.length > 0 ? (pendingTickets.map(t => (_jsxs("button", { type: "button", onClick: () => onNavigate('ticket'), style: {
                                 width: '100%',
                                 textAlign: 'left',
                                 padding: '14px 16px',
@@ -49,11 +59,9 @@ export const HomeScreen = ({ config, onNavigate, tickets }) => {
                                 border: 'none',
                                 background: '#e0f2fe',
                                 color: '#0369a1',
-                                fontSize: 14,
-                                fontWeight: 600,
                                 cursor: 'pointer',
                                 boxShadow: '0 1px 3px rgba(0,0,0,0.06)',
-                            }, children: t.title }, t.id)))) : (_jsxs(_Fragment, { children: [_jsx("div", { style: {
+                            }, children: [_jsx("div", { style: { fontSize: 14, fontWeight: 700, color: '#0c4a6e', marginBottom: 6 }, children: t.title }), _jsx("div", { style: { fontSize: 12, fontWeight: 500, color: '#64748b', lineHeight: 1.45 }, children: truncateWords(t.description, 50) })] }, t.id)))) : (_jsxs(_Fragment, { children: [_jsx("div", { style: {
                                         padding: '14px 16px',
                                         borderRadius: 14,
                                         background: '#e0f2fe',
@@ -67,7 +75,7 @@ export const HomeScreen = ({ config, onNavigate, tickets }) => {
                                         color: '#64748b',
                                         fontSize: 14,
                                         fontWeight: 500,
-                                    }, children: "Start via Raise ticket below" })] })) }), _jsx("h2", { style: { margin: '0 0 12px', fontSize: 15, fontWeight: 800, color: '#0f172a' }, children: "Talk to our experts" }), showSupport && (_jsxs("button", { type: "button", onClick: () => onNavigate('support'), style: {
+                                    }, children: "Start via Raise ticket below" })] })) }), _jsx("h2", { style: { margin: '0 0 12px', fontSize: 15, fontWeight: 800, color: '#0f172a' }, children: viewerIsDev ? 'Support tools' : 'Talk to our experts' }), showSupport && (_jsxs("button", { type: "button", onClick: () => onNavigate('support'), style: {
                             width: '100%',
                             display: 'flex',
                             alignItems: 'center',
@@ -83,7 +91,7 @@ export const HomeScreen = ({ config, onNavigate, tickets }) => {
                             fontWeight: 700,
                             cursor: 'pointer',
                             boxShadow: '0 2px 8px rgba(91,33,182,0.12)',
-                        }, children: [_jsx("span", { style: { fontSize: 18 }, children: "\uD83D\uDC64" }), "Support"] })), showChat && showSupport && (_jsx("button", { type: "button", onClick: () => onNavigate('conversation'), style: {
+                        }, children: [_jsx("span", { style: { fontSize: 18 }, children: "\uD83D\uDC64" }), viewerIsDev ? 'Provide Support' : 'Support'] })), showChat && showSupport && (_jsx("button", { type: "button", onClick: () => onNavigate('conversation'), style: {
                             width: '100%',
                             padding: '12px 16px',
                             marginBottom: 14,
@@ -94,7 +102,7 @@ export const HomeScreen = ({ config, onNavigate, tickets }) => {
                             fontSize: 14,
                             fontWeight: 600,
                             cursor: 'pointer',
-                        }, children: "New Conversation" })), showChat && !showSupport && (_jsxs("button", { type: "button", onClick: () => onNavigate('conversation'), style: {
+                        }, children: viewerIsDev ? 'Chat with a developer' : 'New Conversation' })), showChat && !showSupport && (_jsxs("button", { type: "button", onClick: () => onNavigate('conversation'), style: {
                             width: '100%',
                             display: 'flex',
                             alignItems: 'center',
@@ -115,18 +123,31 @@ export const HomeScreen = ({ config, onNavigate, tickets }) => {
                             background: 'linear-gradient(145deg, #fce7f3 0%, #e9d5ff 45%, #ddd6fe 100%)',
                             position: 'relative',
                             overflow: 'hidden',
-                        }, children: [_jsx("div", { style: { position: 'absolute', top: -20, right: -20, width: 100, height: 100, borderRadius: '50%', background: 'rgba(255,255,255,0.35)' } }), _jsx("p", { style: { margin: '0 0 16px', fontSize: 15, fontWeight: 700, color: '#4c1d95', lineHeight: 1.45, position: 'relative' }, children: "Need specialized help? Our teams are ready to assist you with any questions." }), _jsxs("button", { type: "button", onClick: handleCallUs, disabled: !config.supportPhone, style: {
-                                    display: 'inline-flex',
-                                    alignItems: 'center',
-                                    gap: 8,
-                                    padding: '10px 18px',
-                                    borderRadius: 12,
-                                    border: 'none',
-                                    background: config.supportPhone ? config.primaryColor : '#94a3b8',
-                                    color: '#fff',
-                                    fontSize: 14,
-                                    fontWeight: 700,
-                                    cursor: config.supportPhone ? 'pointer' : 'not-allowed',
-                                    position: 'relative',
-                                }, children: [_jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 10.8a19.79 19.79 0 01-3.07-8.68A2 2 0 012 0h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.09 7.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 14.92v2z", fill: "#fff" }) }), "Call Us"] })] })] })] }));
+                        }, children: [_jsx("div", { style: { position: 'absolute', top: -20, right: -20, width: 100, height: 100, borderRadius: '50%', background: 'rgba(255,255,255,0.35)' } }), _jsx("p", { style: { margin: '0 0 10px', fontSize: 15, fontWeight: 700, color: '#4c1d95', lineHeight: 1.45, position: 'relative' }, children: promotionLead }), _jsxs("p", { style: { margin: '0 0 16px', fontSize: 13, fontWeight: 500, color: '#5b21b6', lineHeight: 1.5, position: 'relative' }, children: [_jsx("strong", { style: { fontWeight: 800 }, children: brand }), " \u2014 embedded chat for your workspace.", ' ', _jsx("span", { style: { whiteSpace: 'nowrap' }, children: "Free for users." }), " 24\u00D77 availability. Dedicated workspace experience."] }), _jsxs("div", { style: { display: 'flex', flexWrap: 'wrap', gap: 10, position: 'relative' }, children: [tourUrl && (_jsx("a", { href: tourUrl, target: "_blank", rel: "noopener noreferrer", style: {
+                                            display: 'inline-flex',
+                                            alignItems: 'center',
+                                            justifyContent: 'center',
+                                            gap: 6,
+                                            padding: '10px 16px',
+                                            borderRadius: 12,
+                                            border: 'none',
+                                            background: '#fff',
+                                            color: '#5b21b6',
+                                            fontSize: 13,
+                                            fontWeight: 700,
+                                            textDecoration: 'none',
+                                            boxShadow: '0 2px 8px rgba(91,33,182,0.15)',
+                                        }, children: "Take a Website Tour" })), _jsxs("button", { type: "button", onClick: handleCallUs, disabled: !config.supportPhone, style: {
+                                            display: 'inline-flex',
+                                            alignItems: 'center',
+                                            gap: 8,
+                                            padding: '10px 18px',
+                                            borderRadius: 12,
+                                            border: 'none',
+                                            background: config.supportPhone ? config.primaryColor : '#94a3b8',
+                                            color: '#fff',
+                                            fontSize: 14,
+                                            fontWeight: 700,
+                                            cursor: config.supportPhone ? 'pointer' : 'not-allowed',
+                                        }, children: [_jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 10.8a19.79 19.79 0 01-3.07-8.68A2 2 0 012 0h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.09 7.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 14.92v2z", fill: "#fff" }) }), "Call Us"] })] })] })] })] }));
 };

package/dist/components/SlideNavMenu.d.ts

@@ -5,6 +5,8 @@ export interface SlideNavMenuProps {
     onClose: () => void;
     primaryColor: string;
     chatType: ChatType;
+    /** When `developer`, relabels the first two entries for staff */
+    viewerType?: 'user' | 'developer';
     onSelect: (ctx: UserListContext | 'ticket') => void;
     /** When set, shows “Back to home” at the bottom (e.g. chat screen) */
     onBackHome?: () => void;

package/dist/components/SlideNavMenu.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-export const SlideNavMenu = ({ open, onClose, primaryColor, chatType, onSelect, onBackHome, }) => {
+export const SlideNavMenu = ({ open, onClose, primaryColor, chatType, viewerType = 'user', onSelect, onBackHome, }) => {
     const showSupport = chatType === 'SUPPORT' || chatType === 'BOTH';
     const showChat = chatType === 'CHAT' || chatType === 'BOTH';
+    const isStaff = viewerType === 'developer';
     const items = [
-        showSupport ? { key: 'support', icon: '🛠', title: 'Need Support' } : null,
-        showChat ? { key: 'conversation', icon: '💬', title: 'New Conversation' } : null,
+        showSupport ? { key: 'support', icon: '🛠', title: isStaff ? 'Provide Support' : 'Need Support' } : null,
+        showChat ? { key: 'conversation', icon: '💬', title: isStaff ? 'Chat with developer' : 'New Conversation' } : null,
         { key: 'ticket', icon: '🎫', title: 'Raise ticket' },
     ];
     if (!open)

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

@@ -4,6 +4,8 @@ interface UserListScreenProps {
     context: UserListContext;
     users: ChatUser[];
     primaryColor: string;
+    /** `developer` = staff using the widget (lists customers vs teammates) */
+    viewerType?: 'user' | 'developer';
     onBack: () => void;
     onSelectUser: (user: ChatUser) => void;
 }

package/dist/components/UserListScreen/index.js

@@ -1,8 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { avatarColor, initials } from '../../utils/chat';
-export const UserListScreen = ({ context, users, primaryColor, onBack, onSelectUser, }) => {
-    const title = context === 'support' ? 'Need Support' : 'New Conversation';
-    const subtitle = context === 'support' ? 'Choose a support agent' : 'Choose a colleague';
+export const UserListScreen = ({ context, users, primaryColor, viewerType = 'user', onBack, onSelectUser, }) => {
+    const isStaff = viewerType === 'developer';
+    const title = context === 'support'
+        ? (isStaff ? 'Provide Support' : 'Need Support')
+        : (isStaff ? 'Developers' : 'New Conversation');
+    const subtitle = context === 'support'
+        ? (isStaff ? 'All chat users — choose who to help' : 'Choose a support agent')
+        : (isStaff ? 'Chat with another developer or coordinate handoff' : 'Choose a colleague');
     return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', height: '100%', animation: 'cw-slideIn 0.22s ease' }, children: [_jsxs("div", { style: { background: `linear-gradient(135deg,${primaryColor},${primaryColor}cc)`, padding: '14px 18px', display: 'flex', alignItems: 'center', gap: 12, flexShrink: 0 }, children: [_jsx(BackBtn, { onClick: onBack }), _jsxs("div", { children: [_jsx("div", { style: { fontWeight: 700, fontSize: 16, color: '#fff' }, children: title }), _jsx("div", { style: { fontSize: 12, color: 'rgba(255,255,255,0.8)' }, children: subtitle })] })] }), _jsx("div", { style: { flex: 1, overflowY: 'auto' }, children: users.length === 0 ? (_jsx(Empty, {})) : users.map((u, i) => (_jsxs("button", { onClick: () => onSelectUser(u), style: {
                         width: '100%', padding: '13px 18px', display: 'flex',
                         alignItems: 'center', gap: 13, background: 'transparent',

package/dist/index.d.ts

@@ -13,7 +13,8 @@ export { SlideNavMenu } from './components/SlideNavMenu';
 export { useChat } from './hooks/useChat';
 export { useWebRTC } from './hooks/useWebRTC';
 export { useRemoteConfig } from './hooks/useRemoteConfig';
+export { shouldShowPrivacyNotice, dismissPrivacyNotice, getPrivacyDismissedAt } from './utils/privacyConsent';
 export { loadLocalConfig, fetchRemoteChatData } from './config';
 export { mergeTheme, darken } from './utils/theme';
-export { avatarColor, initials, formatTime, formatDate, generateTranscript, downloadText } from './utils/chat';
+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';

package/dist/index.js

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

package/dist/types/index.d.ts

@@ -14,6 +14,25 @@ export interface WidgetConfig {
     footerPoweredBy?: string;
     /** Shown on home “Call Us” (tel: link) */
     supportPhone?: string;
+    /**
+     * Who is using the widget. `developer` = support staff: “Need Support” becomes “Provide Support”
+     * and lists customers; “New Conversation” lists other developers (excl. viewerUid).
+     */
+    viewerType?: 'user' | 'developer';
+    /** Current user id when viewerType is developer — excluded from developer pick lists */
+    viewerUid?: string;
+    /** Display name for transfer notes (optional) */
+    viewerName?: string;
+    /** Privacy Policy URL (linked from chat consent banner) */
+    privacyPolicyUrl?: string;
+    /** Set false to hide the consent note above the composer */
+    showPrivacyNotice?: boolean;
+    /** Product brand (e.g. Ajaxter) */
+    brandName?: string;
+    /** Home promotion: “Take a Website Tour” link */
+    websiteTourUrl?: string;
+    /** Optional override for the lead line in the promotion card */
+    promotionLead?: string;
     allowVoiceMessage: boolean;
     allowAttachment: boolean;
     allowEmoji: boolean;

package/dist/utils/chat.d.ts

@@ -9,5 +9,7 @@ export declare function formatTime(ts: string | Date): string;
 export declare function formatDate(ts: string | Date): string;
 /** Generate a plain-text transcript from messages */
 export declare function generateTranscript(messages: ChatMessage[], peer: ChatUser, myName?: string): string;
+/** Truncate to max words, append ellipsis (…) if shortened */
+export declare function truncateWords(text: string, maxWords: number): string;
 /** Trigger a file download in the browser */
 export declare function downloadText(content: string, filename: string): void;

package/dist/utils/chat.js

@@ -50,6 +50,15 @@ export function generateTranscript(messages, peer, myName = 'Me') {
     }).join('\n');
     return header + body;
 }
+/** Truncate to max words, append ellipsis (…) if shortened */
+export function truncateWords(text, maxWords) {
+    const w = text.trim().split(/\s+/).filter(Boolean);
+    if (w.length === 0)
+        return '';
+    if (w.length <= maxWords)
+        return w.join(' ');
+    return `${w.slice(0, maxWords).join(' ')}…`;
+}
 /** Trigger a file download in the browser */
 export function downloadText(content, filename) {
     const blob = new Blob([content], { type: 'text/plain' });

package/dist/utils/privacyConsent.d.ts

@@ -0,0 +1,4 @@
+export declare function getPrivacyDismissedAt(widgetId: string): number | null;
+/** After dismiss, banner stays hidden until one hour has passed */
+export declare function shouldShowPrivacyNotice(widgetId: string): boolean;
+export declare function dismissPrivacyNotice(widgetId: string): void;

package/dist/utils/privacyConsent.js

@@ -0,0 +1,33 @@
+const HOUR_MS = 60 * 60 * 1000;
+function key(widgetId) {
+    return `ajaxter_privacy_dismiss_${widgetId}`;
+}
+export function getPrivacyDismissedAt(widgetId) {
+    if (typeof window === 'undefined')
+        return null;
+    try {
+        const v = localStorage.getItem(key(widgetId));
+        if (v == null)
+            return null;
+        const n = parseInt(v, 10);
+        return Number.isFinite(n) ? n : null;
+    }
+    catch (_a) {
+        return null;
+    }
+}
+/** After dismiss, banner stays hidden until one hour has passed */
+export function shouldShowPrivacyNotice(widgetId) {
+    const at = getPrivacyDismissedAt(widgetId);
+    if (at == null)
+        return true;
+    return Date.now() - at >= HOUR_MS;
+}
+export function dismissPrivacyNotice(widgetId) {
+    try {
+        localStorage.setItem(key(widgetId), String(Date.now()));
+    }
+    catch (_a) {
+        /* ignore quota / private mode */
+    }
+}

package/package.json

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