ajaxter-chat 3.0.16 → 3.0.17

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

@@ -8,6 +8,8 @@ interface CallScreenProps {
     onToggleMute: () => void;
     onToggleCamera: () => void;
     primaryColor: string;
+    /** Collapse the drawer while keeping the call active (mic/cam stay on). */
+    onMinimize?: () => void;
 }
 export declare const CallScreen: React.FC<CallScreenProps>;
 export {};

package/dist/components/CallScreen/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { avatarColor, initials } from '../../utils/chat';
-export const CallScreen = ({ session, localVideoRef, remoteVideoRef, onEnd, onToggleMute, onToggleCamera, primaryColor, }) => {
+export const CallScreen = ({ session, localVideoRef, remoteVideoRef, onEnd, onToggleMute, onToggleCamera, primaryColor, onMinimize, }) => {
     const [duration, setDuration] = useState(0);
     const peer = session.peer;
     useEffect(() => {
@@ -25,7 +25,17 @@ export const CallScreen = ({ session, localVideoRef, remoteVideoRef, onEnd, onTo
                     objectFit: 'cover', border: '2px solid rgba(255,255,255,0.3)',
                     display: session.isCameraOn ? 'block' : 'none',
                     zIndex: 10,
-                } }), _jsxs("div", { style: { position: 'relative', zIndex: 5, display: 'flex', flexDirection: 'column', height: '100%', background: 'rgba(0,0,0,0.35)' }, children: [_jsx("div", { style: { padding: '16px 18px', display: 'flex', alignItems: 'center', gap: 10 }, children: _jsx("div", { style: { flex: 1 }, children: _jsxs("div", { style: { fontWeight: 700, fontSize: 15, color: '#fff' }, children: [session.state === 'calling' && 'Calling...', session.state === 'connected' && 'Connected', session.state === 'ended' && 'Call Ended'] }) }) }), _jsx("div", { style: { flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 16 }, children: peer && (_jsxs(_Fragment, { children: [_jsx("div", { style: {
+                } }), _jsxs("div", { style: { position: 'relative', zIndex: 5, display: 'flex', flexDirection: 'column', height: '100%', background: 'rgba(0,0,0,0.35)' }, children: [_jsxs("div", { style: { padding: '16px 18px', display: 'flex', alignItems: 'center', gap: 10 }, children: [_jsx("div", { style: { flex: 1 }, children: _jsxs("div", { style: { fontWeight: 700, fontSize: 15, color: '#fff' }, children: [session.state === 'calling' && 'Calling...', session.state === 'connected' && 'Connected', session.state === 'ended' && 'Call Ended'] }) }), (session.state === 'calling' || session.state === 'connected') && onMinimize && (_jsx("button", { type: "button", onClick: onMinimize, title: "Minimize \u2014 keep call while you use the page", style: {
+                                    padding: '8px 12px',
+                                    borderRadius: 10,
+                                    border: '1px solid rgba(255,255,255,0.35)',
+                                    background: 'rgba(0,0,0,0.25)',
+                                    color: '#fff',
+                                    fontSize: 13,
+                                    fontWeight: 600,
+                                    cursor: 'pointer',
+                                    flexShrink: 0,
+                                }, children: "Minimize" }))] }), _jsx("div", { style: { flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 16 }, children: peer && (_jsxs(_Fragment, { children: [_jsx("div", { style: {
                                         width: 90, height: 90, borderRadius: '50%',
                                         backgroundColor: avatarColor(peer.name),
                                         display: 'flex', alignItems: 'center', justifyContent: 'center',

package/dist/components/ChatScreen/index.js

@@ -256,32 +256,32 @@ export const ChatScreen = ({ activeUser, messages, config, isPaused, isReported,
     return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', height: '100%', animation: 'cw-slideIn 0.22s ease', position: 'relative', overflow: 'hidden' }, children: [_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: onBack, style: hdrBtn, "aria-label": "Back", children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M19 12H5M5 12L12 19M5 12L12 5", stroke: "#fff", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "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 }), onToggleMessageSound && (_jsxs("label", { style: {
+                }, children: [_jsx("button", { type: "button", onClick: onBack, style: hdrBtn, "aria-label": "Back", children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M19 12H5M5 12L12 19M5 12L12 5", stroke: "#fff", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "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 }), onToggleMessageSound && (_jsx("label", { style: {
                             display: 'flex',
                             alignItems: 'center',
                             gap: 6,
                             cursor: 'pointer',
                             flexShrink: 0,
                             marginLeft: 4,
-                        }, children: [_jsx("span", { style: { fontSize: 10, color: 'rgba(255,255,255,0.85)', fontWeight: 600 }, children: "Sound" }), _jsx("button", { type: "button", role: "switch", "aria-checked": messageSoundEnabled, onClick: () => onToggleMessageSound(!messageSoundEnabled), style: {
-                                    width: 36,
-                                    height: 20,
-                                    borderRadius: 10,
-                                    border: 'none',
-                                    background: messageSoundEnabled ? 'rgba(255,255,255,0.35)' : 'rgba(0,0,0,0.2)',
-                                    position: 'relative',
-                                    cursor: 'pointer',
-                                    padding: 0,
-                                }, children: _jsx("span", { style: {
-                                        position: 'absolute',
-                                        top: 2,
-                                        left: messageSoundEnabled ? 18 : 2,
-                                        width: 16,
-                                        height: 16,
-                                        borderRadius: '50%',
-                                        background: '#fff',
-                                        transition: 'left 0.15s ease',
-                                    } }) })] })), 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: [navEntriesForChat(config.chatType, viewerIsDev).map(item => (_jsx(MenuItem, { icon: item.icon, label: item.label, onClick: () => { setShowMenu(false); onNavAction(item.key); } }, item.key))), _jsx("div", { style: { borderTop: '1px solid #f0f2f5', margin: '4px 0' } }), config.allowTranscriptDownload && (_jsx(MenuItem, { icon: "\uD83D\uDCE5", label: "Download Transcript", onClick: handleTranscript })), viewerIsDev && activeUser.type === 'user' && otherDevelopers.length > 0 && onTransferToDeveloper && (_jsx(MenuItem, { icon: "\uD83D\uDD00", label: "Transfer to developer", onClick: () => { setShowMenu(false); setTransferOpen(true); } })), _jsx(MenuItem, { icon: isPaused ? '▶️' : '⏸', label: isPaused ? 'Resume Chat' : 'Pause Chat', onClick: () => { setShowMenu(false); setShowConfirm('pause'); } }), config.allowReport && !isReported && (_jsx(MenuItem, { icon: "\u26A0\uFE0F", label: "Report Chat", onClick: () => { setShowMenu(false); setShowConfirm('report'); } })), config.allowBlock && activeUser.type === 'user' && !isBlocked && (_jsx(MenuItem, { icon: "\uD83D\uDEAB", label: "Block User", onClick: () => { setShowMenu(false); setShowConfirm('block'); }, danger: true })), _jsx("div", { style: { borderTop: '1px solid #f0f2f5', margin: '4px 0' } }), _jsx(MenuItem, { icon: "\u2715", label: "Close Chat", onClick: onClose })] })), isPaused && (_jsxs("div", { style: { background: '#fef3c7', padding: '8px 16px', fontSize: 12, fontWeight: 600, color: '#92400e', textAlign: 'center', flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }, children: ["\u23F8 Chat is paused \u2014 users cannot send messages", _jsx("button", { type: "button", onClick: onTogglePause, style: { background: '#92400e', color: '#fff', border: 'none', borderRadius: 6, padding: '2px 8px', fontSize: 11, cursor: 'pointer', marginLeft: 4 }, children: "Resume" })] })), isBlocked && (_jsx("div", { style: { background: '#fee2e2', padding: '8px 16px', fontSize: 12, fontWeight: 600, color: '#991b1b', textAlign: 'center', flexShrink: 0 }, children: "\uD83D\uDEAB This user is blocked" })), isReported && (_jsx("div", { style: { background: '#fef3c7', padding: '6px 16px', fontSize: 11, color: '#92400e', textAlign: 'center', flexShrink: 0 }, children: "\u26A0\uFE0F This chat has been reported" })), _jsxs("div", { style: { flex: 1, overflowY: 'auto', padding: '14px', display: 'flex', flexDirection: 'column', gap: 10, background: '#f8f9fc' }, className: "cw-scroll", children: [grouped.map(({ date, msgs }) => (_jsxs(React.Fragment, { children: [_jsx(DateDivider, { label: date }), msgs.map(msg => (_jsx(Bubble, { msg: msg, primaryColor: config.primaryColor }, msg.id)))] }, date))), messages.length === 0 && (_jsxs("div", { style: { margin: 'auto', textAlign: 'center', color: '#c4cad4', fontSize: 13 }, children: [_jsx("div", { style: { fontSize: 28, marginBottom: 8 }, children: "\uD83D\uDCAC" }), "Say hello to ", activeUser.name, "!"] })), _jsx("div", { ref: endRef })] }), _jsxs("div", { style: { borderTop: '1px solid #eef0f5', padding: '10px 12px 8px', background: '#fff', flexShrink: 0, position: 'relative' }, children: [privacyEnabled && showPrivacy && (_jsxs("div", { style: {
+                        }, children: _jsx("button", { type: "button", role: "switch", "aria-checked": messageSoundEnabled, onClick: () => onToggleMessageSound(!messageSoundEnabled), "aria-label": "Toggle message sound", title: "Toggle message sound", style: {
+                                width: 36,
+                                height: 20,
+                                borderRadius: 10,
+                                border: 'none',
+                                background: messageSoundEnabled ? 'rgba(255,255,255,0.35)' : 'rgba(0,0,0,0.2)',
+                                position: 'relative',
+                                cursor: 'pointer',
+                                padding: 0,
+                            }, children: _jsx("span", { style: {
+                                    position: 'absolute',
+                                    top: 2,
+                                    left: messageSoundEnabled ? 18 : 2,
+                                    width: 16,
+                                    height: 16,
+                                    borderRadius: '50%',
+                                    background: '#fff',
+                                    transition: 'left 0.15s ease',
+                                } }) }) })), 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: [navEntriesForChat(config.chatType, viewerIsDev).map(item => (_jsx(MenuItem, { icon: item.icon, label: item.label, onClick: () => { setShowMenu(false); onNavAction(item.key); } }, item.key))), _jsx("div", { style: { borderTop: '1px solid #f0f2f5', margin: '4px 0' } }), config.allowTranscriptDownload && (_jsx(MenuItem, { icon: "\uD83D\uDCE5", label: "Download Transcript", onClick: handleTranscript })), viewerIsDev && activeUser.type === 'user' && otherDevelopers.length > 0 && onTransferToDeveloper && (_jsx(MenuItem, { icon: "\uD83D\uDD00", label: "Transfer to developer", onClick: () => { setShowMenu(false); setTransferOpen(true); } })), _jsx(MenuItem, { icon: isPaused ? '▶️' : '⏸', label: isPaused ? 'Resume Chat' : 'Pause Chat', onClick: () => { setShowMenu(false); setShowConfirm('pause'); } }), config.allowReport && !isReported && (_jsx(MenuItem, { icon: "\u26A0\uFE0F", label: "Report Chat", onClick: () => { setShowMenu(false); setShowConfirm('report'); } })), config.allowBlock && activeUser.type === 'user' && !isBlocked && (_jsx(MenuItem, { icon: "\uD83D\uDEAB", label: "Block User", onClick: () => { setShowMenu(false); setShowConfirm('block'); }, danger: true })), _jsx("div", { style: { borderTop: '1px solid #f0f2f5', margin: '4px 0' } }), _jsx(MenuItem, { icon: "\u2715", label: "Close Chat", onClick: onClose })] })), isPaused && (_jsxs("div", { style: { background: '#fef3c7', padding: '8px 16px', fontSize: 12, fontWeight: 600, color: '#92400e', textAlign: 'center', flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }, children: ["\u23F8 Chat is paused \u2014 users cannot send messages", _jsx("button", { type: "button", onClick: onTogglePause, style: { background: '#92400e', color: '#fff', border: 'none', borderRadius: 6, padding: '2px 8px', fontSize: 11, cursor: 'pointer', marginLeft: 4 }, children: "Resume" })] })), isBlocked && (_jsx("div", { style: { background: '#fee2e2', padding: '8px 16px', fontSize: 12, fontWeight: 600, color: '#991b1b', textAlign: 'center', flexShrink: 0 }, children: "\uD83D\uDEAB This user is blocked" })), isReported && (_jsx("div", { style: { background: '#fef3c7', padding: '6px 16px', fontSize: 11, color: '#92400e', textAlign: 'center', flexShrink: 0 }, children: "\u26A0\uFE0F This chat has been reported" })), _jsxs("div", { style: { flex: 1, overflowY: 'auto', padding: '14px', display: 'flex', flexDirection: 'column', gap: 10, background: '#f8f9fc' }, className: "cw-scroll", children: [grouped.map(({ date, msgs }) => (_jsxs(React.Fragment, { children: [_jsx(DateDivider, { label: date }), msgs.map(msg => (_jsx(Bubble, { msg: msg, primaryColor: config.primaryColor }, msg.id)))] }, date))), messages.length === 0 && (_jsxs("div", { style: { margin: 'auto', textAlign: 'center', color: '#c4cad4', fontSize: 13 }, children: [_jsx("div", { style: { fontSize: 28, marginBottom: 8 }, children: "\uD83D\uDCAC" }), "Say hello to ", activeUser.name, "!"] })), _jsx("div", { ref: endRef })] }), _jsxs("div", { style: { borderTop: '1px solid #eef0f5', padding: '10px 12px 8px', background: '#fff', flexShrink: 0, position: 'relative' }, children: [privacyEnabled && showPrivacy && (_jsxs("div", { style: {
                             position: 'relative',
                             marginBottom: 10,
                             padding: '12px 36px 12px 12px',

package/dist/components/ChatWidget.js

@@ -17,6 +17,7 @@ import { TicketDetailScreen } from './TicketDetailScreen';
 import { TicketFormScreen } from './TicketFormScreen';
 import { BlockListScreen } from './BlockList';
 import { CallScreen } from './CallScreen';
+import { MiniCallBar } from './MiniCallBar';
 import { MaintenanceView } from './MaintenanceView';
 import { BottomTabs } from './Tabs/BottomTabs';
 import { ViewerBlockedScreen } from './ViewerBlockedScreen';
@@ -36,6 +37,8 @@ export const ChatWidget = ({ theme: localTheme, viewer }) => {
     /* Drawer open state */
     const [isOpen, setIsOpen] = useState(false);
     const [closing, setClosing] = useState(false); // for slide-out animation
+    /** True when user hid the drawer during ringing/connected call; WebRTC session stays active. */
+    const [callMinimized, setCallMinimized] = useState(false);
     /* Navigation */
     const [activeTab, setActiveTab] = useState('home');
     const [screen, setScreen] = useState('home');
@@ -82,10 +85,16 @@ export const ChatWidget = ({ theme: localTheme, viewer }) => {
     const { messages, activeUser, isPaused, isReported, selectUser, sendMessage, togglePause, reportChat, clearChat, setMessages, } = useChat();
     /* WebRTC hook */
     const { session: callSession, localVideoRef, remoteVideoRef, startCall, endCall, toggleMute, toggleCamera } = useWebRTC();
+    const callInProgress = callSession.state === 'calling' || callSession.state === 'connected';
+    useEffect(() => {
+        if (!callInProgress)
+            setCallMinimized(false);
+    }, [callInProgress]);
     /* ── Drawer open/close with slide animation ───────────────────────────── */
     const openDrawer = () => {
         setClosing(false);
         setIsOpen(true);
+        setCallMinimized(false);
     };
     const persistWidgetState = useCallback(() => {
         var _a;
@@ -315,8 +324,13 @@ export const ChatWidget = ({ theme: localTheme, viewer }) => {
     }, [activeUser, startCall]);
     const handleEndCall = useCallback(() => {
         endCall();
+        setCallMinimized(false);
         setScreen('chat');
     }, [endCall]);
+    const minimizeCall = useCallback(() => {
+        setCallMinimized(true);
+        closeDrawer();
+    }, [closeDrawer]);
     /* ── Derived ─────────────────────────────────────────────────────────── */
     const isBlocked = activeUser ? blockedUids.includes(activeUser.uid) : false;
     const widgetConfig = useMemo(() => {
@@ -442,7 +456,7 @@ export const ChatWidget = ({ theme: localTheme, viewer }) => {
         @media (max-width: 1024px) {
           .cw-drawer-panel { width: 100%; }
         }
-      ` }), !isOpen && (_jsxs("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 => {
+      ` }), !isOpen && callMinimized && callInProgress && callSession.peer && (_jsx(MiniCallBar, { session: callSession, primaryColor: primaryColor, buttonPosition: theme.buttonPosition, onExpand: openDrawer, onEnd: handleEndCall })), !isOpen && (_jsxs("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 => {
@@ -481,7 +495,7 @@ export const ChatWidget = ({ theme: localTheme, viewer }) => {
                                     right: theme.buttonPosition === 'bottom-left' ? 'auto' : 12,
                                     left: theme.buttonPosition === 'bottom-left' ? 12 : 'auto',
                                     zIndex: 20, display: 'flex', gap: 6,
-                                }, children: _jsx(CornerBtn, { onClick: closeDrawer, title: "Close", children: _jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M18 6L6 18M6 6l12 12", stroke: "#fff", strokeWidth: "2.5", strokeLinecap: "round" }) }) }) })), widgetConfig.status === 'MAINTENANCE' && (_jsx(MaintenanceView, { primaryColor: primaryColor })), widgetConfig.status === 'DISABLE' && (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', padding: 32, textAlign: 'center', gap: 12 }, children: [_jsx("div", { style: { fontSize: 40 }, children: "\uD83D\uDD12" }), _jsx("p", { style: { fontWeight: 700, color: '#1a2332' }, children: "Chat is disabled" }), _jsx("button", { onClick: closeDrawer, style: { padding: '9px 20px', borderRadius: 10, border: 'none', background: primaryColor, color: '#fff', cursor: 'pointer', fontWeight: 700 }, children: "Close" })] })), widgetConfig.status === 'ACTIVE' && effectiveViewerBlocked && (_jsx(ViewerBlockedScreen, { config: widgetConfig, apiKey: apiKey, onClose: closeDrawer })), widgetConfig.status === 'ACTIVE' && !effectiveViewerBlocked && !permissionsOk && (_jsx(PermissionsGateScreen, { primaryColor: primaryColor, widgetId: widgetConfig.id, onGranted: () => setPermissionsOk(true) })), widgetConfig.status === 'ACTIVE' && !effectiveViewerBlocked && permissionsOk && (_jsxs("div", { className: "cw-scroll", style: { flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }, children: [screen === 'home' && (_jsx(HomeScreen, { config: widgetConfig, apiKey: apiKey, onNavigate: handleCardClick, onOpenTicket: handleOpenTicket, tickets: tickets })), screen === 'user-list' && (_jsx(UserListScreen, { context: userListCtx, users: filteredUsers, primaryColor: primaryColor, viewerType: (_e = widgetConfig.viewerType) !== null && _e !== void 0 ? _e : 'user', onBack: () => { setListEntranceAnimation(false); setScreen('home'); }, onSelectUser: handleSelectUser, onBlockList: userListCtx === 'conversation' ? () => setScreen('block-list') : undefined, useHomeHeader: userListCtx === 'support' && widgetConfig.viewerType !== 'developer', animateEntrance: listEntranceAnimation })), screen === 'chat' && activeUser && (_jsx(ChatScreen, { activeUser: activeUser, messages: messages, config: widgetConfig, isPaused: isPaused, isReported: isReported, isBlocked: isBlocked, onSend: sendMessage, onBack: handleBackFromChat, onClose: closeDrawer, onTogglePause: handleTogglePause, onReport: reportChat, onBlock: handleBlock, onStartCall: handleStartCall, onNavAction: handleNavFromMenu, otherDevelopers: otherDevelopers, onTransferToDeveloper: handleTransferToDeveloper, messageSoundEnabled: messageSoundEnabled, onToggleMessageSound: toggleMessageSound })), screen === 'call' && callSession.peer && (_jsx(CallScreen, { session: callSession, localVideoRef: localVideoRef, remoteVideoRef: remoteVideoRef, onEnd: handleEndCall, onToggleMute: toggleMute, onToggleCamera: toggleCamera, primaryColor: primaryColor })), screen === 'recent-chats' && (_jsx(RecentChatsScreen, { chats: recentChats, config: widgetConfig, onSelectChat: u => handleSelectUser(u, listCtxForUser(u, viewerIsDev)), animateEntrance: listEntranceAnimation })), screen === 'tickets' && (_jsx(TicketScreen, { tickets: tickets, config: widgetConfig, onNewTicket: () => { setListEntranceAnimation(false); setScreen('ticket-new'); }, onSelectTicket: id => {
+                                }, children: _jsx(CornerBtn, { onClick: closeDrawer, title: "Close", children: _jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M18 6L6 18M6 6l12 12", stroke: "#fff", strokeWidth: "2.5", strokeLinecap: "round" }) }) }) })), widgetConfig.status === 'MAINTENANCE' && (_jsx(MaintenanceView, { primaryColor: primaryColor })), widgetConfig.status === 'DISABLE' && (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', padding: 32, textAlign: 'center', gap: 12 }, children: [_jsx("div", { style: { fontSize: 40 }, children: "\uD83D\uDD12" }), _jsx("p", { style: { fontWeight: 700, color: '#1a2332' }, children: "Chat is disabled" }), _jsx("button", { onClick: closeDrawer, style: { padding: '9px 20px', borderRadius: 10, border: 'none', background: primaryColor, color: '#fff', cursor: 'pointer', fontWeight: 700 }, children: "Close" })] })), widgetConfig.status === 'ACTIVE' && effectiveViewerBlocked && (_jsx(ViewerBlockedScreen, { config: widgetConfig, apiKey: apiKey, onClose: closeDrawer })), widgetConfig.status === 'ACTIVE' && !effectiveViewerBlocked && !permissionsOk && (_jsx(PermissionsGateScreen, { primaryColor: primaryColor, widgetId: widgetConfig.id, onGranted: () => setPermissionsOk(true) })), widgetConfig.status === 'ACTIVE' && !effectiveViewerBlocked && permissionsOk && (_jsxs("div", { className: "cw-scroll", style: { flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }, children: [screen === 'home' && (_jsx(HomeScreen, { config: widgetConfig, apiKey: apiKey, onNavigate: handleCardClick, onOpenTicket: handleOpenTicket, tickets: tickets })), screen === 'user-list' && (_jsx(UserListScreen, { context: userListCtx, users: filteredUsers, primaryColor: primaryColor, viewerType: (_e = widgetConfig.viewerType) !== null && _e !== void 0 ? _e : 'user', onBack: () => { setListEntranceAnimation(false); setScreen('home'); }, onSelectUser: handleSelectUser, onBlockList: userListCtx === 'conversation' ? () => setScreen('block-list') : undefined, useHomeHeader: userListCtx === 'support' && widgetConfig.viewerType !== 'developer', animateEntrance: listEntranceAnimation })), screen === 'chat' && activeUser && (_jsx(ChatScreen, { activeUser: activeUser, messages: messages, config: widgetConfig, isPaused: isPaused, isReported: isReported, isBlocked: isBlocked, onSend: sendMessage, onBack: handleBackFromChat, onClose: closeDrawer, onTogglePause: handleTogglePause, onReport: reportChat, onBlock: handleBlock, onStartCall: handleStartCall, onNavAction: handleNavFromMenu, otherDevelopers: otherDevelopers, onTransferToDeveloper: handleTransferToDeveloper, messageSoundEnabled: messageSoundEnabled, onToggleMessageSound: toggleMessageSound })), screen === 'call' && callSession.peer && (_jsx(CallScreen, { session: callSession, localVideoRef: localVideoRef, remoteVideoRef: remoteVideoRef, onEnd: handleEndCall, onToggleMute: toggleMute, onToggleCamera: toggleCamera, primaryColor: primaryColor, onMinimize: minimizeCall })), screen === 'recent-chats' && (_jsx(RecentChatsScreen, { chats: recentChats, config: widgetConfig, onSelectChat: u => handleSelectUser(u, listCtxForUser(u, viewerIsDev)), animateEntrance: listEntranceAnimation })), screen === 'tickets' && (_jsx(TicketScreen, { tickets: tickets, config: widgetConfig, onNewTicket: () => { setListEntranceAnimation(false); setScreen('ticket-new'); }, onSelectTicket: id => {
                                             setListEntranceAnimation(false);
                                             setViewingTicketId(id);
                                             setScreen('ticket-detail');

package/dist/components/HomeScreen/index.js

@@ -72,37 +72,37 @@ export const HomeScreen = ({ config, apiKey, onNavigate, onOpenTicket, tickets }
                             justifyContent: 'center',
                             gap: 5,
                             flexShrink: 0,
-                        }, children: [_jsx("span", { style: { width: 18, height: 2, background: '#334155', borderRadius: 1 } }), _jsx("span", { style: { width: 18, height: 2, background: '#334155', borderRadius: 1 } }), _jsx("span", { style: { width: 18, height: 2, background: '#334155', borderRadius: 1 } })] }), _jsx("div", { style: { flex: 1, minWidth: 0 } }), _jsxs("div", { style: {
+                        }, children: [_jsx("span", { style: { width: 18, height: 2, background: '#334155', borderRadius: 1 } }), _jsx("span", { style: { width: 18, height: 2, background: '#334155', borderRadius: 1 } }), _jsx("span", { style: { width: 18, height: 2, background: '#334155', borderRadius: 1 } })] }), _jsx("div", { style: { flex: 1, minWidth: 0 } }), _jsx("div", { style: {
                             display: 'flex',
                             alignItems: 'center',
                             gap: 6,
                             flexShrink: 0,
                             flexWrap: 'wrap',
                             justifyContent: 'flex-end',
-                        }, children: [_jsx("span", { style: { fontSize: 11, fontWeight: 700, color: '#94a3b8', textTransform: 'uppercase', letterSpacing: '0.06em' }, children: "Status" }), _jsx("div", { role: "group", "aria-label": "Your status", style: {
-                                    display: 'flex',
-                                    borderRadius: 10,
-                                    padding: 3,
-                                    background: '#f1f5f9',
-                                    gap: 2,
-                                }, children: STATUS_OPTIONS.map(({ value, label }) => {
-                                    const isOn = presence === value;
-                                    return (_jsx("button", { type: "button", onClick: () => setPresenceAndSave(value), style: {
-                                            border: 'none',
-                                            borderRadius: 8,
-                                            padding: '7px 10px',
-                                            fontSize: 11,
-                                            fontWeight: 700,
-                                            letterSpacing: '0.04em',
-                                            cursor: 'pointer',
-                                            fontFamily: 'inherit',
-                                            textTransform: 'uppercase',
-                                            background: isOn ? config.primaryColor : 'transparent',
-                                            color: isOn ? '#fff' : '#64748b',
-                                            boxShadow: isOn ? `0 2px 8px ${config.primaryColor}55` : 'none',
-                                            transition: 'background 0.15s, color 0.15s',
-                                        }, children: label }, value));
-                                }) })] })] }), _jsxs("div", { className: "cw-scroll", style: { flex: 1, overflowY: 'auto', padding: '20px 18px 28px' }, children: [_jsx("h1", { style: {
+                        }, children: _jsx("div", { role: "group", "aria-label": "Your status", style: {
+                                display: 'flex',
+                                borderRadius: 10,
+                                padding: 3,
+                                background: '#f1f5f9',
+                                gap: 2,
+                            }, children: STATUS_OPTIONS.map(({ value, label }) => {
+                                const isOn = presence === value;
+                                return (_jsx("button", { type: "button", onClick: () => setPresenceAndSave(value), style: {
+                                        border: 'none',
+                                        borderRadius: 8,
+                                        padding: '7px 10px',
+                                        fontSize: 11,
+                                        fontWeight: 700,
+                                        letterSpacing: '0.04em',
+                                        cursor: 'pointer',
+                                        fontFamily: 'inherit',
+                                        textTransform: 'uppercase',
+                                        background: isOn ? config.primaryColor : 'transparent',
+                                        color: isOn ? '#fff' : '#64748b',
+                                        boxShadow: isOn ? `0 2px 8px ${config.primaryColor}55` : 'none',
+                                        transition: 'background 0.15s, color 0.15s',
+                                    }, children: label }, value));
+                            }) }) })] }), _jsxs("div", { className: "cw-scroll", style: { flex: 1, overflowY: 'auto', padding: '20px 18px 28px' }, children: [_jsx("h1", { style: {
                             margin: '0 0 8px',
                             fontSize: 24,
                             fontWeight: 800,

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { CallSession } from '../../types';
+export interface MiniCallBarProps {
+    session: CallSession;
+    primaryColor: string;
+    buttonPosition: 'bottom-left' | 'bottom-right';
+    onExpand: () => void;
+    onEnd: () => void;
+}
+/**
+ * Shown when the user minimizes the widget during an active call (ringing or connected).
+ * Sits above the main launcher button so the user can work on the page and return to the call.
+ */
+export declare const MiniCallBar: React.FC<MiniCallBarProps>;

package/dist/components/MiniCallBar/index.js

@@ -0,0 +1,68 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { avatarColor, initials } from '../../utils/chat';
+/**
+ * Shown when the user minimizes the widget during an active call (ringing or connected).
+ * Sits above the main launcher button so the user can work on the page and return to the call.
+ */
+export const MiniCallBar = ({ session, primaryColor, buttonPosition, onExpand, onEnd, }) => {
+    var _a;
+    const peer = session.peer;
+    const [duration, setDuration] = useState(0);
+    useEffect(() => {
+        if (session.state !== 'connected' || !session.startedAt)
+            return;
+        const t = setInterval(() => {
+            setDuration(Math.floor((Date.now() - session.startedAt.getTime()) / 1000));
+        }, 1000);
+        return () => clearInterval(t);
+    }, [session.state, session.startedAt]);
+    const mins = String(Math.floor(duration / 60)).padStart(2, '0');
+    const secs = String(duration % 60).padStart(2, '0');
+    const pos = buttonPosition === 'bottom-left'
+        ? { left: 24, right: 'auto' }
+        : { right: 24, left: 'auto' };
+    return (_jsxs("div", { role: "toolbar", "aria-label": "Call in progress", style: Object.assign(Object.assign({ position: 'fixed', bottom: 88, zIndex: 10000 }, pos), { display: 'flex', alignItems: 'center', gap: 10, padding: '10px 14px', maxWidth: 'min(360px, calc(100vw - 48px))', borderRadius: 14, background: `linear-gradient(135deg, ${primaryColor}ee, #0f172a)`, color: '#fff', boxShadow: '0 10px 32px rgba(0,0,0,0.28)', animation: 'cw-miniBarIn 0.28s cubic-bezier(0.22,1,0.36,1)', cursor: 'default' }), children: [_jsx("style", { children: `
+        @keyframes cw-miniBarIn {
+          from { opacity: 0; transform: translateY(12px); }
+          to { opacity: 1; transform: translateY(0); }
+        }
+      ` }), _jsxs("button", { type: "button", onClick: onExpand, title: "Open call", style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 10,
+                    flex: 1,
+                    minWidth: 0,
+                    padding: 0,
+                    border: 'none',
+                    background: 'transparent',
+                    color: 'inherit',
+                    cursor: 'pointer',
+                    textAlign: 'left',
+                }, children: [peer && (_jsx("div", { style: {
+                            width: 40,
+                            height: 40,
+                            borderRadius: '50%',
+                            backgroundColor: avatarColor(peer.name),
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            fontSize: 14,
+                            fontWeight: 700,
+                            flexShrink: 0,
+                            animation: session.state === 'calling' ? 'cw-pulse 1.5s ease infinite' : 'none',
+                        }, children: initials(peer.name) })), _jsxs("div", { style: { minWidth: 0, flex: 1 }, children: [_jsx("div", { style: { fontWeight: 700, fontSize: 14, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }, children: (_a = peer === null || peer === void 0 ? void 0 : peer.name) !== null && _a !== void 0 ? _a : 'Call' }), _jsxs("div", { style: { fontSize: 12, opacity: 0.9, marginTop: 2 }, children: [session.state === 'calling' && 'Calling…', session.state === 'connected' && `${mins}:${secs}`] })] })] }), _jsx("button", { type: "button", onClick: onEnd, title: "End call", style: {
+                    width: 40,
+                    height: 40,
+                    borderRadius: '50%',
+                    border: 'none',
+                    background: '#ef4444',
+                    cursor: 'pointer',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    flexShrink: 0,
+                    boxShadow: '0 2px 10px rgba(239,68,68,0.45)',
+                }, children: _jsx("svg", { width: "18", height: "18", 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", transform: "rotate(135 12 12)" }) }) })] }));
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ajaxter-chat",
-  "version": "3.0.16",
+  "version": "3.0.17",
   "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/src/components/CallScreen/index.tsx

@@ -10,11 +10,13 @@ interface CallScreenProps {
   onToggleMute:   () => void;
   onToggleCamera: () => void;
   primaryColor:   string;
+  /** Collapse the drawer while keeping the call active (mic/cam stay on). */
+  onMinimize?:    () => void;
 }
 
 export const CallScreen: React.FC<CallScreenProps> = ({
   session, localVideoRef, remoteVideoRef,
-  onEnd, onToggleMute, onToggleCamera, primaryColor,
+  onEnd, onToggleMute, onToggleCamera, primaryColor, onMinimize,
 }) => {
   const [duration, setDuration] = useState(0);
   const peer = session.peer as ChatUser;
@@ -64,6 +66,26 @@ export const CallScreen: React.FC<CallScreenProps> = ({
               {session.state === 'ended'     && 'Call Ended'}
             </div>
           </div>
+          {(session.state === 'calling' || session.state === 'connected') && onMinimize && (
+            <button
+              type="button"
+              onClick={onMinimize}
+              title="Minimize — keep call while you use the page"
+              style={{
+                padding: '8px 12px',
+                borderRadius: 10,
+                border: '1px solid rgba(255,255,255,0.35)',
+                background: 'rgba(0,0,0,0.25)',
+                color: '#fff',
+                fontSize: 13,
+                fontWeight: 600,
+                cursor: 'pointer',
+                flexShrink: 0,
+              }}
+            >
+              Minimize
+            </button>
+          )}
         </div>
 
         {/* Center: avatar + name */}

package/src/components/ChatScreen/index.tsx

@@ -314,12 +314,13 @@ export const ChatScreen: React.FC<ChatScreenProps> = ({
               marginLeft: 4,
             }}
           >
-            <span style={{ fontSize: 10, color: 'rgba(255,255,255,0.85)', fontWeight: 600 }}>Sound</span>
             <button
               type="button"
               role="switch"
               aria-checked={messageSoundEnabled}
               onClick={() => onToggleMessageSound(!messageSoundEnabled)}
+              aria-label="Toggle message sound"
+              title="Toggle message sound"
               style={{
                 width: 36,
                 height: 20,

package/src/components/ChatWidget.tsx

@@ -19,6 +19,7 @@ import { TicketDetailScreen } from './TicketDetailScreen';
 import { TicketFormScreen } from './TicketFormScreen';
 import { BlockListScreen }   from './BlockList';
 import { CallScreen }        from './CallScreen';
+import { MiniCallBar }       from './MiniCallBar';
 import { MaintenanceView }   from './MaintenanceView';
 import { BottomTabs }        from './Tabs/BottomTabs';
 import { ViewerBlockedScreen } from './ViewerBlockedScreen';
@@ -45,6 +46,8 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewe
   /* Drawer open state */
   const [isOpen,      setIsOpen]      = useState(false);
   const [closing,     setClosing]     = useState(false); // for slide-out animation
+  /** True when user hid the drawer during ringing/connected call; WebRTC session stays active. */
+  const [callMinimized, setCallMinimized] = useState(false);
 
   /* Navigation */
   const [activeTab,    setActiveTab]    = useState<BottomTab>('home');
@@ -98,10 +101,18 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewe
   /* WebRTC hook */
   const { session: callSession, localVideoRef, remoteVideoRef, startCall, endCall, toggleMute, toggleCamera } = useWebRTC();
 
+  const callInProgress =
+    callSession.state === 'calling' || callSession.state === 'connected';
+
+  useEffect(() => {
+    if (!callInProgress) setCallMinimized(false);
+  }, [callInProgress]);
+
   /* ── Drawer open/close with slide animation ───────────────────────────── */
   const openDrawer = () => {
     setClosing(false);
     setIsOpen(true);
+    setCallMinimized(false);
   };
 
   const persistWidgetState = useCallback(() => {
@@ -333,9 +344,15 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewe
 
   const handleEndCall = useCallback(() => {
     endCall();
+    setCallMinimized(false);
     setScreen('chat');
   }, [endCall]);
 
+  const minimizeCall = useCallback(() => {
+    setCallMinimized(true);
+    closeDrawer();
+  }, [closeDrawer]);
+
   /* ── Derived ─────────────────────────────────────────────────────────── */
   const isBlocked      = activeUser ? blockedUids.includes(activeUser.uid) : false;
 
@@ -472,6 +489,17 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewe
         }
       `}</style>
 
+      {/* ── Minimized call bar (drawer closed, call still active) ── */}
+      {!isOpen && callMinimized && callInProgress && callSession.peer && (
+        <MiniCallBar
+          session={callSession}
+          primaryColor={primaryColor}
+          buttonPosition={theme.buttonPosition}
+          onExpand={openDrawer}
+          onEnd={handleEndCall}
+        />
+      )}
+
       {/* ── Floating Button (unread badge + tooltip when closed) ── */}
       {!isOpen && (
         <button
@@ -698,6 +726,7 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewe
                       onToggleMute={toggleMute}
                       onToggleCamera={toggleCamera}
                       primaryColor={primaryColor}
+                      onMinimize={minimizeCall}
                     />
                   )}
 

package/src/components/HomeScreen/index.tsx

@@ -140,9 +140,6 @@ export const HomeScreen: React.FC<HomeScreenProps> = ({ config, apiKey, onNaviga
             justifyContent: 'flex-end',
           }}
         >
-          <span style={{ fontSize: 11, fontWeight: 700, color: '#94a3b8', textTransform: 'uppercase', letterSpacing: '0.06em' }}>
-            Status
-          </span>
           <div
             role="group"
             aria-label="Your status"

package/src/components/MiniCallBar/index.tsx

@@ -0,0 +1,150 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { CallSession, ChatUser } from '../../types';
+import { avatarColor, initials } from '../../utils/chat';
+
+export interface MiniCallBarProps {
+  session: CallSession;
+  primaryColor: string;
+  buttonPosition: 'bottom-left' | 'bottom-right';
+  onExpand: () => void;
+  onEnd: () => void;
+}
+
+/**
+ * Shown when the user minimizes the widget during an active call (ringing or connected).
+ * Sits above the main launcher button so the user can work on the page and return to the call.
+ */
+export const MiniCallBar: React.FC<MiniCallBarProps> = ({
+  session,
+  primaryColor,
+  buttonPosition,
+  onExpand,
+  onEnd,
+}) => {
+  const peer = session.peer as ChatUser | null;
+  const [duration, setDuration] = useState(0);
+
+  useEffect(() => {
+    if (session.state !== 'connected' || !session.startedAt) return;
+    const t = setInterval(() => {
+      setDuration(Math.floor((Date.now() - session.startedAt!.getTime()) / 1000));
+    }, 1000);
+    return () => clearInterval(t);
+  }, [session.state, session.startedAt]);
+
+  const mins = String(Math.floor(duration / 60)).padStart(2, '0');
+  const secs = String(duration % 60).padStart(2, '0');
+
+  const pos: React.CSSProperties =
+    buttonPosition === 'bottom-left'
+      ? { left: 24, right: 'auto' }
+      : { right: 24, left: 'auto' };
+
+  return (
+    <div
+      role="toolbar"
+      aria-label="Call in progress"
+      style={{
+        position: 'fixed',
+        bottom: 88,
+        zIndex: 10000,
+        ...pos,
+        display: 'flex',
+        alignItems: 'center',
+        gap: 10,
+        padding: '10px 14px',
+        maxWidth: 'min(360px, calc(100vw - 48px))',
+        borderRadius: 14,
+        background: `linear-gradient(135deg, ${primaryColor}ee, #0f172a)`,
+        color: '#fff',
+        boxShadow: '0 10px 32px rgba(0,0,0,0.28)',
+        animation: 'cw-miniBarIn 0.28s cubic-bezier(0.22,1,0.36,1)',
+        cursor: 'default',
+      }}
+    >
+      <style>{`
+        @keyframes cw-miniBarIn {
+          from { opacity: 0; transform: translateY(12px); }
+          to { opacity: 1; transform: translateY(0); }
+        }
+      `}</style>
+
+      <button
+        type="button"
+        onClick={onExpand}
+        title="Open call"
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 10,
+          flex: 1,
+          minWidth: 0,
+          padding: 0,
+          border: 'none',
+          background: 'transparent',
+          color: 'inherit',
+          cursor: 'pointer',
+          textAlign: 'left',
+        }}
+      >
+        {peer && (
+          <div
+            style={{
+              width: 40,
+              height: 40,
+              borderRadius: '50%',
+              backgroundColor: avatarColor(peer.name),
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              fontSize: 14,
+              fontWeight: 700,
+              flexShrink: 0,
+              animation: session.state === 'calling' ? 'cw-pulse 1.5s ease infinite' : 'none',
+            }}
+          >
+            {initials(peer.name)}
+          </div>
+        )}
+        <div style={{ minWidth: 0, flex: 1 }}>
+          <div style={{ fontWeight: 700, fontSize: 14, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+            {peer?.name ?? 'Call'}
+          </div>
+          <div style={{ fontSize: 12, opacity: 0.9, marginTop: 2 }}>
+            {session.state === 'calling' && 'Calling…'}
+            {session.state === 'connected' && `${mins}:${secs}`}
+          </div>
+        </div>
+      </button>
+
+      <button
+        type="button"
+        onClick={onEnd}
+        title="End call"
+        style={{
+          width: 40,
+          height: 40,
+          borderRadius: '50%',
+          border: 'none',
+          background: '#ef4444',
+          cursor: 'pointer',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          flexShrink: 0,
+          boxShadow: '0 2px 10px rgba(239,68,68,0.45)',
+        }}
+      >
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
+          <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"
+            transform="rotate(135 12 12)"
+          />
+        </svg>
+      </button>
+    </div>
+  );
+};