ajaxter-chat 3.1.0 → 3.2.0

package/dist/components/ChatWidget.js

@@ -60,26 +60,104 @@ const BottomTabs_1 = require("./Tabs/BottomTabs");
 const ViewerBlockedScreen_1 = require("./ViewerBlockedScreen");
 const PermissionsGateScreen_1 = require("./PermissionsGateScreen");
 const widgetPermissions_1 = require("../utils/widgetPermissions");
-/** WebSocket server URL — override via env NEXT_PUBLIC_SOCKET_URL / REACT_APP_SOCKET_URL */
-function getSocketUrl() {
-    var _a, _b;
-    if (typeof process !== 'undefined' && process.env) {
-        return ((_b = (_a = process.env['NEXT_PUBLIC_SOCKET_URL']) !== null && _a !== void 0 ? _a : process.env['REACT_APP_SOCKET_URL']) !== null && _b !== void 0 ? _b : 'http://localhost:3005');
+function getPanelGeometry(displayMode, buttonPosition, ajaxterMaximized) {
+    var _a, _b, _c, _d;
+    const w = (_b = (_a = ajaxterMaximized === null || ajaxterMaximized === void 0 ? void 0 : ajaxterMaximized.desktop) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 550;
+    const h = (_d = (_c = ajaxterMaximized === null || ajaxterMaximized === void 0 ? void 0 : ajaxterMaximized.desktop) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : 600;
+    if (displayMode === 'popup') {
+        // Centered modal / popup
+        return {
+            panel: {
+                position: 'fixed',
+                top: '50%',
+                left: '50%',
+                transform: 'translate(-50%, -50%)',
+                width: `min(${w}px, 96vw)`,
+                height: `min(${h}px, 94vh)`,
+                maxWidth: '100vw',
+                maxHeight: '100vh',
+                borderRadius: 16,
+                boxShadow: '0 24px 64px rgba(0,0,0,0.28)',
+                zIndex: 9998,
+                backgroundColor: '#fff',
+                display: 'flex',
+                flexDirection: 'column',
+                overflow: 'hidden',
+            },
+            enterClass: 'cw-popup-enter',
+            exitClass: 'cw-popup-exit',
+            backdrop: {
+                position: 'fixed', inset: 0, zIndex: 9997,
+                backgroundColor: 'rgba(0,0,0,0.45)',
+                backdropFilter: 'blur(2px)',
+            },
+        };
+    }
+    if (displayMode === 'inline') {
+        // Embedded — no fixed positioning, caller wraps it
+        return {
+            panel: {
+                position: 'relative',
+                width: '100%',
+                height: '100%',
+                display: 'flex',
+                flexDirection: 'column',
+                overflow: 'hidden',
+                backgroundColor: '#fff',
+            },
+            enterClass: '',
+            exitClass: '',
+        };
     }
-    return 'http://localhost:3005';
+    // Default: slider (side drawer)
+    const isLeft = buttonPosition === 'bottom-left';
+    return {
+        panel: {
+            position: 'fixed',
+            top: 0, bottom: 0,
+            [isLeft ? 'left' : 'right']: 0,
+            width: 'min(380px, 100vw)',
+            maxWidth: '100vw',
+            borderTopLeftRadius: isLeft ? 0 : 16,
+            borderBottomLeftRadius: isLeft ? 0 : 16,
+            borderTopRightRadius: isLeft ? 16 : 0,
+            borderBottomRightRadius: isLeft ? 16 : 0,
+            boxShadow: isLeft ? '4px 0 40px rgba(0,0,0,0.18)' : '-4px 0 40px rgba(0,0,0,0.18)',
+            zIndex: 9998,
+            backgroundColor: '#fff',
+            display: 'flex',
+            flexDirection: 'column',
+            overflow: 'hidden',
+        },
+        enterClass: isLeft ? 'cw-slideInLeft' : 'cw-slideInRight',
+        exitClass: isLeft ? 'cw-slideOutLeft' : 'cw-slideOutRight',
+        backdrop: {
+            position: 'fixed', inset: 0, zIndex: 9997,
+            backgroundColor: 'rgba(0,0,0,0.35)',
+        },
+    };
 }
+// ─── ChatWidget ───────────────────────────────────────────────────────────────
 const ChatWidget = ({ theme: localTheme, viewer }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
-    /* SSR guard */
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
     const [mounted, setMounted] = (0, react_1.useState)(false);
     (0, react_1.useEffect)(() => { setMounted(true); }, []);
-    const { apiKey, widgetId } = (0, config_1.loadLocalConfig)();
+    const { apiKey, widgetId, socketUrl } = (0, config_1.loadLocalConfig)();
     const { data, loading: cfgLoading, error: cfgError } = (0, useRemoteConfig_1.useRemoteConfig)(apiKey, widgetId);
     const theme = (0, theme_1.mergeTheme)((data === null || data === void 0 ? void 0 : data.widget) ? {
         primaryColor: data.widget.primaryColor,
         buttonLabel: data.widget.buttonLabel,
         buttonPosition: data.widget.buttonPosition,
     } : undefined, localTheme);
+    // Pull real colours from Ajaxter settings if available
+    const headerBg = (_d = (_c = (_b = (_a = data === null || data === void 0 ? void 0 : data.widget.ajaxterSettings) === null || _a === void 0 ? void 0 : _a.theme) === null || _b === void 0 ? void 0 : _b.header) === null || _c === void 0 ? void 0 : _c.background) !== null && _d !== void 0 ? _d : theme.primaryColor;
+    const agentBg = (_h = (_g = (_f = (_e = data === null || data === void 0 ? void 0 : data.widget.ajaxterSettings) === null || _e === void 0 ? void 0 : _e.theme) === null || _f === void 0 ? void 0 : _f.agent) === null || _g === void 0 ? void 0 : _g.messageBackground) !== null && _h !== void 0 ? _h : '#54aadd';
+    const visitorBg = (_m = (_l = (_k = (_j = data === null || data === void 0 ? void 0 : data.widget.ajaxterSettings) === null || _j === void 0 ? void 0 : _j.theme) === null || _k === void 0 ? void 0 : _k.visitor) === null || _l === void 0 ? void 0 : _l.messageBackground) !== null && _m !== void 0 ? _m : '#e5e5e5';
+    const displayMode = (_o = data === null || data === void 0 ? void 0 : data.widget.displayMode) !== null && _o !== void 0 ? _o : 'slider';
+    const ajaxterSettings = data === null || data === void 0 ? void 0 : data.widget.ajaxterSettings;
+    // Minimized button style from Ajaxter settings
+    const minimizedDesktop = (_p = ajaxterSettings === null || ajaxterSettings === void 0 ? void 0 : ajaxterSettings.minimized) === null || _p === void 0 ? void 0 : _p.desktop;
+    const btnType = (_q = minimizedDesktop === null || minimizedDesktop === void 0 ? void 0 : minimizedDesktop.type) !== null && _q !== void 0 ? _q : 'slide';
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const [closing, setClosing] = (0, react_1.useState)(false);
     const [callMinimized, setCallMinimized] = (0, react_1.useState)(false);
@@ -92,60 +170,56 @@ const ChatWidget = ({ theme: localTheme, viewer }) => {
     const [listEntranceAnimation, setListEntranceAnimation] = (0, react_1.useState)(false);
     const [permissionsOk, setPermissionsOk] = (0, react_1.useState)(false);
     const [socketStatus, setSocketStatus] = (0, react_1.useState)('disconnected');
-    const [tickets, setTickets] = (0, react_1.useState)((_a = data === null || data === void 0 ? void 0 : data.sampleTickets) !== null && _a !== void 0 ? _a : []);
+    const [typingUsers, setTypingUsers] = (0, react_1.useState)(new Set());
+    const [tickets, setTickets] = (0, react_1.useState)([]);
     const [recentChats, setRecentChats] = (0, react_1.useState)([]);
-    const [blockedUids, setBlockedUids] = (0, react_1.useState)((_b = data === null || data === void 0 ? void 0 : data.blockedUsers) !== null && _b !== void 0 ? _b : []);
-    /* Sync remote data into local state once loaded */
+    const [blockedUids, setBlockedUids] = (0, react_1.useState)([]);
+    // Sync remote data once loaded
     (0, react_1.useEffect)(() => {
         var _a, _b, _c, _d;
-        if (data) {
-            setTickets(data.sampleTickets);
-            setBlockedUids(data.blockedUsers);
-            const pid = (_a = viewer === null || viewer === void 0 ? void 0 : viewer.projectId) === null || _a === void 0 ? void 0 : _a.trim();
-            const devs = (_b = data.developers) !== null && _b !== void 0 ? _b : [];
-            const usr = pid ? ((_c = data.users) !== null && _c !== void 0 ? _c : []).filter(u => u.project === pid) : ((_d = data.users) !== null && _d !== void 0 ? _d : []);
-            const all = [...devs, ...usr];
-            const recents = Object.entries(data.sampleChats).map(([uid, msgs]) => {
-                const user = all.find(u => u.uid === uid);
-                if (!user || msgs.length === 0)
-                    return null;
-                const last = msgs[msgs.length - 1];
-                return {
-                    id: `rc_${uid}`,
-                    user,
-                    lastMessage: last.text,
-                    lastTime: last.timestamp,
-                    unread: Math.floor(Math.random() * 3),
-                    isPaused: false,
-                };
-            }).filter(Boolean);
-            setRecentChats(recents);
-        }
+        if (!data)
+            return;
+        setTickets(data.sampleTickets);
+        setBlockedUids(data.blockedUsers);
+        const pid = (_a = viewer === null || viewer === void 0 ? void 0 : viewer.projectId) === null || _a === void 0 ? void 0 : _a.trim();
+        const devs = (_b = data.developers) !== null && _b !== void 0 ? _b : [];
+        const usr = pid ? ((_c = data.users) !== null && _c !== void 0 ? _c : []).filter(u => u.project === pid) : ((_d = data.users) !== null && _d !== void 0 ? _d : []);
+        const all = [...devs, ...usr];
+        const recents = Object.entries(data.sampleChats).map(([uid, msgs]) => {
+            const user = all.find(u => u.uid === uid);
+            if (!user || msgs.length === 0)
+                return null;
+            const last = msgs[msgs.length - 1];
+            return { id: `rc_${uid}`, user, lastMessage: last.text, lastTime: last.timestamp, unread: 0, isPaused: false };
+        }).filter(Boolean);
+        setRecentChats(recents);
     }, [data, viewer === null || viewer === void 0 ? void 0 : viewer.projectId]);
-    /* ── Socket setup ───────────────────────────────────────────────────── */
-    const viewerUidForSocket = ((_e = (_c = viewer === null || viewer === void 0 ? void 0 : viewer.uid) !== null && _c !== void 0 ? _c : (_d = data === null || data === void 0 ? void 0 : data.widget) === null || _d === void 0 ? void 0 : _d.viewerUid) !== null && _e !== void 0 ? _e : '').trim();
-    const { joinRoom, leaveRoom, emitMessage, emitPauseToggle, emitReport, emitBlock, emitUnblock, emitTransfer, emitCallOffer, emitCallAnswer, emitIceCandidate, emitCallEnd, emitAddParticipant, status: _socketStatus, } = (0, useSocket_1.useSocket)({
+    // ── Socket ────────────────────────────────────────────────────────────────
+    const viewerUidForSocket = ((_t = (_r = viewer === null || viewer === void 0 ? void 0 : viewer.uid) !== null && _r !== void 0 ? _r : (_s = data === null || data === void 0 ? void 0 : data.widget) === null || _s === void 0 ? void 0 : _s.viewerUid) !== null && _t !== void 0 ? _t : '').trim();
+    const { joinRoom, leaveRoom, emitMessage, emitPauseToggle, emitReport, emitBlock, emitUnblock, emitTransfer, emitCallOffer, emitCallAnswer, emitIceCandidate, emitCallEnd, emitAddParticipant, emitPresence, emitTicketCreate, emitTicketUpdate, status: _socketStatus, } = (0, useSocket_1.useSocket)({
         widgetId,
         viewerUid: viewerUidForSocket,
-        serverUrl: getSocketUrl(),
+        serverUrl: socketUrl,
         onMessage: (msg) => {
             receiveMessage(msg);
             if (messageSoundEnabled && msg.senderId !== 'me')
                 (0, messageSound_1.playMessageSound)();
-            // Update recent chats last message
             setRecentChats(prev => prev.map(r => r.user.uid === msg.senderId || r.user.uid === msg.receiverId
                 ? Object.assign(Object.assign({}, r), { lastMessage: msg.text, lastTime: msg.timestamp, unread: r.unread + 1 }) : r));
         },
-        onMessageAck: ({ messageId, status }) => {
-            updateMessageStatus(messageId, status);
-        },
+        onMessageAck: ({ messageId, status }) => { updateMessageStatus(messageId, status); },
         onChatPaused: (_roomId, paused) => {
-            // Sync pause state from remote
-            setRecentChats(prev => prev.map(r => activeUser && r.user.uid === activeUser.uid ? Object.assign(Object.assign({}, r), { isPaused: paused }) : r));
+            if (activeUser)
+                setRecentChats(prev => prev.map(r => r.user.uid === activeUser.uid ? Object.assign(Object.assign({}, r), { isPaused: paused }) : r));
+        },
+        onTypingStart: (roomId, userId) => {
+            setTypingUsers(prev => { const s = new Set(prev); s.add(userId); return s; });
+        },
+        onTypingStop: (_roomId, userId) => {
+            setTypingUsers(prev => { const s = new Set(prev); s.delete(userId); return s; });
         },
         onCallOffer: async (offer, fromUid, callId) => {
             var _a, _b;
-            // Find peer user
             const allUsers = [...((_a = data === null || data === void 0 ? void 0 : data.developers) !== null && _a !== void 0 ? _a : []), ...((_b = data === null || data === void 0 ? void 0 : data.users) !== null && _b !== void 0 ? _b : [])];
             const peer = allUsers.find(u => u.uid === fromUid);
             if (peer) {
@@ -154,142 +228,91 @@ const ChatWidget = ({ theme: localTheme, viewer }) => {
                 setIsOpen(true);
             }
         },
-        onCallAnswer: async (answer, _fromUid, _callId) => {
-            await addIceCandidate({ sdpMid: '0', sdpMLineIndex: 0, candidate: '' });
-            // WebRTC: set remote description
-            void answer;
-        },
-        onIceCandidate: async (candidate) => {
-            await addIceCandidate(candidate);
-        },
         onCallEnd: () => { _endCall(); },
-        onError: (code, message) => {
-            console.error('[ChatWidget] Socket error:', code, message);
-        },
         onUserStatus: (uid, status) => {
             setRecentChats(prev => prev.map(r => r.user.uid === uid ? Object.assign(Object.assign({}, r), { user: Object.assign(Object.assign({}, r.user), { status }) }) : r));
         },
+        onTicketCreated: (t) => { if (t)
+            setTickets(prev => [t, ...prev]); },
+        onTicketUpdated: (t) => {
+            if (t)
+                setTickets(prev => prev.map(x => x.id === t.id ? t : x));
+        },
+        onError: (code, msg) => console.error('[ChatWidget] socket error:', code, msg),
     });
     (0, react_1.useEffect)(() => { setSocketStatus(_socketStatus); }, [_socketStatus]);
-    /* ── Chat hook ──────────────────────────────────────────────────────── */
+    // ── Chat hook ─────────────────────────────────────────────────────────────
     const { messages, activeUser, isPaused, isReported, selectUser, sendMessage, receiveMessage, updateMessageStatus, togglePause: _togglePause, reportChat: _reportChat, clearChat, setMessages, } = (0, useChat_1.useChat)([], {
-        onEmitMessage: (msg) => { emitMessage(msg); },
-        onEmitPause: (roomId, targetUid, paused) => { emitPauseToggle(roomId, targetUid, paused); },
-        onEmitReport: (roomId) => { emitReport(roomId); },
+        onEmitMessage: (msg) => emitMessage(msg),
+        onEmitPause: (roomId, targetUid, paused) => emitPauseToggle(roomId, targetUid, paused),
+        onEmitReport: (roomId) => emitReport(roomId),
     });
-    /* ── WebRTC hook ────────────────────────────────────────────────────── */
+    // ── WebRTC hook ───────────────────────────────────────────────────────────
     const { session: callSession, localVideoRef, remoteVideoRef, startCall: _startCall, acceptCall, addIceCandidate, endCall: _endCall, toggleMute, toggleCamera, } = (0, useWebRTC_1.useWebRTC)({
-        onOfferReady: (offer, toUid, callId) => { emitCallOffer(offer, toUid, callId); },
-        onAnswerReady: (answer, toUid, callId) => { emitCallAnswer(answer, toUid, callId); },
-        onIceCandidateReady: (candidate, toUid) => { emitIceCandidate(candidate, toUid); },
-        onCallEnded: (callId, toUid) => { emitCallEnd(callId, toUid); },
+        onOfferReady: (offer, toUid, callId) => emitCallOffer(offer, toUid, callId),
+        onAnswerReady: (answer, toUid, callId) => emitCallAnswer(answer, toUid, callId),
+        onIceCandidateReady: (candidate, toUid) => emitIceCandidate(candidate, toUid),
+        onCallEnded: (callId, toUid) => emitCallEnd(callId, toUid),
     });
     const callInProgress = callSession.state === 'calling' || callSession.state === 'connected';
-    (0, react_1.useEffect)(() => {
-        if (!callInProgress)
-            setCallMinimized(false);
-    }, [callInProgress]);
-    /* ── Drawer open/close ──────────────────────────────────────────────── */
-    const openDrawer = () => {
-        setClosing(false);
-        setIsOpen(true);
-        setCallMinimized(false);
-    };
+    (0, react_1.useEffect)(() => { if (!callInProgress)
+        setCallMinimized(false); }, [callInProgress]);
+    // ── Drawer open / close ───────────────────────────────────────────────────
+    const openDrawer = () => { setClosing(false); setIsOpen(true); setCallMinimized(false); };
     const persistWidgetState = (0, react_1.useCallback)(() => {
         var _a;
         const w = data === null || data === void 0 ? void 0 : data.widget;
         if (!w)
             return;
-        (0, widgetSession_1.saveSession)(w.id, {
-            screen, activeTab, userListCtx,
-            activeUserUid: (_a = activeUser === null || activeUser === void 0 ? void 0 : activeUser.uid) !== null && _a !== void 0 ? _a : null,
-            messages, viewingTicketId, chatReturnCtx,
-        });
+        (0, widgetSession_1.saveSession)(w.id, { screen, activeTab, userListCtx, activeUserUid: (_a = activeUser === null || activeUser === void 0 ? void 0 : activeUser.uid) !== null && _a !== void 0 ? _a : null, messages, viewingTicketId, chatReturnCtx });
     }, [data === null || data === void 0 ? void 0 : data.widget, screen, activeTab, userListCtx, activeUser === null || activeUser === void 0 ? void 0 : activeUser.uid, messages, viewingTicketId, chatReturnCtx]);
     const closeDrawer = (0, react_1.useCallback)(() => {
         persistWidgetState();
+        if (displayMode === 'inline')
+            return; // inline is always open
         setClosing(true);
         setTimeout(() => { setIsOpen(false); setClosing(false); }, 300);
-    }, [persistWidgetState]);
+    }, [persistWidgetState, displayMode]);
     (0, react_1.useEffect)(() => {
         var _a;
         const id = (_a = data === null || data === void 0 ? void 0 : data.widget) === null || _a === void 0 ? void 0 : _a.id;
         if (!id)
             return;
         setPermissionsOk((0, widgetPermissions_1.hasStoredPermissionsGrant)(id));
-    }, [(_f = data === null || data === void 0 ? void 0 : data.widget) === null || _f === void 0 ? void 0 : _f.id]);
+    }, [(_u = data === null || data === void 0 ? void 0 : data.widget) === null || _u === void 0 ? void 0 : _u.id]);
+    // Session restore
     const restoredRef = (0, react_1.useRef)(false);
     (0, react_1.useEffect)(() => {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c;
         if (!(data === null || data === void 0 ? void 0 : data.widget) || restoredRef.current)
             return;
         const w = data.widget;
         setMessageSoundEnabledState((0, messageSound_1.getMessageSoundEnabled)(w.id));
-        const uidForBlock = (_b = ((_a = viewer === null || viewer === void 0 ? void 0 : viewer.uid) !== null && _a !== void 0 ? _a : w.viewerUid)) === null || _b === void 0 ? void 0 : _b.trim();
-        let viewerIsBlocked = w.viewerBlocked === true;
-        if (!viewerIsBlocked && uidForBlock) {
-            const rec = [...data.developers, ...data.users].find(x => x.uid === uidForBlock);
-            viewerIsBlocked = (rec === null || rec === void 0 ? void 0 : rec.viewerBlocked) === true;
-        }
-        if (viewerIsBlocked) {
-            clearChat();
-            setScreen('home');
-            setActiveTab('home');
-            setViewingTicketId(null);
-            restoredRef.current = true;
-            return;
-        }
         const p = (0, widgetSession_1.loadSession)(w.id);
         if (p) {
             setScreen(p.screen);
             setActiveTab(p.activeTab);
             setUserListCtx(p.userListCtx);
-            setViewingTicketId((_c = p.viewingTicketId) !== null && _c !== void 0 ? _c : null);
-            setChatReturnCtx((_d = p.chatReturnCtx) !== null && _d !== void 0 ? _d : 'conversation');
+            setViewingTicketId((_a = p.viewingTicketId) !== null && _a !== void 0 ? _a : null);
+            setChatReturnCtx((_b = p.chatReturnCtx) !== null && _b !== void 0 ? _b : 'conversation');
             if (p.activeUserUid) {
-                const pid = (_e = viewer === null || viewer === void 0 ? void 0 : viewer.projectId) === null || _e === void 0 ? void 0 : _e.trim();
-                const pool = pid
-                    ? [...data.developers, ...data.users].filter(u => u.project === pid)
-                    : [...data.developers, ...data.users];
+                const pool = [...data.developers, ...data.users];
                 const u = pool.find(x => x.uid === p.activeUserUid);
                 if (u) {
-                    const hist = Array.isArray(p.messages) && p.messages.length
-                        ? p.messages
-                        : ((_f = data.sampleChats[u.uid]) !== null && _f !== void 0 ? _f : []);
+                    const hist = Array.isArray(p.messages) && p.messages.length ? p.messages : ((_c = data.sampleChats[u.uid]) !== null && _c !== void 0 ? _c : []);
                     selectUser(u, hist);
-                    // Rejoin socket room
                     const roomId = [u.uid, viewerUidForSocket].sort().join('_');
                     joinRoom(roomId);
                 }
             }
         }
         restoredRef.current = true;
-    }, [data, selectUser, clearChat, viewer === null || viewer === void 0 ? void 0 : viewer.projectId, viewer === null || viewer === void 0 ? void 0 : viewer.uid, viewerUidForSocket, joinRoom]);
-    (0, react_1.useEffect)(() => {
-        var _a, _b;
-        if (!(data === null || data === void 0 ? void 0 : data.widget))
-            return;
-        const w = data.widget;
-        const uid = (_b = ((_a = viewer === null || viewer === void 0 ? void 0 : viewer.uid) !== null && _a !== void 0 ? _a : w.viewerUid)) === null || _b === void 0 ? void 0 : _b.trim();
-        let blocked = w.viewerBlocked === true;
-        if (!blocked && uid) {
-            const rec = [...data.developers, ...data.users].find(x => x.uid === uid);
-            blocked = (rec === null || rec === void 0 ? void 0 : rec.viewerBlocked) === true;
-        }
-        if (!blocked)
-            return;
-        clearChat();
-        setScreen('home');
-        setActiveTab('home');
-        setViewingTicketId(null);
-    }, [data === null || data === void 0 ? void 0 : data.widget, data === null || data === void 0 ? void 0 : data.developers, data === null || data === void 0 ? void 0 : data.users, viewer === null || viewer === void 0 ? void 0 : viewer.uid, clearChat]);
+    }, [data, selectUser, viewer === null || viewer === void 0 ? void 0 : viewer.projectId, viewer === null || viewer === void 0 ? void 0 : viewer.uid, viewerUidForSocket, joinRoom]);
     (0, react_1.useEffect)(() => {
         if (!(data === null || data === void 0 ? void 0 : data.widget))
             return;
         persistWidgetState();
-    }, [(_g = data === null || data === void 0 ? void 0 : data.widget) === null || _g === void 0 ? void 0 : _g.id, screen, activeTab, userListCtx, activeUser === null || activeUser === void 0 ? void 0 : activeUser.uid, messages, viewingTicketId, chatReturnCtx, persistWidgetState]);
-    const incomingSoundRef = (0, react_1.useRef)(0);
-    (0, react_1.useEffect)(() => { incomingSoundRef.current = messages.length; }, [activeUser === null || activeUser === void 0 ? void 0 : activeUser.uid]);
+    }, [(_v = data === null || data === void 0 ? void 0 : data.widget) === null || _v === void 0 ? void 0 : _v.id, screen, activeTab, userListCtx, activeUser === null || activeUser === void 0 ? void 0 : activeUser.uid, messages, viewingTicketId, chatReturnCtx, persistWidgetState]);
     const toggleMessageSound = (0, react_1.useCallback)((enabled) => {
         const w = data === null || data === void 0 ? void 0 : data.widget;
         if (!w)
@@ -297,7 +320,7 @@ const ChatWidget = ({ theme: localTheme, viewer }) => {
         (0, messageSound_1.setMessageSoundEnabled)(w.id, enabled);
         setMessageSoundEnabledState(enabled);
     }, [data === null || data === void 0 ? void 0 : data.widget]);
-    /* ── Navigation ─────────────────────────────────────────────────────── */
+    // ── Navigation ────────────────────────────────────────────────────────────
     const handleCardClick = (0, react_1.useCallback)((ctx, options) => {
         setListEntranceAnimation(!!(options === null || options === void 0 ? void 0 : options.fromMenu));
         if (ctx === 'ticket') {
@@ -333,7 +356,6 @@ const ChatWidget = ({ theme: localTheme, viewer }) => {
         const history = (_a = data === null || data === void 0 ? void 0 : data.sampleChats[user.uid]) !== null && _a !== void 0 ? _a : [];
         selectUser(user, history);
         setScreen('chat');
-        // Join socket room for real-time messages
         const roomId = [user.uid, viewerUidForSocket].sort().join('_');
         joinRoom(roomId);
         setRecentChats(prev => {
@@ -370,7 +392,7 @@ const ChatWidget = ({ theme: localTheme, viewer }) => {
         const t = window.setTimeout(() => setListEntranceAnimation(false), 520);
         return () => window.clearTimeout(t);
     }, [listEntranceAnimation]);
-    /* ── Block/Unblock ──────────────────────────────────────────────────── */
+    // ── Block / Unblock ───────────────────────────────────────────────────────
     const handleBlock = (0, react_1.useCallback)(() => {
         if (!activeUser)
             return;
@@ -384,44 +406,34 @@ const ChatWidget = ({ theme: localTheme, viewer }) => {
         setBlockedUids(prev => prev.filter(id => id !== uid));
         emitUnblock(uid);
     }, [emitUnblock]);
-    /* ── Tickets ────────────────────────────────────────────────────────── */
+    // ── Tickets ───────────────────────────────────────────────────────────────
     const handleRaiseTicket = (0, react_1.useCallback)((title, desc, priority) => {
         const t = {
-            id: `TKT-${String(Date.now()).slice(-4)}`,
-            title, description: desc, status: 'open', priority,
-            createdAt: new Date().toISOString(),
-            updatedAt: new Date().toISOString(),
-            assignedTo: null,
+            id: `TKT-${String(Date.now()).slice(-4)}`, title, description: desc, status: 'open', priority,
+            createdAt: new Date().toISOString(), updatedAt: new Date().toISOString(), assignedTo: null,
         };
         setTickets(prev => [...prev, t]);
         setViewingTicketId(t.id);
         setScreen('ticket-detail');
         setActiveTab('tickets');
-    }, []);
-    /* ── Pause sync back into recent chats ─────────────────────────────── */
+        emitTicketCreate({ title, description: desc, priority, createdBy: viewerUidForSocket });
+    }, [emitTicketCreate, viewerUidForSocket]);
+    // ── Pause sync ────────────────────────────────────────────────────────────
     const handleTogglePause = (0, react_1.useCallback)(() => {
         _togglePause();
-        if (activeUser) {
+        if (activeUser)
             setRecentChats(prev => prev.map(r => r.user.uid === activeUser.uid ? Object.assign(Object.assign({}, r), { isPaused: !isPaused }) : r));
-        }
     }, [_togglePause, activeUser, isPaused]);
-    /* ── Call ───────────────────────────────────────────────────────────── */
+    // ── Call ──────────────────────────────────────────────────────────────────
     const handleStartCall = (0, react_1.useCallback)((withVideo) => {
         if (!activeUser)
             return;
         _startCall(activeUser, withVideo);
         setScreen('call');
     }, [activeUser, _startCall]);
-    const handleEndCall = (0, react_1.useCallback)(() => {
-        _endCall();
-        setCallMinimized(false);
-        setScreen('chat');
-    }, [_endCall]);
-    const minimizeCall = (0, react_1.useCallback)(() => {
-        setCallMinimized(true);
-        closeDrawer();
-    }, [closeDrawer]);
-    /* ── Derived config (must be declared before callbacks that use it) ── */
+    const handleEndCall = (0, react_1.useCallback)(() => { _endCall(); setCallMinimized(false); setScreen('chat'); }, [_endCall]);
+    const minimizeCall = (0, react_1.useCallback)(() => { setCallMinimized(true); closeDrawer(); }, [closeDrawer]);
+    // ── Transfer ──────────────────────────────────────────────────────────────
     const widgetConfig = (0, react_1.useMemo)(() => {
         var _a;
         if (!(data === null || data === void 0 ? void 0 : data.widget))
@@ -436,7 +448,6 @@ const ChatWidget = ({ theme: localTheme, viewer }) => {
         }
         return w;
     }, [data === null || data === void 0 ? void 0 : data.widget, viewer]);
-    /* ── Transfer (developer feature) ──────────────────────────────────── */
     const handleTransferToDeveloper = (0, react_1.useCallback)((dev) => {
         var _a;
         if (!activeUser || !widgetConfig)
@@ -444,27 +455,21 @@ const ChatWidget = ({ theme: localTheme, viewer }) => {
         const agent = ((_a = widgetConfig.viewerName) === null || _a === void 0 ? void 0 : _a.trim()) || 'Agent';
         const roomId = [activeUser.uid, viewerUidForSocket].sort().join('_');
         const transferNote = {
-            id: `tr_${Date.now()}_${Math.random().toString(36).slice(2)}`,
-            senderId: 'me',
-            receiverId: dev.uid,
+            id: `tr_${Date.now()}`, senderId: 'me', receiverId: dev.uid,
             text: `— ${agent} transferred this conversation from ${activeUser.name} to ${dev.name} —`,
-            timestamp: new Date().toISOString(),
-            type: 'text',
-            status: 'sent',
+            timestamp: new Date().toISOString(), type: 'text', status: 'sent',
         };
         emitTransfer(roomId, dev.uid, transferNote.text);
         selectUser(dev, [...messages, transferNote]);
     }, [activeUser, messages, selectUser, widgetConfig, viewerUidForSocket, emitTransfer]);
-    /* ── Add participant (developer feature) ────────────────────────────── */
     const handleAddParticipant = (0, react_1.useCallback)((uid) => {
         if (!activeUser)
             return;
-        const roomId = [activeUser.uid, viewerUidForSocket].sort().join('_');
-        emitAddParticipant(roomId, uid);
+        emitAddParticipant([activeUser.uid, viewerUidForSocket].sort().join('_'), uid);
     }, [activeUser, viewerUidForSocket, emitAddParticipant]);
-    /* ── Derived ────────────────────────────────────────────────────────── */
+    // ── Derived ───────────────────────────────────────────────────────────────
     const isBlocked = activeUser ? blockedUids.includes(activeUser.uid) : false;
-    const primaryColor = theme.primaryColor;
+    const primaryColor = headerBg;
     const allUsers = (0, react_1.useMemo)(() => {
         var _a, _b;
         if (!data)
@@ -491,9 +496,8 @@ const ChatWidget = ({ theme: localTheme, viewer }) => {
     const viewerUid = widgetConfig === null || widgetConfig === void 0 ? void 0 : widgetConfig.viewerUid;
     const filteredUsers = screen === 'user-list'
         ? allUsers.filter(u => {
-            if (userListCtx === 'support') {
+            if (userListCtx === 'support')
                 return viewerIsDev ? u.type === 'user' : u.type === 'developer';
-            }
             if (viewerIsDev)
                 return u.type === 'developer' && u.uid !== viewerUid;
             return u.type === 'user';
@@ -501,116 +505,149 @@ const ChatWidget = ({ theme: localTheme, viewer }) => {
         : [];
     const otherDevelopers = (0, react_1.useMemo)(() => allUsers.filter(u => u.type === 'developer' && u.uid !== viewerUid), [allUsers, viewerUid]);
     const blockedUsers = allUsers.filter(u => blockedUids.includes(u.uid));
-    const totalUnread = (0, react_1.useMemo)(() => recentChats.reduce((sum, c) => { var _a; return sum + Math.max(0, (_a = c.unread) !== null && _a !== void 0 ? _a : 0); }, 0), [recentChats]);
+    const totalUnread = (0, react_1.useMemo)(() => recentChats.reduce((s, c) => { var _a; return s + Math.max(0, (_a = c.unread) !== null && _a !== void 0 ? _a : 0); }, 0), [recentChats]);
+    // ── Panel geometry from display mode ──────────────────────────────────────
+    const geo = (0, react_1.useMemo)(() => { var _a; return getPanelGeometry(displayMode, (_a = theme.buttonPosition) !== null && _a !== void 0 ? _a : 'bottom-right', ajaxterSettings === null || ajaxterSettings === void 0 ? void 0 : ajaxterSettings.maximized); }, [displayMode, theme.buttonPosition, ajaxterSettings === null || ajaxterSettings === void 0 ? void 0 : ajaxterSettings.maximized]);
+    // Button geometry from Ajaxter minimized config
+    const btnStyle = (0, react_1.useMemo)(() => {
+        var _a, _b, _c, _d, _e, _f;
+        const pos = theme.buttonPosition === 'bottom-left' ? { left: 24, right: 'auto' } : { right: 24, left: 'auto' };
+        if (btnType === 'round') {
+            return Object.assign(Object.assign({ position: 'fixed', bottom: 24, zIndex: 9999 }, pos), { width: 56, height: 56, borderRadius: '50%', padding: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: theme.buttonColor, color: theme.buttonTextColor, border: 'none', cursor: 'pointer', boxShadow: `0 8px 28px ${theme.buttonColor}55`, animation: 'cw-btnPop 0.4s cubic-bezier(0.34,1.56,0.64,1)' });
+        }
+        // 'slide' type (pill)
+        const w = (_a = minimizedDesktop === null || minimizedDesktop === void 0 ? void 0 : minimizedDesktop.width) !== null && _a !== void 0 ? _a : 126;
+        const h = (_b = minimizedDesktop === null || minimizedDesktop === void 0 ? void 0 : minimizedDesktop.height) !== null && _b !== void 0 ? _b : 40;
+        return Object.assign(Object.assign({ position: 'fixed', bottom: 24, zIndex: 9999 }, pos), { width: w, height: h, borderRadius: `${(_c = minimizedDesktop === null || minimizedDesktop === void 0 ? void 0 : minimizedDesktop.borderRadiusTop) !== null && _c !== void 0 ? _c : 150}px ${(_d = minimizedDesktop === null || minimizedDesktop === void 0 ? void 0 : minimizedDesktop.borderRadiusBottom) !== null && _d !== void 0 ? _d : 140}px ${(_e = minimizedDesktop === null || minimizedDesktop === void 0 ? void 0 : minimizedDesktop.borderRadiusBottom) !== null && _e !== void 0 ? _e : 140}px ${(_f = minimizedDesktop === null || minimizedDesktop === void 0 ? void 0 : minimizedDesktop.borderRadiusTop) !== null && _f !== void 0 ? _f : 150}px`, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, padding: '0 16px', backgroundColor: theme.buttonColor, color: theme.buttonTextColor, border: 'none', cursor: 'pointer', fontSize: 13, fontWeight: 700, boxShadow: `0 8px 28px ${theme.buttonColor}55`, animation: 'cw-btnPop 0.4s cubic-bezier(0.34,1.56,0.64,1)' });
+    }, [btnType, theme, minimizedDesktop]);
     const posStyle = theme.buttonPosition === 'bottom-left'
-        ? { left: 24, right: 'auto' }
-        : { right: 24, left: 'auto' };
-    const drawerPosStyle = theme.buttonPosition === 'bottom-left'
-        ? { left: 0, borderTopLeftRadius: 0, borderBottomLeftRadius: 0, borderTopRightRadius: 16, borderBottomRightRadius: 16 }
-        : { right: 0, borderTopLeftRadius: 0, borderBottomLeftRadius: 0 };
+        ? { left: 24, right: 'auto' } : { right: 24, left: 'auto' };
     if (!mounted)
         return null;
+    // Inline mode — always "open", no floating button
+    if (displayMode === 'inline') {
+        return (react_1.default.createElement(ErrorBoundary_1.ErrorBoundary, { primaryColor: primaryColor },
+            react_1.default.createElement("style", null, GLOBAL_STYLES(agentBg, visitorBg, headerBg)),
+            widgetConfig && !cfgLoading && !cfgError && (react_1.default.createElement(WidgetContent, Object.assign({}, contentProps(), { widgetConfig: widgetConfig, primaryColor: primaryColor, agentBg: agentBg, visitorBg: visitorBg, panelStyle: geo.panel, isClosable: false })))));
+    }
+    // Helper to collect all props for WidgetContent
+    function contentProps() {
+        return {
+            screen, activeTab, userListCtx, viewingTicketId, listEntranceAnimation,
+            tickets, recentChats, blockedUsers, blockedUids, filteredUsers,
+            otherDevelopers, allUsers, messages, activeUser, isPaused, isReported,
+            isBlocked, callSession, localVideoRef, remoteVideoRef,
+            effectiveViewerBlocked, permissionsOk, messageSoundEnabled, typingUsers,
+            viewerIsDev, apiKey, totalUnread,
+            onClose: closeDrawer,
+            onTabChange: handleTabChange, onCardClick: handleCardClick,
+            onNavFromMenu: handleNavFromMenu, onSelectUser: handleSelectUser,
+            onBackFromChat: handleBackFromChat, onOpenTicket: handleOpenTicket,
+            onSend: sendMessage, onTogglePause: handleTogglePause, onReport: _reportChat,
+            onBlock: handleBlock, onUnblock: handleUnblock,
+            onStartCall: handleStartCall, onEndCall: handleEndCall, onMinimizeCall: minimizeCall,
+            onToggleMute: toggleMute, onToggleCamera: toggleCamera,
+            onRaiseTicket: handleRaiseTicket, onTransfer: handleTransferToDeveloper,
+            onAddParticipant: handleAddParticipant, onToggleMessageSound: toggleMessageSound,
+            setScreen, setActiveTab, setViewingTicketId, setListEntranceAnimation,
+            listCtxForUser,
+        };
+    }
     return (react_1.default.createElement(ErrorBoundary_1.ErrorBoundary, { primaryColor: primaryColor },
-        react_1.default.createElement("style", null, `
-        @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap');
-        .cw-root * { box-sizing: border-box; font-family: 'DM Sans', 'Segoe UI', sans-serif; }
-        @keyframes cw-slideInRight  { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
-        @keyframes cw-slideOutRight { from { transform: translateX(0); opacity: 1; }    to { transform: translateX(100%); opacity: 0; } }
-        @keyframes cw-slideInLeft   { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
-        @keyframes cw-slideOutLeft  { from { transform: translateX(0); opacity: 1; }    to { transform: translateX(-100%); opacity: 0; } }
-        @keyframes cw-fadeUp  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
-        @keyframes cw-slideIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } }
-        @keyframes cw-pulse   { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
-        @keyframes cw-btnPop  { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
-        @keyframes spin { to { transform: rotate(360deg); } }
-        .cw-scroll::-webkit-scrollbar        { width: 4px; }
-        .cw-scroll::-webkit-scrollbar-track  { background: transparent; }
-        .cw-scroll::-webkit-scrollbar-thumb  { background: #e0e0e0; border-radius: 4px; }
-        .cw-drawer-enter { animation: ${theme.buttonPosition === 'bottom-left' ? 'cw-slideInLeft' : 'cw-slideInRight'} 0.32s cubic-bezier(0.22,1,0.36,1) both; }
-        .cw-drawer-exit  { animation: ${theme.buttonPosition === 'bottom-left' ? 'cw-slideOutLeft' : 'cw-slideOutRight'} 0.28s cubic-bezier(0.55,0,1,0.45) both; }
-        .cw-drawer-panel { width: 30%; max-width: 100vw; min-width: 0; }
-        @media (max-width: 1024px) { .cw-drawer-panel { width: 100%; } }
-      `),
-        socketStatus !== 'connected' && socketStatus !== 'disconnected' && (react_1.default.createElement("div", { style: Object.assign(Object.assign({ position: 'fixed', bottom: 80 }, posStyle), { zIndex: 9996, background: socketStatus === 'connecting' ? '#f59e0b' : '#ef4444', color: '#fff', fontSize: 11, fontWeight: 700, padding: '3px 10px', borderRadius: 20, animation: 'cw-fadeUp 0.3s ease' }) }, socketStatus === 'connecting' ? '● Connecting…' : '● Offline')),
+        react_1.default.createElement("style", null, GLOBAL_STYLES(agentBg, visitorBg, headerBg)),
+        socketStatus !== 'connected' && socketStatus !== 'disconnected' && isOpen && (react_1.default.createElement("div", { style: Object.assign(Object.assign({ position: 'fixed', bottom: 80 }, posStyle), { zIndex: 9996, background: socketStatus === 'connecting' ? '#f59e0b' : '#ef4444', color: '#fff', fontSize: 11, fontWeight: 700, padding: '3px 10px', borderRadius: 20 }) }, socketStatus === 'connecting' ? '● Connecting…' : '● Offline')),
         !isOpen && callMinimized && callInProgress && callSession.peer && (react_1.default.createElement(MiniCallBar_1.MiniCallBar, { session: callSession, primaryColor: primaryColor, buttonPosition: theme.buttonPosition, onExpand: openDrawer, onEnd: handleEndCall })),
-        !isOpen && (react_1.default.createElement("button", { className: "cw-root", type: "button", onClick: openDrawer, "aria-label": totalUnread > 0 ? `${theme.buttonLabel}, ${totalUnread} unread` : theme.buttonLabel, title: totalUnread > 0 ? `${totalUnread} unread message${totalUnread === 1 ? '' : 's'}` : theme.buttonLabel, style: Object.assign(Object.assign({ position: 'fixed', bottom: 24, zIndex: 9999 }, posStyle), { display: 'flex', alignItems: 'center', gap: 10, padding: '13px 22px', backgroundColor: theme.buttonColor, color: theme.buttonTextColor, border: 'none', borderRadius: 50, cursor: 'pointer', fontSize: 15, fontWeight: 700, boxShadow: `0 8px 28px ${theme.buttonColor}55`, animation: 'cw-btnPop 0.4s cubic-bezier(0.34,1.56,0.64,1)', transition: 'transform 0.2s, box-shadow 0.2s' }), onMouseEnter: e => {
-                e.currentTarget.style.transform = 'scale(1.06) translateY(-2px)';
-                e.currentTarget.style.boxShadow = `0 14px 36px ${theme.buttonColor}66`;
-            }, onMouseLeave: e => {
-                e.currentTarget.style.transform = 'scale(1)';
-                e.currentTarget.style.boxShadow = `0 8px 28px ${theme.buttonColor}55`;
-            } },
-            react_1.default.createElement("span", { style: { position: 'relative', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' } },
-                react_1.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none" },
-                    react_1.default.createElement("path", { d: "M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z", stroke: theme.buttonTextColor, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })),
-                totalUnread > 0 && (react_1.default.createElement("span", { style: {
-                        position: 'absolute', top: -8, right: -10,
-                        minWidth: 20, height: 20, padding: '0 5px', borderRadius: 999,
-                        background: '#ef4444', color: '#fff', fontSize: 11, fontWeight: 800,
-                        lineHeight: '20px', textAlign: 'center', border: '2px solid #fff', boxSizing: 'border-box',
-                    } }, totalUnread > 99 ? '99+' : totalUnread))),
-            react_1.default.createElement("span", null, theme.buttonLabel))),
-        isOpen && (react_1.default.createElement("div", { "aria-hidden": true, style: {
-                position: 'fixed', inset: 0, zIndex: 9997,
-                backgroundColor: 'rgba(0,0,0,0.35)',
-                opacity: closing ? 0 : 1,
-                transition: 'opacity 0.3s',
-            } })),
-        isOpen && (react_1.default.createElement("div", { className: `cw-root cw-drawer-panel ${closing ? 'cw-drawer-exit' : 'cw-drawer-enter'}`, style: Object.assign(Object.assign({ position: 'fixed', top: 0, bottom: 0 }, drawerPosStyle), { zIndex: 9998, backgroundColor: '#fff', boxShadow: theme.buttonPosition === 'bottom-left'
-                    ? '4px 0 40px rgba(0,0,0,0.18)'
-                    : '-4px 0 40px rgba(0,0,0,0.18)', display: 'flex', flexDirection: 'column', overflow: 'hidden' }) },
+        !isOpen && (react_1.default.createElement("button", { className: "cw-root", type: "button", onClick: openDrawer, "aria-label": totalUnread > 0 ? `${theme.buttonLabel}, ${totalUnread} unread` : theme.buttonLabel, style: btnStyle, onMouseEnter: e => { e.currentTarget.style.transform = 'scale(1.06) translateY(-2px)'; }, onMouseLeave: e => { e.currentTarget.style.transform = 'scale(1)'; } },
+            react_1.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none" },
+                react_1.default.createElement("path", { d: "M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z", stroke: theme.buttonTextColor, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })),
+            btnType !== 'round' && react_1.default.createElement("span", null, theme.buttonLabel),
+            totalUnread > 0 && (react_1.default.createElement("span", { style: { position: 'absolute', top: -6, right: -6,
+                    minWidth: 18, height: 18, padding: '0 4px', borderRadius: 999,
+                    background: '#ef4444', color: '#fff', fontSize: 10, fontWeight: 800,
+                    lineHeight: '18px', textAlign: 'center', border: '2px solid #fff' } }, totalUnread > 99 ? '99+' : totalUnread)))),
+        isOpen && geo.backdrop && (react_1.default.createElement("div", { "aria-hidden": true, style: Object.assign(Object.assign({}, geo.backdrop), { opacity: closing ? 0 : 1, transition: 'opacity 0.3s' }) })),
+        isOpen && (react_1.default.createElement("div", { className: `cw-root ${closing ? geo.exitClass : geo.enterClass}`, style: geo.panel },
             cfgLoading && (react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', gap: 16 } },
                 react_1.default.createElement("div", { style: { width: 40, height: 40, borderRadius: '50%', border: `3px solid ${primaryColor}30`, borderTopColor: primaryColor, animation: 'spin 0.8s linear infinite' } }),
                 react_1.default.createElement("p", { style: { fontSize: 14, color: '#7b8fa1' } }, "Loading chat\u2026"))),
             cfgError && !cfgLoading && (react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', gap: 12, padding: 32, textAlign: 'center' } },
                 react_1.default.createElement("div", { style: { fontSize: 40 } }, "\u26A0\uFE0F"),
-                react_1.default.createElement("p", { style: { fontWeight: 700, color: '#1a2332' } }, "Could not load chat configuration"),
-                react_1.default.createElement("p", { style: { fontSize: 13, color: '#7b8fa1', lineHeight: 1.6 } }, cfgError),
+                react_1.default.createElement("p", { style: { fontWeight: 700, color: '#1a2332' } }, "Could not load chat"),
+                react_1.default.createElement("p", { style: { fontSize: 13, color: '#7b8fa1' } }, cfgError),
                 react_1.default.createElement("button", { onClick: closeDrawer, style: { padding: '9px 20px', borderRadius: 10, border: 'none', background: primaryColor, color: '#fff', cursor: 'pointer', fontWeight: 700 } }, "Close"))),
             !cfgLoading && !cfgError && widgetConfig && (react_1.default.createElement(ErrorBoundary_1.ErrorBoundary, { primaryColor: primaryColor },
-                screen !== 'chat' && screen !== 'call' && !effectiveViewerBlocked && (react_1.default.createElement("div", { style: {
-                        position: 'absolute', top: 12,
-                        right: theme.buttonPosition === 'bottom-left' ? 'auto' : 12,
-                        left: theme.buttonPosition === 'bottom-left' ? 12 : 'auto',
-                        zIndex: 20, display: 'flex', gap: 6,
-                    } },
-                    react_1.default.createElement(CornerBtn, { onClick: closeDrawer, title: "Close" },
-                        react_1.default.createElement("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none" },
-                            react_1.default.createElement("path", { d: "M18 6L6 18M6 6l12 12", stroke: "#fff", strokeWidth: "2.5", strokeLinecap: "round" }))))),
-                widgetConfig.status === 'MAINTENANCE' && react_1.default.createElement(MaintenanceView_1.MaintenanceView, { primaryColor: primaryColor }),
-                widgetConfig.status === 'DISABLE' && (react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', padding: 32, textAlign: 'center', gap: 12 } },
-                    react_1.default.createElement("div", { style: { fontSize: 40 } }, "\uD83D\uDD12"),
-                    react_1.default.createElement("p", { style: { fontWeight: 700, color: '#1a2332' } }, "Chat is disabled"),
-                    react_1.default.createElement("button", { onClick: closeDrawer, style: { padding: '9px 20px', borderRadius: 10, border: 'none', background: primaryColor, color: '#fff', cursor: 'pointer', fontWeight: 700 } }, "Close"))),
-                widgetConfig.status === 'ACTIVE' && effectiveViewerBlocked && (react_1.default.createElement(ViewerBlockedScreen_1.ViewerBlockedScreen, { config: widgetConfig, apiKey: apiKey, onClose: closeDrawer })),
-                widgetConfig.status === 'ACTIVE' && !effectiveViewerBlocked && !permissionsOk && (react_1.default.createElement(PermissionsGateScreen_1.PermissionsGateScreen, { primaryColor: primaryColor, widgetId: widgetConfig.id, onGranted: () => setPermissionsOk(true) })),
-                widgetConfig.status === 'ACTIVE' && !effectiveViewerBlocked && permissionsOk && (react_1.default.createElement("div", { className: "cw-scroll", style: { flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' } },
-                    screen === 'home' && (react_1.default.createElement(HomeScreen_1.HomeScreen, { config: widgetConfig, apiKey: apiKey, onNavigate: handleCardClick, onOpenTicket: handleOpenTicket, tickets: tickets })),
-                    screen === 'user-list' && (react_1.default.createElement(UserListScreen_1.UserListScreen, { context: userListCtx, users: filteredUsers, primaryColor: primaryColor, viewerType: (_h = widgetConfig.viewerType) !== null && _h !== void 0 ? _h : 'user', onBack: () => { setListEntranceAnimation(false); setScreen('home'); }, onSelectUser: handleSelectUser, onBlockList: userListCtx === 'conversation' ? () => setScreen('block-list') : undefined, useHomeHeader: userListCtx === 'support' && widgetConfig.viewerType !== 'developer', animateEntrance: listEntranceAnimation })),
-                    screen === 'chat' && activeUser && (react_1.default.createElement(ChatScreen_1.ChatScreen, { activeUser: activeUser, messages: messages, config: widgetConfig, isPaused: isPaused, isReported: isReported, isBlocked: isBlocked, onSend: sendMessage, onBack: handleBackFromChat, onClose: closeDrawer, onTogglePause: handleTogglePause, onReport: _reportChat, onBlock: handleBlock, onStartCall: handleStartCall, onNavAction: handleNavFromMenu, otherDevelopers: otherDevelopers, onTransferToDeveloper: handleTransferToDeveloper, messageSoundEnabled: messageSoundEnabled, onToggleMessageSound: toggleMessageSound })),
-                    screen === 'call' && callSession.peer && (react_1.default.createElement(CallScreen_1.CallScreen, { session: callSession, localVideoRef: localVideoRef, remoteVideoRef: remoteVideoRef, onEnd: handleEndCall, onToggleMute: toggleMute, onToggleCamera: toggleCamera, primaryColor: primaryColor, onMinimize: minimizeCall })),
-                    screen === 'recent-chats' && (react_1.default.createElement(RecentChatsScreen_1.RecentChatsScreen, { chats: recentChats, config: widgetConfig, onSelectChat: u => handleSelectUser(u, listCtxForUser(u, viewerIsDev)), animateEntrance: listEntranceAnimation })),
-                    screen === 'tickets' && (react_1.default.createElement(TicketScreen_1.TicketScreen, { tickets: tickets, config: widgetConfig, onNewTicket: () => { setListEntranceAnimation(false); setScreen('ticket-new'); }, onSelectTicket: id => {
-                            setListEntranceAnimation(false);
-                            setViewingTicketId(id);
-                            setScreen('ticket-detail');
-                        }, animateEntrance: listEntranceAnimation })),
-                    screen === 'ticket-new' && (react_1.default.createElement(TicketFormScreen_1.TicketFormScreen, { config: widgetConfig, onSubmit: handleRaiseTicket, onCancel: () => setScreen('tickets') })),
-                    screen === 'ticket-detail' && viewingTicketId && (() => {
-                        const t = tickets.find(x => x.id === viewingTicketId);
-                        return t ? (react_1.default.createElement(TicketDetailScreen_1.TicketDetailScreen, { ticket: t, config: widgetConfig, onBack: () => { setViewingTicketId(null); setScreen('tickets'); } })) : null;
-                    })(),
-                    screen === 'block-list' && (react_1.default.createElement(BlockList_1.BlockListScreen, { blockedUsers: blockedUsers, config: widgetConfig, onUnblock: handleUnblock, onBack: () => { setScreen('home'); setActiveTab('home'); } })))),
-                widgetConfig.status === 'ACTIVE' &&
-                    !effectiveViewerBlocked && permissionsOk &&
-                    screen !== 'chat' && screen !== 'call' &&
-                    screen !== 'user-list' && screen !== 'block-list' &&
-                    screen !== 'ticket-detail' && screen !== 'ticket-new' && (react_1.default.createElement(BottomTabs_1.BottomTabs, { active: activeTab, onChange: handleTabChange, primaryColor: primaryColor }))))))));
+                react_1.default.createElement(WidgetContent, Object.assign({}, contentProps(), { widgetConfig: widgetConfig, primaryColor: primaryColor, agentBg: agentBg, visitorBg: visitorBg, panelStyle: {}, isClosable: true }))))))));
 };
 exports.ChatWidget = ChatWidget;
 exports.default = exports.ChatWidget;
-const CornerBtn = ({ onClick, title, children }) => (react_1.default.createElement("button", { onClick: onClick, title: title, style: {
-        width: 26, height: 26, borderRadius: '50%', background: 'rgba(0,0,0,0.25)', border: 'none',
-        display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
-    } }, children));
+// ─── WidgetContent — extracted so inline mode can reuse ───────────────────────
+const WidgetContent = (props) => {
+    var _a;
+    const { screen, activeTab, userListCtx, viewingTicketId, listEntranceAnimation, tickets, recentChats, blockedUsers, filteredUsers, otherDevelopers, messages, activeUser, isPaused, isReported, isBlocked, callSession, localVideoRef, remoteVideoRef, effectiveViewerBlocked, permissionsOk, messageSoundEnabled, viewerIsDev, apiKey, widgetConfig, primaryColor, agentBg, visitorBg, isClosable, onClose, onTabChange, onCardClick, onNavFromMenu, onSelectUser, onBackFromChat, onOpenTicket, onSend, onTogglePause, onReport, onBlock, onUnblock, onStartCall, onEndCall, onMinimizeCall, onToggleMute, onToggleCamera, onRaiseTicket, onTransfer, onToggleMessageSound, setScreen, setActiveTab, setViewingTicketId, setListEntranceAnimation, listCtxForUser, } = props;
+    const config = widgetConfig;
+    const callInProgress = callSession.state === 'calling' || callSession.state === 'connected';
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        isClosable && screen !== 'chat' && screen !== 'call' && !effectiveViewerBlocked && (react_1.default.createElement("div", { style: { position: 'absolute', top: 12, right: 12, zIndex: 20 } },
+            react_1.default.createElement("button", { onClick: onClose, title: "Close", style: {
+                    width: 26, height: 26, borderRadius: '50%', background: 'rgba(0,0,0,0.22)', border: 'none',
+                    display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
+                } },
+                react_1.default.createElement("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none" },
+                    react_1.default.createElement("path", { d: "M18 6L6 18M6 6l12 12", stroke: "#fff", strokeWidth: "2.5", strokeLinecap: "round" }))))),
+        config.status === 'MAINTENANCE' && react_1.default.createElement(MaintenanceView_1.MaintenanceView, { primaryColor: primaryColor }),
+        config.status === 'DISABLE' && (react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', padding: 32, textAlign: 'center', gap: 12 } },
+            react_1.default.createElement("div", { style: { fontSize: 40 } }, "\uD83D\uDD12"),
+            react_1.default.createElement("p", { style: { fontWeight: 700, color: '#1a2332' } }, "Chat is disabled"),
+            isClosable && react_1.default.createElement("button", { onClick: onClose, style: { padding: '9px 20px', borderRadius: 10, border: 'none', background: primaryColor, color: '#fff', cursor: 'pointer', fontWeight: 700 } }, "Close"))),
+        config.status === 'ACTIVE' && effectiveViewerBlocked && (react_1.default.createElement(ViewerBlockedScreen_1.ViewerBlockedScreen, { config: config, apiKey: apiKey, onClose: onClose })),
+        config.status === 'ACTIVE' && !effectiveViewerBlocked && !permissionsOk && (react_1.default.createElement(PermissionsGateScreen_1.PermissionsGateScreen, { primaryColor: primaryColor, widgetId: config.id, onGranted: () => { } })),
+        config.status === 'ACTIVE' && !effectiveViewerBlocked && permissionsOk && (react_1.default.createElement("div", { className: "cw-scroll", style: { flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' } },
+            screen === 'home' && (react_1.default.createElement(HomeScreen_1.HomeScreen, { config: config, apiKey: apiKey, onNavigate: onCardClick, onOpenTicket: onOpenTicket, tickets: tickets })),
+            screen === 'user-list' && (react_1.default.createElement(UserListScreen_1.UserListScreen, { context: userListCtx, users: filteredUsers, primaryColor: primaryColor, viewerType: (_a = config.viewerType) !== null && _a !== void 0 ? _a : 'user', onBack: () => { setListEntranceAnimation(false); setScreen('home'); }, onSelectUser: onSelectUser, onBlockList: userListCtx === 'conversation' ? () => setScreen('block-list') : undefined, useHomeHeader: userListCtx === 'support' && config.viewerType !== 'developer', animateEntrance: listEntranceAnimation })),
+            screen === 'chat' && activeUser && (react_1.default.createElement(ChatScreen_1.ChatScreen, { activeUser: activeUser, messages: messages, config: config, isPaused: isPaused, isReported: isReported, isBlocked: isBlocked, onSend: onSend, onBack: onBackFromChat, onClose: onClose, onTogglePause: onTogglePause, onReport: onReport, onBlock: onBlock, onStartCall: onStartCall, onNavAction: onNavFromMenu, otherDevelopers: otherDevelopers, onTransferToDeveloper: onTransfer, messageSoundEnabled: messageSoundEnabled, onToggleMessageSound: onToggleMessageSound })),
+            screen === 'call' && callSession.peer && (react_1.default.createElement(CallScreen_1.CallScreen, { session: callSession, localVideoRef: localVideoRef, remoteVideoRef: remoteVideoRef, onEnd: onEndCall, onToggleMute: onToggleMute, onToggleCamera: onToggleCamera, primaryColor: primaryColor, onMinimize: onMinimizeCall })),
+            screen === 'recent-chats' && (react_1.default.createElement(RecentChatsScreen_1.RecentChatsScreen, { chats: recentChats, config: config, onSelectChat: u => onSelectUser(u, listCtxForUser(u, viewerIsDev)), animateEntrance: listEntranceAnimation })),
+            screen === 'tickets' && (react_1.default.createElement(TicketScreen_1.TicketScreen, { tickets: tickets, config: config, onNewTicket: () => { setListEntranceAnimation(false); setScreen('ticket-new'); }, onSelectTicket: id => { setListEntranceAnimation(false); setViewingTicketId(id); setScreen('ticket-detail'); }, animateEntrance: listEntranceAnimation })),
+            screen === 'ticket-new' && (react_1.default.createElement(TicketFormScreen_1.TicketFormScreen, { config: config, onSubmit: onRaiseTicket, onCancel: () => setScreen('tickets') })),
+            screen === 'ticket-detail' && viewingTicketId && (() => {
+                const t = tickets.find(x => x.id === viewingTicketId);
+                return t ? (react_1.default.createElement(TicketDetailScreen_1.TicketDetailScreen, { ticket: t, config: config, onBack: () => { setViewingTicketId(null); setScreen('tickets'); } })) : null;
+            })(),
+            screen === 'block-list' && (react_1.default.createElement(BlockList_1.BlockListScreen, { blockedUsers: blockedUsers, config: config, onUnblock: onUnblock, onBack: () => { setScreen('home'); setActiveTab('home'); } })))),
+        config.status === 'ACTIVE' && !effectiveViewerBlocked && permissionsOk &&
+            !['chat', 'call', 'user-list', 'block-list', 'ticket-detail', 'ticket-new'].includes(screen) && (react_1.default.createElement(BottomTabs_1.BottomTabs, { active: activeTab, onChange: onTabChange, primaryColor: primaryColor }))));
+};
+// ─── Global CSS ───────────────────────────────────────────────────────────────
+function GLOBAL_STYLES(agentBg, visitorBg, headerBg) {
+    return `
+    @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap');
+    .cw-root * { box-sizing:border-box; font-family:'DM Sans','Segoe UI',sans-serif; }
+    @keyframes spin          { to { transform: rotate(360deg); } }
+    @keyframes cw-btnPop     { from { transform:scale(0.8);opacity:0; } to { transform:scale(1);opacity:1; } }
+    @keyframes cw-fadeUp     { from { opacity:0;transform:translateY(10px); } to { opacity:1;transform:translateY(0); } }
+    @keyframes cw-slideIn    { from { opacity:0;transform:translateX(18px); } to { opacity:1;transform:translateX(0); } }
+    @keyframes cw-pulse      { 0%,100%{opacity:1} 50%{opacity:0.4} }
+    @keyframes cw-slideInRight  { from{transform:translateX(100%);opacity:0} to{transform:translateX(0);opacity:1} }
+    @keyframes cw-slideOutRight { from{transform:translateX(0);opacity:1}    to{transform:translateX(100%);opacity:0} }
+    @keyframes cw-slideInLeft   { from{transform:translateX(-100%);opacity:0} to{transform:translateX(0);opacity:1} }
+    @keyframes cw-slideOutLeft  { from{transform:translateX(0);opacity:1}    to{transform:translateX(-100%);opacity:0} }
+    @keyframes cw-popupEnter { from{transform:translate(-50%,-50%) scale(0.9);opacity:0} to{transform:translate(-50%,-50%) scale(1);opacity:1} }
+    @keyframes cw-popupExit  { from{transform:translate(-50%,-50%) scale(1);opacity:1}  to{transform:translate(-50%,-50%) scale(0.9);opacity:0} }
+    .cw-slideInRight  { animation:cw-slideInRight  0.32s cubic-bezier(0.22,1,0.36,1) both; }
+    .cw-slideOutRight { animation:cw-slideOutRight 0.28s cubic-bezier(0.55,0,1,0.45) both; }
+    .cw-slideInLeft   { animation:cw-slideInLeft   0.32s cubic-bezier(0.22,1,0.36,1) both; }
+    .cw-slideOutLeft  { animation:cw-slideOutLeft  0.28s cubic-bezier(0.55,0,1,0.45) both; }
+    .cw-popup-enter   { animation:cw-popupEnter    0.28s cubic-bezier(0.22,1,0.36,1) both; }
+    .cw-popup-exit    { animation:cw-popupExit     0.22s cubic-bezier(0.55,0,1,0.45) both; }
+    .cw-scroll::-webkit-scrollbar       { width:4px; }
+    .cw-scroll::-webkit-scrollbar-track { background:transparent; }
+    .cw-scroll::-webkit-scrollbar-thumb { background:#e0e0e0; border-radius:4px; }
+    /* Ajaxter theme vars */
+    :root {
+      --cw-agent-bg:   ${agentBg};
+      --cw-visitor-bg: ${visitorBg};
+      --cw-header-bg:  ${headerBg};
+    }
+  `;
+}
 //# sourceMappingURL=ChatWidget.js.map