ajaxter-chat 2.0.1 → 3.0.1

package/dist/components/ChatWidget.js

@@ -1,49 +1,91 @@
 'use client';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useEffect, useCallback } from 'react';
-import { loadChatConfig, buildUserListUrl } from '../config';
+import { loadLocalConfig } from '../config';
 import { mergeTheme } from '../utils/theme';
-import { useUsers } from '../hooks/useUsers';
+import { useRemoteConfig } from '../hooks/useRemoteConfig';
 import { useChat } from '../hooks/useChat';
-// Screens
+import { useWebRTC } from '../hooks/useWebRTC';
 import { HomeScreen } from './HomeScreen';
 import { UserListScreen } from './UserListScreen';
 import { ChatScreen } from './ChatScreen';
 import { RecentChatsScreen } from './RecentChatsScreen';
 import { TicketScreen } from './TicketScreen';
+import { BlockListScreen } from './BlockList';
+import { CallScreen } from './CallScreen';
 import { MaintenanceView } from './MaintenanceView';
 import { BottomTabs } from './Tabs/BottomTabs';
-export const ChatWidget = ({ theme }) => {
-    const [isMounted, setIsMounted] = useState(false);
+/* ─── Drawer width ─────────────────────────────────────────────────────────── */
+const DRAWER_W_NORMAL = 380;
+const DRAWER_W_MAX = 480;
+export const ChatWidget = ({ theme: localTheme }) => {
+    var _a, _b;
+    /* SSR guard */
+    const [mounted, setMounted] = useState(false);
+    useEffect(() => { setMounted(true); }, []);
+    /* Env config */
+    const { apiKey, widgetId } = loadLocalConfig();
+    /* Remote config */
+    const { data, loading: cfgLoading, error: cfgError } = useRemoteConfig(apiKey, widgetId);
+    /* Merged theme — remote config overrides defaults, local prop overrides both */
+    const theme = mergeTheme((data === null || data === void 0 ? void 0 : data.widget) ? { primaryColor: data.widget.primaryColor, buttonLabel: data.widget.buttonLabel, buttonPosition: data.widget.buttonPosition } : undefined, localTheme);
+    /* Drawer open state */
     const [isOpen, setIsOpen] = useState(false);
     const [isMaximized, setIsMaximized] = useState(false);
+    const [closing, setClosing] = useState(false); // for slide-out animation
+    /* Navigation */
     const [activeTab, setActiveTab] = useState('home');
     const [screen, setScreen] = useState('home');
     const [userListCtx, setUserListCtx] = useState('support');
-    const [tickets, setTickets] = useState([]);
-    // SSR guard
-    useEffect(() => { setIsMounted(true); }, []);
-    const config = loadChatConfig();
-    const t = mergeTheme(theme);
-    const apiUrl = buildUserListUrl(config);
-    // Determine filter based on context
-    const filterType = userListCtx === 'support' ? 'developer' : 'user';
-    const { users, loading, error } = useUsers(apiUrl, filterType, config.status === 'ACTIVE' && screen === 'user-list');
-    const { messages, activeUser, selectUser, sendMessage, clearChat } = useChat();
-    // ── Navigation helpers ─────────────────────────────────────────────────────
-    const goHome = useCallback(() => { setScreen('home'); setActiveTab('home'); }, []);
-    const handleTabChange = useCallback((tab) => {
-        setActiveTab(tab);
-        if (tab === 'home') {
-            setScreen('home');
-        }
-        if (tab === 'chats') {
-            setScreen('recent-chats');
-        }
-        if (tab === 'tickets') {
-            setScreen('tickets');
+    /* App state */
+    const [tickets, setTickets] = useState((_a = data === null || data === void 0 ? void 0 : data.sampleTickets) !== null && _a !== void 0 ? _a : []);
+    const [recentChats, setRecentChats] = useState([]);
+    const [blockedUids, setBlockedUids] = useState((_b = data === null || data === void 0 ? void 0 : data.blockedUsers) !== null && _b !== void 0 ? _b : []);
+    /* Sync remote data into local state once loaded */
+    useEffect(() => {
+        var _a, _b;
+        if (data) {
+            setTickets(data.sampleTickets);
+            setBlockedUids(data.blockedUsers);
+            // Seed recent chats from sample chats
+            const all = [...((_a = data.developers) !== null && _a !== void 0 ? _a : []), ...((_b = data.users) !== null && _b !== void 0 ? _b : [])];
+            const 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);
         }
-    }, []);
+    }, [data]);
+    /* Chat hook */
+    const { messages, activeUser, isPaused, isReported, selectUser, sendMessage, togglePause, reportChat, clearChat, setMessages, } = useChat();
+    /* WebRTC hook */
+    const { session: callSession, localVideoRef, remoteVideoRef, startCall, endCall, toggleMute, toggleCamera } = useWebRTC();
+    /* ── Drawer open/close with slide animation ───────────────────────────── */
+    const openDrawer = () => {
+        setClosing(false);
+        setIsOpen(true);
+    };
+    const closeDrawer = useCallback(() => {
+        setClosing(true);
+        setTimeout(() => {
+            setIsOpen(false);
+            setClosing(false);
+            setScreen('home');
+            setActiveTab('home');
+            clearChat();
+        }, 300);
+    }, [clearChat]);
+    /* ── Navigation ──────────────────────────────────────────────────────── */
     const handleCardClick = useCallback((ctx) => {
         if (ctx === 'ticket') {
             setActiveTab('tickets');
@@ -55,87 +97,139 @@ export const ChatWidget = ({ theme }) => {
         }
     }, []);
     const handleSelectUser = useCallback((user) => {
-        selectUser(user);
+        var _a;
+        // Load history from sample chats if available
+        const history = (_a = data === null || data === void 0 ? void 0 : data.sampleChats[user.uid]) !== null && _a !== void 0 ? _a : [];
+        selectUser(user, history);
         setScreen('chat');
-    }, [selectUser]);
-    const handleBackFromUserList = useCallback(() => {
-        setScreen('home');
+        // Update recent chats
+        setRecentChats(prev => {
+            const exists = prev.find(r => r.user.uid === user.uid);
+            if (exists)
+                return prev;
+            return [{ id: `rc_${user.uid}`, user, lastMessage: '', lastTime: new Date().toISOString(), unread: 0, isPaused: false }, ...prev];
+        });
+    }, [data, selectUser]);
+    const handleTabChange = useCallback((tab) => {
+        setActiveTab(tab);
+        setScreen(tab === 'home' ? 'home' : tab === 'chats' ? 'recent-chats' : 'tickets');
     }, []);
-    const handleBackFromChat = useCallback(() => {
+    /* ── Block/Unblock ───────────────────────────────────────────────────── */
+    const handleBlock = useCallback(() => {
+        if (!activeUser)
+            return;
+        setBlockedUids(prev => [...prev, activeUser.uid]);
         clearChat();
-        setScreen('user-list');
-    }, [clearChat]);
-    const handleRaiseTicket = useCallback((title, description) => {
+        setScreen('home');
+        setActiveTab('home');
+    }, [activeUser, clearChat]);
+    const handleUnblock = useCallback((uid) => {
+        setBlockedUids(prev => prev.filter(id => id !== uid));
+    }, []);
+    /* ── Tickets ─────────────────────────────────────────────────────────── */
+    const handleRaiseTicket = useCallback((title, desc, priority) => {
         const t = {
-            id: `ticket_${Date.now()}`,
-            title,
-            description,
-            status: 'open',
-            priority: 'medium',
-            createdAt: new Date(),
-            updatedAt: new Date(),
+            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 => [t, ...prev]);
     }, []);
-    // ── Sizing ─────────────────────────────────────────────────────────────────
-    const normalW = 380;
-    const normalH = 560;
-    const maxW = 480;
-    const maxH = 720;
-    const width = isMaximized ? maxW : normalW;
-    const height = isMaximized ? maxH : normalH;
-    const posStyle = t.buttonPosition === 'bottom-left'
+    /* ── Pause sync back into recent chats ──────────────────────────────── */
+    const handleTogglePause = useCallback(() => {
+        togglePause();
+        if (activeUser) {
+            setRecentChats(prev => prev.map(r => r.user.uid === activeUser.uid ? Object.assign(Object.assign({}, r), { isPaused: !isPaused }) : r));
+        }
+    }, [togglePause, activeUser, isPaused]);
+    /* ── Call ────────────────────────────────────────────────────────────── */
+    const handleStartCall = useCallback((withVideo) => {
+        if (!activeUser)
+            return;
+        startCall(activeUser, withVideo);
+        setScreen('call');
+    }, [activeUser, startCall]);
+    const handleEndCall = useCallback(() => {
+        endCall();
+        setScreen('chat');
+    }, [endCall]);
+    /* ── Derived ─────────────────────────────────────────────────────────── */
+    const isBlocked = activeUser ? blockedUids.includes(activeUser.uid) : false;
+    const drawerW = isMaximized ? DRAWER_W_MAX : DRAWER_W_NORMAL;
+    const widgetConfig = data === null || data === void 0 ? void 0 : data.widget;
+    const primaryColor = theme.primaryColor;
+    const allUsers = data ? [...data.developers, ...data.users] : [];
+    const filteredUsers = screen === 'user-list'
+        ? allUsers.filter(u => userListCtx === 'support' ? u.type === 'developer' : u.type === 'user')
+        : [];
+    const blockedUsers = allUsers.filter(u => blockedUids.includes(u.uid));
+    /* Position */
+    const posStyle = theme.buttonPosition === 'bottom-left'
         ? { left: 24, right: 'auto' }
         : { right: 24, left: 'auto' };
-    if (!isMounted)
-        return null;
-    if (config.status === 'DISABLE')
+    const drawerPosStyle = theme.buttonPosition === 'bottom-left'
+        ? { left: 0, borderRadius: '0 16px 16px 0' }
+        : { right: 0, borderRadius: '16px 0 0 16px' };
+    /* ── Don't render until mounted (SSR safe) ──────────────────────────── */
+    if (!mounted)
         return null;
     return (_jsxs(_Fragment, { children: [_jsx("style", { children: `
         @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap');
-        @keyframes cw-fadeUp {
-          from { opacity:0; transform:translateY(10px); }
-          to   { opacity:1; transform:translateY(0);    }
-        }
-        @keyframes cw-slideInRight {
-          from { opacity:0; transform:translateX(18px); }
-          to   { opacity:1; transform:translateX(0);    }
-        }
-        @keyframes cw-popIn {
-          from { opacity:0; transform:scale(0.88) translateY(16px); }
-          to   { opacity:1; transform:scale(1)    translateY(0);    }
-        }
-        .cw-scrollbar::-webkit-scrollbar { width:4px; }
-        .cw-scrollbar::-webkit-scrollbar-track { background:transparent; }
-        .cw-scrollbar::-webkit-scrollbar-thumb { background:#e0e0e0; border-radius:4px; }
-      ` }), _jsx("button", { onClick: () => setIsOpen(o => !o), "aria-label": isOpen ? 'Close chat' : t.buttonLabel, style: Object.assign(Object.assign({ position: 'fixed', bottom: 24 }, posStyle), { zIndex: 9999, display: 'flex', alignItems: 'center', gap: 10, padding: isOpen ? '14px' : '13px 22px', backgroundColor: t.buttonColor, color: t.buttonTextColor, border: 'none', borderRadius: 50, cursor: 'pointer', fontFamily: t.fontFamily, fontSize: '15px', fontWeight: 700, boxShadow: `0 8px 28px ${t.buttonColor}55`, transition: 'all 0.3s cubic-bezier(0.34,1.56,0.64,1)', transform: isOpen ? 'scale(0.94)' : 'scale(1)', minWidth: isOpen ? 50 : 'auto', justifyContent: 'center' }), onMouseEnter: e => {
-                    if (!isOpen) {
-                        e.currentTarget.style.transform = 'scale(1.06) translateY(-2px)';
-                        e.currentTarget.style.boxShadow = `0 12px 36px ${t.buttonColor}77`;
-                    }
+
+        .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; } }
+
+        .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; }
+      ` }), !isOpen && (_jsxs("button", { className: "cw-root", onClick: openDrawer, "aria-label": 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 = isOpen ? 'scale(0.94)' : 'scale(1)';
-                    e.currentTarget.style.boxShadow = `0 8px 28px ${t.buttonColor}55`;
-                }, children: isOpen
-                    ? _jsx(CloseIcon, { color: t.buttonTextColor })
-                    : _jsxs(_Fragment, { children: [_jsx(ChatBubbleIcon, { color: t.buttonTextColor }), _jsx("span", { children: t.buttonLabel })] }) }), isOpen && (_jsxs("div", { style: Object.assign(Object.assign({ position: 'fixed', bottom: 86 }, posStyle), { zIndex: 9998, width,
-                    height, maxWidth: 'calc(100vw - 32px)', maxHeight: 'calc(100vh - 110px)', backgroundColor: '#fff', borderRadius: t.borderRadius, boxShadow: '0 20px 70px rgba(0,0,0,0.2), 0 6px 20px rgba(0,0,0,0.08)', display: 'flex', flexDirection: 'column', overflow: 'hidden', fontFamily: t.fontFamily, animation: 'cw-popIn 0.3s cubic-bezier(0.34,1.56,0.64,1)', transition: 'width 0.3s ease, height 0.3s ease' }), children: [screen !== 'chat' && (_jsx("button", { onClick: () => setIsMaximized(m => !m), title: isMaximized ? 'Minimize' : 'Maximize', style: {
-                            position: 'absolute', top: 12, right: 48, zIndex: 10,
-                            background: 'rgba(255,255,255,0.22)', border: 'none', borderRadius: '50%',
-                            width: 28, height: 28, display: 'flex', alignItems: 'center', justifyContent: 'center',
-                            cursor: 'pointer', transition: 'background 0.15s',
-                        }, onMouseEnter: e => e.currentTarget.style.background = 'rgba(255,255,255,0.38)', onMouseLeave: e => e.currentTarget.style.background = 'rgba(255,255,255,0.22)', children: isMaximized
-                            ? _jsx(MinimizeIcon, {})
-                            : _jsx(MaximizeIcon, {}) })), screen !== 'chat' && (_jsx("button", { onClick: () => setIsOpen(false), title: "Close", style: {
-                            position: 'absolute', top: 12, right: 12, zIndex: 10,
-                            background: 'rgba(255,255,255,0.22)', border: 'none', borderRadius: '50%',
-                            width: 28, height: 28, display: 'flex', alignItems: 'center', justifyContent: 'center',
-                            cursor: 'pointer',
-                        }, children: _jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M18 6L6 18M6 6l12 12", stroke: "#fff", strokeWidth: "2.5", strokeLinecap: "round" }) }) })), _jsxs("div", { className: "cw-scrollbar", style: { flex: 1, overflow: 'hidden', display: 'flex', flexDirection: 'column' }, children: [config.status === 'MAINTENANCE' && (_jsx(MaintenanceView, { primaryColor: t.primaryColor, fontFamily: t.fontFamily })), config.status === 'ACTIVE' && (_jsxs(_Fragment, { children: [screen === 'home' && (_jsx(HomeScreen, { config: config, theme: theme, onNavigate: handleCardClick })), screen === 'user-list' && (_jsx(UserListScreen, { context: userListCtx, users: users, loading: loading, error: error, theme: theme, onBack: handleBackFromUserList, onSelectUser: handleSelectUser })), screen === 'chat' && activeUser && (_jsx(ChatScreen, { activeUser: activeUser, messages: messages, onSend: sendMessage, onBack: handleBackFromChat, onClose: () => setIsOpen(false), theme: theme })), screen === 'recent-chats' && (_jsx(RecentChatsScreen, { chats: [], theme: theme, onSelectChat: handleSelectUser })), screen === 'tickets' && (_jsx(TicketScreen, { tickets: tickets, theme: theme, onRaiseTicket: handleRaiseTicket }))] }))] }), screen !== 'chat' && screen !== 'user-list' && config.status !== 'MAINTENANCE' && (_jsx(BottomTabs, { active: activeTab, onChange: handleTabChange, primaryColor: t.primaryColor, fontFamily: t.fontFamily }))] }))] }));
+                    e.currentTarget.style.transform = 'scale(1)';
+                    e.currentTarget.style.boxShadow = `0 8px 28px ${theme.buttonColor}55`;
+                }, children: [_jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: _jsx("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" }) }), _jsx("span", { children: theme.buttonLabel })] })), isOpen && (_jsx("div", { onClick: closeDrawer, style: {
+                    position: 'fixed', inset: 0, zIndex: 9997,
+                    backgroundColor: 'rgba(0,0,0,0.35)',
+                    opacity: closing ? 0 : 1,
+                    transition: 'opacity 0.3s',
+                } })), isOpen && (_jsxs("div", { className: `cw-root ${closing ? 'cw-drawer-exit' : 'cw-drawer-enter'}`, style: Object.assign(Object.assign({ position: 'fixed', top: 0, bottom: 0 }, drawerPosStyle), { zIndex: 9998, width: drawerW, maxWidth: '100vw', 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', transition: 'width 0.28s ease' }), children: [cfgLoading && (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', gap: 16 }, children: [_jsx("div", { style: {
+                                    width: 40, height: 40, borderRadius: '50%',
+                                    border: `3px solid ${primaryColor}30`,
+                                    borderTopColor: primaryColor,
+                                    animation: 'spin 0.8s linear infinite',
+                                } }), _jsx("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` }), _jsx("p", { style: { fontSize: 14, color: '#7b8fa1' }, children: "Loading chat\u2026" })] })), cfgError && !cfgLoading && (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', gap: 12, padding: 32, textAlign: 'center' }, children: [_jsx("div", { style: { fontSize: 40 }, children: "\u26A0\uFE0F" }), _jsx("p", { style: { fontWeight: 700, color: '#1a2332' }, children: "Could not load chat configuration" }), _jsx("p", { style: { fontSize: 13, color: '#7b8fa1', lineHeight: 1.6 }, children: cfgError }), _jsx("button", { onClick: closeDrawer, style: { padding: '9px 20px', borderRadius: 10, border: 'none', background: primaryColor, color: '#fff', cursor: 'pointer', fontWeight: 700 }, children: "Close" })] })), !cfgLoading && !cfgError && widgetConfig && (_jsxs(_Fragment, { children: [screen !== 'chat' && screen !== 'call' && (_jsxs("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,
+                                }, children: [_jsx(CornerBtn, { onClick: () => setIsMaximized(m => !m), title: isMaximized ? 'Minimize' : 'Maximize', children: isMaximized
+                                            ? _jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M8 3v5H3M21 8h-5V3M3 16h5v5M16 21v-5h5", stroke: "#fff", strokeWidth: "2.2", strokeLinecap: "round" }) })
+                                            : _jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M8 3H5a2 2 0 00-2 2v3M21 8V5a2 2 0 00-2-2h-3M3 16v3a2 2 0 002 2h3M16 21h3a2 2 0 002-2v-3", stroke: "#fff", strokeWidth: "2.2", strokeLinecap: "round" }) }) }), _jsx(CornerBtn, { onClick: closeDrawer, title: "Close", children: _jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M18 6L6 18M6 6l12 12", stroke: "#fff", strokeWidth: "2.5", strokeLinecap: "round" }) }) })] })), widgetConfig.status === 'MAINTENANCE' && (_jsx(MaintenanceView, { primaryColor: primaryColor })), widgetConfig.status === 'DISABLE' && (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', padding: 32, textAlign: 'center', gap: 12 }, children: [_jsx("div", { style: { fontSize: 40 }, children: "\uD83D\uDD12" }), _jsx("p", { style: { fontWeight: 700, color: '#1a2332' }, children: "Chat is disabled" }), _jsx("button", { onClick: closeDrawer, style: { padding: '9px 20px', borderRadius: 10, border: 'none', background: primaryColor, color: '#fff', cursor: 'pointer', fontWeight: 700 }, children: "Close" })] })), widgetConfig.status === 'ACTIVE' && (_jsxs("div", { className: "cw-scroll", style: { flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }, children: [screen === 'home' && (_jsx(HomeScreen, { config: widgetConfig, onNavigate: handleCardClick })), screen === 'user-list' && (_jsx(UserListScreen, { context: userListCtx, users: filteredUsers, primaryColor: primaryColor, onBack: () => setScreen('home'), onSelectUser: handleSelectUser })), screen === 'chat' && activeUser && (_jsx(ChatScreen, { activeUser: activeUser, messages: messages, config: widgetConfig, isPaused: isPaused, isReported: isReported, isBlocked: isBlocked, onSend: sendMessage, onBack: () => { clearChat(); setScreen('home'); setActiveTab('home'); }, onClose: closeDrawer, onTogglePause: handleTogglePause, onReport: reportChat, onBlock: handleBlock, onStartCall: handleStartCall })), screen === 'call' && callSession.peer && (_jsx(CallScreen, { session: callSession, localVideoRef: localVideoRef, remoteVideoRef: remoteVideoRef, onEnd: handleEndCall, onToggleMute: toggleMute, onToggleCamera: toggleCamera, primaryColor: primaryColor })), screen === 'recent-chats' && (_jsx(RecentChatsScreen, { chats: recentChats, config: widgetConfig, onSelectChat: handleSelectUser })), screen === 'tickets' && (_jsx(TicketScreen, { tickets: tickets, config: widgetConfig, onRaiseTicket: handleRaiseTicket })), screen === 'block-list' && (_jsx(BlockListScreen, { blockedUsers: blockedUsers, config: widgetConfig, onUnblock: handleUnblock, onBack: () => { setScreen('home'); setActiveTab('home'); } }))] })), widgetConfig.status === 'ACTIVE' &&
+                                screen !== 'chat' &&
+                                screen !== 'call' &&
+                                screen !== 'user-list' &&
+                                screen !== 'block-list' && (_jsx(BottomTabs, { active: activeTab, onChange: handleTabChange, primaryColor: primaryColor, onBlockList: () => setScreen('block-list') }))] }))] }))] }));
 };
 export default ChatWidget;
-// ── Tiny SVG icons ─────────────────────────────────────────────────────────────
-const ChatBubbleIcon = ({ color }) => (_jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
-const CloseIcon = ({ color }) => (_jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M18 6L6 18M6 6l12 12", stroke: color, strokeWidth: "2.5", strokeLinecap: "round" }) }));
-const MaximizeIcon = () => (_jsx("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M8 3H5a2 2 0 00-2 2v3M21 8V5a2 2 0 00-2-2h-3M3 16v3a2 2 0 002 2h3M16 21h3a2 2 0 002-2v-3", stroke: "#fff", strokeWidth: "2.2", strokeLinecap: "round" }) }));
-const MinimizeIcon = () => (_jsx("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M8 3v5H3M21 8h-5V3M3 16h5v5M16 21v-5h5", stroke: "#fff", strokeWidth: "2.2", strokeLinecap: "round" }) }));
+/* ── Tiny corner button ────────────────────────────────────────────────────── */
+const CornerBtn = ({ onClick, title, children }) => (_jsx("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: children }));

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

@@ -0,0 +1,8 @@
+import React from 'react';
+interface EmojiPickerProps {
+    onSelect: (emoji: string) => void;
+    onClose: () => void;
+    primaryColor: string;
+}
+export declare const EmojiPicker: React.FC<EmojiPickerProps>;
+export {};

package/dist/components/EmojiPicker/index.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const EMOJIS = [
+    '😀', '😂', '😊', '😍', '🤔', '😎', '😢', '😡',
+    '👍', '👎', '👏', '🙏', '🎉', '❤️', '🔥', '✅',
+    '🚀', '💡', '⚠️', '🎫',
+];
+export const EmojiPicker = ({ onSelect, onClose, primaryColor }) => (_jsxs("div", { style: {
+        position: 'absolute', bottom: '100%', right: 0,
+        background: '#fff', borderRadius: 14,
+        boxShadow: '0 8px 32px rgba(0,0,0,0.18)',
+        padding: '12px', zIndex: 100,
+        animation: 'cw-fadeUp 0.18s ease',
+        marginBottom: 8,
+    }, children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }, children: [_jsx("span", { style: { fontSize: 11, fontWeight: 700, color: '#7b8fa1', textTransform: 'uppercase', letterSpacing: '0.06em' }, children: "Emojis" }), _jsx("button", { onClick: onClose, style: { background: 'none', border: 'none', cursor: 'pointer', padding: 2, color: '#7b8fa1', fontSize: 14 }, children: "\u2715" })] }), _jsx("div", { style: { display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 4, width: 200 }, children: EMOJIS.map(e => (_jsx("button", { onClick: () => { onSelect(e); onClose(); }, style: {
+                    background: 'none', border: 'none', cursor: 'pointer',
+                    fontSize: 22, padding: '6px', borderRadius: 8,
+                    transition: 'background 0.12s',
+                }, onMouseEnter: el => el.currentTarget.style.background = `${primaryColor}15`, onMouseLeave: el => el.currentTarget.style.background = 'none', children: e }, e))) })] }));

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

@@ -1,8 +1,7 @@
 import React from 'react';
-import { ChatConfig, ChatWidgetTheme, UserListContext } from '../../types';
+import { WidgetConfig, UserListContext } from '../../types';
 interface HomeScreenProps {
-    config: ChatConfig;
-    theme?: ChatWidgetTheme;
+    config: WidgetConfig;
     onNavigate: (ctx: UserListContext | 'ticket') => void;
 }
 export declare const HomeScreen: React.FC<HomeScreenProps>;

package/dist/components/HomeScreen/index.js

@@ -1,71 +1,55 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { mergeTheme } from '../../utils/theme';
-export const HomeScreen = ({ config, theme, onNavigate }) => {
-    const t = mergeTheme(theme);
+export const HomeScreen = ({ config, onNavigate }) => {
     const showSupport = config.chatType === 'SUPPORT' || config.chatType === 'BOTH';
-    const showConversation = config.chatType === 'CHAT' || config.chatType === 'BOTH';
+    const showChat = config.chatType === 'CHAT' || config.chatType === 'BOTH';
     const cards = [
         showSupport && {
             key: 'support',
+            icon: '🛠',
             title: 'Need Support',
             subtitle: 'We typically reply in a few minutes',
             onClick: () => onNavigate('support'),
         },
-        showConversation && {
+        showChat && {
             key: 'conversation',
+            icon: '💬',
             title: 'New Conversation',
             subtitle: 'With your colleague',
             onClick: () => onNavigate('conversation'),
         },
-        // Raise Ticket is always shown
         {
             key: 'ticket',
+            icon: '🎫',
             title: 'Raise Ticket',
             subtitle: 'For major changes',
             onClick: () => onNavigate('ticket'),
         },
     ].filter(Boolean);
     return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', height: '100%' }, children: [_jsxs("div", { style: {
-                    backgroundColor: t.primaryColor,
-                    padding: '32px 24px 40px',
+                    background: `linear-gradient(145deg, ${config.primaryColor}, ${config.primaryColor}dd)`,
+                    padding: '36px 24px 52px',
                     flexShrink: 0,
-                }, children: [_jsx("h1", { style: {
-                            margin: '0 0 8px',
-                            fontSize: '28px',
-                            fontWeight: 800,
-                            color: '#fff',
-                            letterSpacing: '-0.03em',
-                            fontFamily: t.fontFamily,
-                        }, children: "Hi there \uD83D\uDC4B" }), _jsx("p", { style: { margin: 0, fontSize: '15px', color: 'rgba(255,255,255,0.85)', fontFamily: t.fontFamily }, children: "Need help? start a conversation:" })] }), _jsx("div", { style: {
-                    flex: 1,
-                    overflowY: 'auto',
-                    padding: '0 16px 16px',
-                    marginTop: '-24px',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    gap: '10px',
-                }, children: cards.map((card, i) => (_jsxs("button", { onClick: card.onClick, style: {
-                        width: '100%',
-                        background: '#fff',
-                        border: 'none',
-                        borderRadius: '14px',
-                        padding: '18px 20px',
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'space-between',
-                        cursor: 'pointer',
-                        textAlign: 'left',
-                        boxShadow: '0 2px 12px rgba(0,0,0,0.09)',
-                        transition: 'transform 0.15s ease, box-shadow 0.15s ease',
+                    position: 'relative',
+                    overflow: 'hidden',
+                }, children: [_jsx("div", { style: { position: 'absolute', top: -40, right: -40, width: 140, height: 140, borderRadius: '50%', background: 'rgba(255,255,255,0.07)' } }), _jsx("div", { style: { position: 'absolute', bottom: -20, left: -20, width: 90, height: 90, borderRadius: '50%', background: 'rgba(255,255,255,0.05)' } }), _jsx("h1", { style: { margin: '0 0 8px', fontSize: 26, fontWeight: 800, color: '#fff', letterSpacing: '-0.03em' }, children: config.welcomeTitle }), _jsx("p", { style: { margin: 0, fontSize: 14, color: 'rgba(255,255,255,0.85)', lineHeight: 1.6 }, children: config.welcomeSubtitle })] }), _jsx("div", { style: { flex: 1, overflowY: 'auto', padding: '0 16px 20px', marginTop: -28, display: 'flex', flexDirection: 'column', gap: 10 }, children: cards.map((card, i) => (_jsxs("button", { onClick: card.onClick, style: {
+                        width: '100%', background: '#fff', border: 'none', borderRadius: 14,
+                        padding: '18px 20px', display: 'flex', alignItems: 'center',
+                        justifyContent: 'space-between', cursor: 'pointer', textAlign: 'left',
+                        boxShadow: '0 2px 14px rgba(0,0,0,0.10)',
                         animation: `cw-fadeUp 0.35s ease both`,
                         animationDelay: `${i * 0.08}s`,
-                        fontFamily: t.fontFamily,
+                        transition: 'transform 0.15s, box-shadow 0.15s',
                     }, onMouseEnter: e => {
                         e.currentTarget.style.transform = 'translateY(-2px)';
-                        e.currentTarget.style.boxShadow = '0 6px 20px rgba(0,0,0,0.13)';
+                        e.currentTarget.style.boxShadow = '0 8px 24px rgba(0,0,0,0.14)';
                     }, onMouseLeave: e => {
                         e.currentTarget.style.transform = 'translateY(0)';
-                        e.currentTarget.style.boxShadow = '0 2px 12px rgba(0,0,0,0.09)';
-                    }, children: [_jsxs("div", { children: [_jsx("div", { style: { fontWeight: 700, fontSize: '15px', color: '#1a2332', marginBottom: '3px' }, children: card.title }), _jsx("div", { style: { fontSize: '13px', color: '#7b8fa1' }, children: card.subtitle })] }), _jsx(SendArrow, { color: t.primaryColor })] }, card.key))) })] }));
+                        e.currentTarget.style.boxShadow = '0 2px 14px rgba(0,0,0,0.10)';
+                    }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 14 }, children: [_jsx("div", { style: {
+                                        width: 44, height: 44, borderRadius: 12,
+                                        backgroundColor: `${config.primaryColor}14`,
+                                        display: 'flex', alignItems: 'center', justifyContent: 'center',
+                                        fontSize: 20, flexShrink: 0,
+                                    }, children: card.icon }), _jsxs("div", { children: [_jsx("div", { style: { fontWeight: 700, fontSize: 15, color: '#1a2332', marginBottom: 2 }, children: card.title }), _jsx("div", { style: { fontSize: 12, color: '#7b8fa1' }, children: card.subtitle })] })] }), _jsx(SendArrow, { color: config.primaryColor })] }, card.key))) })] }));
 };
-const SendArrow = ({ color }) => (_jsx("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: _jsx("path", { d: "M22 2L11 13M22 2L15 22L11 13L2 9L22 2Z", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const SendArrow = ({ color }) => (_jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: _jsx("path", { d: "M5 12h14M12 5l7 7-7 7", stroke: color, strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round" }) }));

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

@@ -1,7 +1,6 @@
 import React from 'react';
 interface MaintenanceViewProps {
     primaryColor: string;
-    fontFamily: string;
 }
 export declare const MaintenanceView: React.FC<MaintenanceViewProps>;
 export {};

package/dist/components/MaintenanceView/index.js

@@ -1,16 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const MaintenanceView = ({ primaryColor, fontFamily }) => (_jsxs("div", { style: {
+export const MaintenanceView = ({ primaryColor }) => (_jsxs("div", { style: {
         display: 'flex', flexDirection: 'column', alignItems: 'center',
-        justifyContent: 'center', height: '100%', padding: '32px',
-        fontFamily, textAlign: 'center', gap: 16,
+        justifyContent: 'center', height: '100%', padding: '32px', textAlign: 'center', gap: 16,
     }, children: [_jsx("div", { style: {
                 width: 72, height: 72, borderRadius: '50%',
                 backgroundColor: `${primaryColor}15`,
                 display: 'flex', alignItems: 'center', justifyContent: 'center',
-            }, children: _jsx("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M12 9v4M12 17h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z", stroke: primaryColor, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }), _jsx("h3", { style: { margin: 0, fontSize: '17px', fontWeight: 800, color: '#1a2332', letterSpacing: '-0.02em' }, children: "Under Maintenance" }), _jsx("p", { style: { margin: 0, fontSize: '14px', color: '#7b8fa1', lineHeight: 1.6, maxWidth: 220 }, children: "Chat is under maintenance. We'll be back shortly!" }), _jsxs("span", { style: {
+            }, children: _jsx("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M12 9v4M12 17h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z", stroke: primaryColor, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }), _jsx("h3", { style: { margin: 0, fontSize: 17, fontWeight: 800, color: '#1a2332', letterSpacing: '-0.02em' }, children: "Under Maintenance" }), _jsx("p", { style: { margin: 0, fontSize: 14, color: '#7b8fa1', lineHeight: 1.6, maxWidth: 220 }, children: "Chat is under maintenance. We'll be back shortly!" }), _jsxs("span", { style: {
                 display: 'inline-flex', alignItems: 'center', gap: 6,
                 padding: '6px 14px', borderRadius: 20,
                 backgroundColor: '#fff3cd', color: '#856404',
-                fontSize: '12px', fontWeight: 700,
-                border: '1px solid #ffc10730',
+                fontSize: 12, fontWeight: 700, border: '1px solid #ffc10730',
             }, children: [_jsx("span", { style: { width: 6, height: 6, borderRadius: '50%', backgroundColor: '#ffc107', display: 'inline-block' } }), "Temporarily Unavailable"] })] }));

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

@@ -1,15 +1,16 @@
 import React from 'react';
-import { ChatUser, ChatWidgetTheme } from '../../types';
+import { ChatUser, WidgetConfig } from '../../types';
 interface RecentChat {
     id: string;
     user: ChatUser;
     lastMessage: string;
-    lastTime: Date;
+    lastTime: string;
     unread: number;
+    isPaused: boolean;
 }
 interface RecentChatsScreenProps {
     chats: RecentChat[];
-    theme?: ChatWidgetTheme;
+    config: WidgetConfig;
     onSelectChat: (user: ChatUser) => void;
 }
 export declare const RecentChatsScreen: React.FC<RecentChatsScreenProps>;