ajaxter-chat 3.0.5 → 3.0.6

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

@@ -3,11 +3,13 @@ import React, { useState, useRef, useEffect, useCallback } from 'react';
 import { avatarColor, initials, formatTime, formatDate, generateTranscript, downloadText } from '../../utils/chat';
 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);
@@ -96,10 +98,14 @@ 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: [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 +135,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

@@ -2,9 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState } from 'react';
 import { SlideNavMenu } from '../SlideNavMenu';
 export const HomeScreen = ({ config, onNavigate, tickets }) => {
+    var _a;
     const [menuOpen, setMenuOpen] = useState(false);
     const showSupport = config.chatType === 'SUPPORT' || config.chatType === 'BOTH';
     const showChat = config.chatType === 'CHAT' || config.chatType === 'BOTH';
+    const viewerIsDev = config.viewerType === 'developer';
     const continueItems = tickets.slice(0, 2);
     const handleCallUs = () => {
         var _a;
@@ -13,7 +15,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: (_a = config.viewerType) !== null && _a !== void 0 ? _a : 'user', onSelect: onNavigate }), _jsx("div", { style: {
                     flexShrink: 0,
                     padding: '14px 16px 10px',
                     display: 'flex',
@@ -67,7 +69,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 +85,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 +96,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',

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/types/index.d.ts

@@ -14,6 +14,15 @@ 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;
     allowVoiceMessage: boolean;
     allowAttachment: boolean;
     allowEmoji: boolean;

package/package.json

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

@@ -9,6 +9,9 @@
     "buttonPosition": "bottom-right",
     "welcomeTitle": "Hi there 👋",
     "welcomeSubtitle": "Need help? Start a conversation:",
+    "viewerType": "user",
+    "viewerUid": "",
+    "viewerName": "",
     "branch": "Mumbai HQ",
     "footerPoweredBy": "Answers by",
     "supportPhone": "+919876543210",

package/src/components/ChatScreen/index.tsx

@@ -20,16 +20,21 @@ 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 const ChatScreen: React.FC<ChatScreenProps> = ({
   activeUser, messages, config, isPaused, isReported, isBlocked,
   onSend, onBack, onClose, onTogglePause, onReport, onBlock, onStartCall, onNavAction,
+  otherDevelopers = [], onTransferToDeveloper,
 }) => {
   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<'report'|'block'|'pause'|null>(null);
@@ -114,6 +119,12 @@ export const ChatScreen: React.FC<ChatScreenProps> = ({
   const peerInit   = initials(activeUser.name);
   const grouped = groupByDate(messages);
 
+  const viewerIsDev = config.viewerType === 'developer';
+  const headerRole =
+    viewerIsDev
+      ? (activeUser.type === 'user' ? 'Customer' : 'Developer')
+      : 'Support';
+
   return (
     <div style={{ display:'flex', flexDirection:'column', height:'100%', animation:'cw-slideIn 0.22s ease', position:'relative', overflow: 'hidden' }}>
 
@@ -122,6 +133,7 @@ export const ChatScreen: React.FC<ChatScreenProps> = ({
         onClose={() => setSlideMenuOpen(false)}
         primaryColor={config.primaryColor}
         chatType={config.chatType}
+        viewerType={config.viewerType ?? 'user'}
         onSelect={onNavAction}
         onBackHome={onBack}
       />
@@ -149,7 +161,7 @@ export const ChatScreen: React.FC<ChatScreenProps> = ({
           <div style={{ fontSize:11, color:'rgba(255,255,255,0.8)' }}>{activeUser.designation}</div>
         </div>
 
-        <span style={{ fontSize:13, fontWeight:700, color:'#fff', opacity:0.95, flexShrink:0 }}>Support</span>
+        <span style={{ fontSize:13, fontWeight:700, color:'#fff', opacity:0.95, flexShrink:0 }}>{headerRole}</span>
 
         {config.allowWebCall && (
           <button type="button" onClick={() => onStartCall(false)} style={hdrBtn} title="Voice Call">
@@ -173,6 +185,13 @@ export const ChatScreen: React.FC<ChatScreenProps> = ({
           {config.allowTranscriptDownload && (
             <MenuItem icon="📥" label="Download Transcript" onClick={handleTranscript} />
           )}
+          {viewerIsDev && activeUser.type === 'user' && otherDevelopers.length > 0 && onTransferToDeveloper && (
+            <MenuItem
+              icon="🔀"
+              label="Transfer to developer"
+              onClick={() => { setShowMenu(false); setTransferOpen(true); }}
+            />
+          )}
           <MenuItem icon={isPaused ? '▶️' : '⏸'} label={isPaused ? 'Resume Chat' : 'Pause Chat'} onClick={() => { setShowMenu(false); setShowConfirm('pause'); }} />
           {config.allowReport && !isReported && (
             <MenuItem icon="⚠️" label="Report Chat"         onClick={() => { setShowMenu(false); setShowConfirm('report'); }} />
@@ -335,6 +354,90 @@ export const ChatScreen: React.FC<ChatScreenProps> = ({
         )}
       </div>
 
+      {transferOpen && otherDevelopers.length > 0 && onTransferToDeveloper && (
+        <div
+          style={{
+            position: 'absolute',
+            inset: 0,
+            background: 'rgba(0,0,0,0.45)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            zIndex: 280,
+            padding: 16,
+          }}
+        >
+          <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)',
+            }}
+          >
+            <div style={{ fontWeight: 800, fontSize: 16, color: '#1a2332', marginBottom: 6 }}>
+              Transfer chat to
+            </div>
+            <p style={{ fontSize: 12, color: '#7b8fa1', margin: '0 0 12px', lineHeight: 1.5 }}>
+              Assign this conversation to another developer. History is kept and a handoff note is added.
+            </p>
+            <div className="cw-scroll" style={{ flex: 1, overflowY: 'auto', margin: '0 -4px' }}>
+              {otherDevelopers.map(dev => (
+                <button
+                  key={dev.uid}
+                  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',
+                  }}
+                >
+                  {dev.name}
+                  <span style={{ display: 'block', fontSize: 11, fontWeight: 500, color: '#64748b', marginTop: 2 }}>
+                    {dev.designation}
+                  </span>
+                </button>
+              ))}
+            </div>
+            <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',
+              }}
+            >
+              Cancel
+            </button>
+          </div>
+        </div>
+      )}
+
       {showConfirm && (
         <div style={{
           position:'absolute', inset:0, background:'rgba(0,0,0,0.45)',

package/src/components/ChatWidget.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useState, useEffect, useCallback, useRef } from 'react';
-import { ChatWidgetProps, BottomTab, Screen, UserListContext, ChatUser, Ticket, RecentChat } from '../types';
+import { ChatWidgetProps, BottomTab, Screen, UserListContext, ChatUser, Ticket, RecentChat, ChatMessage } from '../types';
 import { loadLocalConfig } from '../config';
 import { mergeTheme } from '../utils/theme';
 import { useRemoteConfig } from '../hooks/useRemoteConfig';
@@ -196,11 +196,40 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme }) =>
   const primaryColor   = theme.primaryColor;
 
   const allUsers     = data ? [...data.developers, ...data.users]     : [];
+  const viewerIsDev  = widgetConfig?.viewerType === 'developer';
+  const viewerUid    = 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 = data?.developers.filter(d => d.uid !== viewerUid) ?? [];
   const blockedUsers  = allUsers.filter(u => blockedUids.includes(u.uid));
 
+  const handleTransferToDeveloper = useCallback((dev: ChatUser) => {
+    if (!activeUser || !widgetConfig) return;
+    const agent = widgetConfig.viewerName?.trim() || 'Agent';
+    const transferNote: ChatMessage = {
+      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: React.CSSProperties = theme.buttonPosition === 'bottom-left'
     ? { left: 24, right: 'auto' }
@@ -385,6 +414,7 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme }) =>
                       context={userListCtx}
                       users={filteredUsers}
                       primaryColor={primaryColor}
+                      viewerType={widgetConfig.viewerType ?? 'user'}
                       onBack={() => setScreen('home')}
                       onSelectUser={handleSelectUser}
                     />
@@ -406,6 +436,8 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme }) =>
                       onBlock={handleBlock}
                       onStartCall={handleStartCall}
                       onNavAction={handleNavFromMenu}
+                      otherDevelopers={otherDevelopers}
+                      onTransferToDeveloper={handleTransferToDeveloper}
                     />
                   )}
 

package/src/components/HomeScreen/index.tsx

@@ -12,6 +12,7 @@ export const HomeScreen: React.FC<HomeScreenProps> = ({ config, onNavigate, tick
   const [menuOpen, setMenuOpen] = useState(false);
   const showSupport = config.chatType === 'SUPPORT' || config.chatType === 'BOTH';
   const showChat = config.chatType === 'CHAT' || config.chatType === 'BOTH';
+  const viewerIsDev = config.viewerType === 'developer';
 
   const continueItems = tickets.slice(0, 2);
 
@@ -28,6 +29,7 @@ export const HomeScreen: React.FC<HomeScreenProps> = ({ config, onNavigate, tick
         onClose={() => setMenuOpen(false)}
         primaryColor={config.primaryColor}
         chatType={config.chatType}
+        viewerType={config.viewerType ?? 'user'}
         onSelect={onNavigate}
       />
 
@@ -142,8 +144,10 @@ export const HomeScreen: React.FC<HomeScreenProps> = ({ config, onNavigate, tick
           )}
         </div>
 
-        {/* Talk to our experts */}
-        <h2 style={{ margin: '0 0 12px', fontSize: 15, fontWeight: 800, color: '#0f172a' }}>Talk to our experts</h2>
+        {/* Talk to our experts / staff tools */}
+        <h2 style={{ margin: '0 0 12px', fontSize: 15, fontWeight: 800, color: '#0f172a' }}>
+          {viewerIsDev ? 'Support tools' : 'Talk to our experts'}
+        </h2>
 
         {showSupport && (
           <button
@@ -168,7 +172,7 @@ export const HomeScreen: React.FC<HomeScreenProps> = ({ config, onNavigate, tick
             }}
           >
             <span style={{ fontSize: 18 }}>👤</span>
-            Support
+            {viewerIsDev ? 'Provide Support' : 'Support'}
           </button>
         )}
 
@@ -189,7 +193,7 @@ export const HomeScreen: React.FC<HomeScreenProps> = ({ config, onNavigate, tick
               cursor: 'pointer',
             }}
           >
-            New Conversation
+            {viewerIsDev ? 'Chat with a developer' : 'New Conversation'}
           </button>
         )}
 

package/src/components/SlideNavMenu.tsx

@@ -6,6 +6,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;
@@ -16,15 +18,17 @@ export const SlideNavMenu: React.FC<SlideNavMenuProps> = ({
   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: Array<{ key: UserListContext | 'ticket'; icon: string; title: string } | null> = [
-    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' },
   ];
 

package/src/components/UserListScreen/index.tsx

@@ -6,15 +6,22 @@ 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;
 }
 
 export const UserListScreen: React.FC<UserListScreenProps> = ({
-  context, users, primaryColor, onBack, onSelectUser,
+  context, users, primaryColor, viewerType = 'user', onBack, onSelectUser,
 }) => {
-  const title    = context === 'support' ? 'Need Support' : 'New Conversation';
-  const subtitle = context === 'support' ? 'Choose a support agent' : 'Choose a colleague';
+  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 (
     <div style={{ display:'flex', flexDirection:'column', height:'100%', animation:'cw-slideIn 0.22s ease' }}>

package/src/types/index.ts

@@ -15,6 +15,15 @@ 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;
   allowVoiceMessage: boolean;
   allowAttachment: boolean;
   allowEmoji: boolean;