ajaxter-chat 3.0.10 → 3.0.12

package/README.md

@@ -3,6 +3,8 @@
 A production-ready **drawer/slider-based** chat widget for React.js and Next.js.
 All configuration is loaded remotely from your hosted `chatData.json`.
 
+**Backend developers:** see **[BACKEND.md](./BACKEND.md)** for WebSocket/REST events, auth, payloads (`ChatMessage`, `Ticket`, users, history), and WebRTC signalling.
+
 ---
 
 ## Setup (2 env vars only)
@@ -109,7 +111,7 @@ export default function MyApp({ Component, pageProps }) {
 
 | Feature | Details |
 |---|---|
-| **Drawer/Slider UI** | Slides in from right (or left) with smooth animation. Backdrop closes it. |
+| **Drawer/Slider UI** | Slides in from right (or left) with smooth animation. |
 | **Home Screen** | "Hi there 👋" hero, cards for Support / New Conversation / Raise Ticket |
 | **User List** | Slide-in panel with online status dot, designation, project |
 | **Chat Screen** | Matches the UI image — hamburger back, title "Support", phone + fullscreen icons |
@@ -127,7 +129,7 @@ export default function MyApp({ Component, pageProps }) {
 | **Ticket Screen** | Raise tickets with title, description, priority selector |
 | **Ticket History** | Shows all tickets with status badge and priority color |
 | **Recent Chats Tab** | Shows past conversations with unread badges |
-| **Maximize/Minimize** | Toggle drawer width 380px ↔ 480px |
+| **Responsive width** | ~30% width on desktop; full width on small screens |
 | **Slide Close** | Smooth slide-out animation on close |
 | **SSR Safe** | isMounted guard, works in Next.js App Router and Pages Router |
 | **CHAT_STATUS** | ACTIVE / DISABLE / MAINTENANCE handled |

package/dist/components/ChatWidget.js

@@ -40,6 +40,8 @@ export const ChatWidget = ({ theme: localTheme }) => {
     const [chatReturnCtx, setChatReturnCtx] = useState('conversation');
     const [viewingTicketId, setViewingTicketId] = useState(null);
     const [messageSoundEnabled, setMessageSoundEnabledState] = useState(true);
+    /** Stagger list animation only when opening from home burger menu */
+    const [listEntranceAnimation, setListEntranceAnimation] = useState(false);
     /* 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([]);
@@ -156,7 +158,8 @@ export const ChatWidget = ({ theme: localTheme }) => {
         setMessageSoundEnabledState(enabled);
     }, [data === null || data === void 0 ? void 0 : data.widget]);
     /* ── Navigation ──────────────────────────────────────────────────────── */
-    const handleCardClick = useCallback((ctx) => {
+    const handleCardClick = useCallback((ctx, options) => {
+        setListEntranceAnimation(!!(options === null || options === void 0 ? void 0 : options.fromMenu));
         if (ctx === 'ticket') {
             setActiveTab('tickets');
             setScreen('tickets');
@@ -167,6 +170,7 @@ export const ChatWidget = ({ theme: localTheme }) => {
         }
     }, []);
     const handleNavFromMenu = useCallback((ctx) => {
+        setListEntranceAnimation(false);
         clearChat();
         if (ctx === 'ticket') {
             setActiveTab('tickets');
@@ -184,6 +188,7 @@ export const ChatWidget = ({ theme: localTheme }) => {
     }, []);
     const handleSelectUser = useCallback((user, returnCtxOverride) => {
         var _a;
+        setListEntranceAnimation(false);
         setChatReturnCtx(returnCtxOverride !== null && returnCtxOverride !== void 0 ? returnCtxOverride : userListCtx);
         const history = (_a = data === null || data === void 0 ? void 0 : data.sampleChats[user.uid]) !== null && _a !== void 0 ? _a : [];
         selectUser(user, history);
@@ -196,19 +201,28 @@ export const ChatWidget = ({ theme: localTheme }) => {
         });
     }, [data, selectUser, userListCtx]);
     const handleBackFromChat = useCallback(() => {
+        setListEntranceAnimation(false);
         clearChat();
         setUserListCtx(chatReturnCtx);
         setScreen('user-list');
     }, [clearChat, chatReturnCtx]);
     const handleOpenTicket = useCallback((id) => {
+        setListEntranceAnimation(false);
         setViewingTicketId(id);
         setScreen('ticket-detail');
         setActiveTab('tickets');
     }, []);
     const handleTabChange = useCallback((tab) => {
+        setListEntranceAnimation(false);
         setActiveTab(tab);
         setScreen(tab === 'home' ? 'home' : tab === 'chats' ? 'recent-chats' : 'tickets');
     }, []);
+    useEffect(() => {
+        if (!listEntranceAnimation)
+            return;
+        const t = window.setTimeout(() => setListEntranceAnimation(false), 520);
+        return () => window.clearTimeout(t);
+    }, [listEntranceAnimation]);
     /* ── Block/Unblock ───────────────────────────────────────────────────── */
     const handleBlock = useCallback(() => {
         if (!activeUser)
@@ -347,7 +361,7 @@ export const ChatWidget = ({ theme: localTheme }) => {
                 }, onMouseLeave: e => {
                     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: {
+                }, 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", { "aria-hidden": true, style: {
                     position: 'fixed', inset: 0, zIndex: 9997,
                     backgroundColor: 'rgba(0,0,0,0.35)',
                     opacity: closing ? 0 : 1,
@@ -364,7 +378,11 @@ export const ChatWidget = ({ theme: localTheme }) => {
                                     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' && (_jsxs("div", { className: "cw-scroll", style: { flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }, children: [screen === 'home' && (_jsx(HomeScreen, { config: widgetConfig, 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: () => setScreen('home'), onSelectUser: handleSelectUser, onBlockList: userListCtx === 'conversation' ? () => setScreen('block-list') : undefined, useHomeHeader: userListCtx === 'support' && widgetConfig.viewerType !== 'developer' })), 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)) })), screen === 'tickets' && (_jsx(TicketScreen, { tickets: tickets, config: widgetConfig, onNewTicket: () => setScreen('ticket-new'), onSelectTicket: id => { setViewingTicketId(id); setScreen('ticket-detail'); } })), screen === 'ticket-new' && (_jsx(TicketFormScreen, { config: widgetConfig, onSubmit: handleRaiseTicket, onCancel: () => setScreen('tickets') })), screen === 'ticket-detail' && viewingTicketId && ((() => {
+                                }, 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' && (_jsxs("div", { className: "cw-scroll", style: { flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }, children: [screen === 'home' && (_jsx(HomeScreen, { config: widgetConfig, 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 => {
+                                            setListEntranceAnimation(false);
+                                            setViewingTicketId(id);
+                                            setScreen('ticket-detail');
+                                        }, animateEntrance: listEntranceAnimation })), screen === 'ticket-new' && (_jsx(TicketFormScreen, { config: widgetConfig, onSubmit: handleRaiseTicket, onCancel: () => setScreen('tickets') })), screen === 'ticket-detail' && viewingTicketId && ((() => {
                                         const t = tickets.find(x => x.id === viewingTicketId);
                                         return t ? (_jsx(TicketDetailScreen, { ticket: t, config: widgetConfig, onBack: () => { setViewingTicketId(null); setScreen('tickets'); } })) : null;
                                     })()), screen === 'block-list' && (_jsx(BlockListScreen, { blockedUsers: blockedUsers, config: widgetConfig, onUnblock: handleUnblock, onBack: () => { setScreen('home'); setActiveTab('home'); } }))] })), widgetConfig.status === 'ACTIVE' &&

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

@@ -1,8 +1,12 @@
 import React from 'react';
 import { WidgetConfig, UserListContext, Ticket } from '../../types';
+export interface HomeNavigateOptions {
+    /** When true, list screens play stagger animation (home burger menu only) */
+    fromMenu?: boolean;
+}
 interface HomeScreenProps {
     config: WidgetConfig;
-    onNavigate: (ctx: UserListContext | 'ticket') => void;
+    onNavigate: (ctx: UserListContext | 'ticket', options?: HomeNavigateOptions) => void;
     /** Open a specific pending ticket (full detail) */
     onOpenTicket: (ticketId: string) => void;
     tickets: Ticket[];

package/dist/components/HomeScreen/index.js

@@ -23,7 +23,9 @@ export const HomeScreen = ({ config, onNavigate, onOpenTicket, tickets }) => {
             return;
         window.location.href = `tel:${raw.replace(/\s/g, '')}`;
     };
-    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', height: '100%', position: 'relative', overflow: 'hidden', background: '#fafbfc' }, children: [_jsx(SlideNavMenu, { open: menuOpen, onClose: () => setMenuOpen(false), primaryColor: config.primaryColor, chatType: config.chatType, viewerType: (_d = config.viewerType) !== null && _d !== void 0 ? _d : 'user', onSelect: onNavigate }), _jsx("div", { style: {
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', height: '100%', position: 'relative', overflow: 'hidden', background: '#fafbfc' }, children: [_jsx(SlideNavMenu, { open: menuOpen, onClose: () => setMenuOpen(false), primaryColor: config.primaryColor, chatType: config.chatType, viewerType: (_d = config.viewerType) !== null && _d !== void 0 ? _d : 'user', onSelect: ctx => {
+                    onNavigate(ctx, { fromMenu: true });
+                } }), _jsx("div", { style: {
                     flexShrink: 0,
                     padding: '14px 16px 10px',
                     display: 'flex',
@@ -51,7 +53,7 @@ export const HomeScreen = ({ config, onNavigate, onOpenTicket, tickets }) => {
                             color: '#0f172a',
                             letterSpacing: '-0.03em',
                             lineHeight: 1.2,
-                        }, children: config.welcomeTitle }), _jsx("p", { style: { margin: '0 0 28px', fontSize: 14, color: '#64748b', lineHeight: 1.55 }, children: config.welcomeSubtitle }), _jsx("h2", { style: { margin: '0 0 12px', fontSize: 15, fontWeight: 800, color: '#0f172a' }, children: "Continue Conversations" }), _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 28 }, children: pendingTickets.length > 0 ? (pendingTickets.map(t => (_jsxs("button", { type: "button", onClick: () => onOpenTicket(t.id), style: {
+                        }, children: config.welcomeTitle }), _jsx("p", { style: { margin: '0 0 28px', fontSize: 14, color: '#64748b', lineHeight: 1.55 }, children: config.welcomeSubtitle }), _jsx("h2", { style: { margin: '0 0 12px', fontSize: 15, fontWeight: 800, color: '#0f172a' }, children: "Continue with tickets" }), _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 28 }, children: pendingTickets.length > 0 ? (pendingTickets.map(t => (_jsxs("button", { type: "button", onClick: () => onOpenTicket(t.id), style: {
                                 width: '100%',
                                 textAlign: 'left',
                                 padding: '14px 16px',
@@ -75,7 +77,7 @@ export const HomeScreen = ({ config, onNavigate, onOpenTicket, tickets }) => {
                                         color: '#64748b',
                                         fontSize: 14,
                                         fontWeight: 500,
-                                    }, children: "Start via Raise ticket below" })] })) }), _jsx("h2", { style: { margin: '0 0 12px', fontSize: 15, fontWeight: 800, color: '#0f172a' }, children: viewerIsDev ? 'Support tools' : 'Talk to our experts' }), showSupport && (_jsxs("button", { type: "button", onClick: () => onNavigate('support'), style: {
+                                    }, children: "Start via Raise ticket below" })] })) }), _jsx("h2", { style: { margin: '0 0 12px', fontSize: 15, fontWeight: 800, color: '#0f172a' }, children: viewerIsDev ? 'Support tools' : 'Talk to support experts' }), showSupport && (_jsxs("button", { type: "button", onClick: () => onNavigate('support'), style: {
                             width: '100%',
                             display: 'flex',
                             alignItems: 'center',
@@ -149,5 +151,5 @@ export const HomeScreen = ({ config, onNavigate, onOpenTicket, tickets }) => {
                                             fontSize: 14,
                                             fontWeight: 700,
                                             cursor: config.supportPhone ? 'pointer' : 'not-allowed',
-                                        }, children: [_jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 10.8a19.79 19.79 0 01-3.07-8.68A2 2 0 012 0h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.09 7.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 14.92v2z", fill: "#fff" }) }), "Call Us"] })] })] })] })] }));
+                                        }, children: [_jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 10.8a19.79 19.79 0 01-3.07-8.68A2 2 0 012 0h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.09 7.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 14.92v2z", fill: "#fff" }) }), "Get Free Widget"] })] })] })] })] }));
 };

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

@@ -12,6 +12,7 @@ interface RecentChatsScreenProps {
     chats: RecentChat[];
     config: WidgetConfig;
     onSelectChat: (user: ChatUser) => void;
+    animateEntrance?: boolean;
 }
 export declare const RecentChatsScreen: React.FC<RecentChatsScreenProps>;
 export {};

package/dist/components/RecentChatsScreen/index.js

@@ -1,8 +1,30 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useMemo, useRef, useEffect } from 'react';
 import { avatarColor, initials, formatTime } from '../../utils/chat';
-export const RecentChatsScreen = ({ chats, config, onSelectChat }) => (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', height: '100%' }, children: [_jsxs("div", { style: { background: `linear-gradient(135deg,${config.primaryColor},${config.primaryColor}cc)`, padding: '18px 18px 22px', flexShrink: 0 }, children: [_jsx("h2", { style: { margin: 0, fontSize: 20, fontWeight: 800, color: '#fff', letterSpacing: '-0.02em' }, children: "Recent Chats" }), _jsx("p", { style: { margin: '3px 0 0', fontSize: 12, color: 'rgba(255,255,255,0.8)' }, children: "Your conversation history" })] }), _jsx("div", { style: { flex: 1, overflowY: 'auto' }, children: chats.length === 0 ? (_jsxs("div", { style: { padding: '50px 24px', textAlign: 'center' }, children: [_jsx("div", { style: { fontSize: 36, marginBottom: 10 }, children: "\uD83D\uDCAC" }), _jsx("div", { style: { fontWeight: 700, color: '#1a2332', marginBottom: 6 }, children: "No chats yet" }), _jsx("div", { style: { fontSize: 13, color: '#7b8fa1' }, children: "Start a conversation from home" })] })) : chats.map((chat, i) => (_jsxs("button", { onClick: () => onSelectChat(chat.user), style: {
-                    width: '100%', padding: '13px 16px', display: 'flex', alignItems: 'center', gap: 13,
-                    background: 'transparent', border: 'none', borderBottom: '1px solid #f0f2f5',
-                    cursor: 'pointer', textAlign: 'left', animation: `cw-fadeUp 0.28s ease both`, animationDelay: `${i * 0.05}s`,
-                    transition: 'background 0.14s',
-                }, onMouseEnter: e => e.currentTarget.style.background = '#f8faff', onMouseLeave: e => e.currentTarget.style.background = 'transparent', children: [_jsxs("div", { style: { position: 'relative', flexShrink: 0 }, children: [_jsx("div", { style: { width: 46, height: 46, borderRadius: '50%', backgroundColor: avatarColor(chat.user.name), display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontWeight: 700, fontSize: 15 }, children: initials(chat.user.name) }), chat.unread > 0 && (_jsx("span", { style: { position: 'absolute', top: -2, right: -2, width: 18, height: 18, borderRadius: '50%', background: '#ef4444', color: '#fff', fontSize: 10, fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center', border: '2px solid #fff' }, children: chat.unread }))] }), _jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', marginBottom: 3 }, children: [_jsx("span", { style: { fontWeight: 700, fontSize: 14, color: '#1a2332' }, children: chat.user.name }), _jsx("span", { style: { fontSize: 11, color: '#b0bec5' }, children: formatTime(chat.lastTime) })] }), _jsxs("div", { style: { fontSize: 13, color: '#7b8fa1', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', display: 'flex', alignItems: 'center', gap: 5 }, children: [chat.isPaused && _jsx("span", { style: { fontSize: 10, background: '#fef3c7', color: '#92400e', padding: '1px 5px', borderRadius: 4, fontWeight: 700 }, children: "PAUSED" }), chat.lastMessage] })] })] }, chat.id))) })] }));
+function matchesChat(chat, q) {
+    if (!q.trim())
+        return true;
+    const s = q.trim().toLowerCase();
+    return (chat.user.name.toLowerCase().includes(s) ||
+        chat.lastMessage.toLowerCase().includes(s));
+}
+export const RecentChatsScreen = ({ chats, config, onSelectChat, animateEntrance = false, }) => {
+    const [query, setQuery] = useState('');
+    const searchRef = useRef(null);
+    useEffect(() => {
+        var _a;
+        (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, []);
+    const filtered = useMemo(() => chats.filter(c => matchesChat(c, query)), [chats, query]);
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', height: '100%' }, children: [_jsxs("div", { style: { background: `linear-gradient(135deg,${config.primaryColor},${config.primaryColor}cc)`, padding: '18px 18px 14px', flexShrink: 0 }, children: [_jsx("h2", { style: { margin: 0, fontSize: 20, fontWeight: 800, color: '#fff', letterSpacing: '-0.02em' }, children: "Recent Chats" }), _jsx("p", { style: { margin: '3px 0 0', fontSize: 12, color: 'rgba(255,255,255,0.8)' }, children: "Your conversation history" })] }), _jsx("div", { style: { padding: '10px 14px', background: '#fff', borderBottom: '1px solid #eef0f5', flexShrink: 0 }, children: _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8, padding: '0 12px', borderRadius: 10, border: '1.5px solid #e5e7eb', background: '#f8fafc' }, children: [_jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0, opacity: 0.55 }, children: [_jsx("circle", { cx: "11", cy: "11", r: "7", stroke: "#64748b", strokeWidth: "2" }), _jsx("path", { d: "M20 20l-4-4", stroke: "#64748b", strokeWidth: "2", strokeLinecap: "round" })] }), _jsx("input", { ref: searchRef, type: "search", value: query, onChange: e => setQuery(e.target.value), placeholder: "Search chats\u2026", autoComplete: "off", "aria-label": "Search chats", style: {
+                                flex: 1,
+                                minWidth: 0,
+                                border: 'none',
+                                outline: 'none',
+                                background: 'transparent',
+                                fontSize: 14,
+                                padding: '10px 0',
+                                fontFamily: 'inherit',
+                                color: '#1a2332',
+                            } })] }) }), _jsx("div", { style: { flex: 1, overflowY: 'auto' }, children: filtered.length === 0 ? (_jsxs("div", { style: { padding: '50px 24px', textAlign: 'center' }, children: [_jsx("div", { style: { fontSize: 36, marginBottom: 10 }, children: query.trim() ? '🔍' : '💬' }), _jsx("div", { style: { fontWeight: 700, color: '#1a2332', marginBottom: 6 }, children: query.trim() ? 'No matches' : 'No chats yet' }), _jsx("div", { style: { fontSize: 13, color: '#7b8fa1' }, children: query.trim() ? 'Try a different search' : 'Start a conversation from home' })] })) : filtered.map((chat, i) => (_jsxs("button", { onClick: () => onSelectChat(chat.user), style: Object.assign(Object.assign({ width: '100%', padding: '13px 16px', display: 'flex', alignItems: 'center', gap: 13, background: 'transparent', border: 'none', borderBottom: '1px solid #f0f2f5', cursor: 'pointer', textAlign: 'left' }, (animateEntrance ? { animation: `cw-fadeUp 0.28s ease both`, animationDelay: `${i * 0.05}s` } : {})), { transition: 'background 0.14s' }), onMouseEnter: e => e.currentTarget.style.background = '#f8faff', onMouseLeave: e => e.currentTarget.style.background = 'transparent', children: [_jsxs("div", { style: { position: 'relative', flexShrink: 0 }, children: [_jsx("div", { style: { width: 46, height: 46, borderRadius: '50%', backgroundColor: avatarColor(chat.user.name), display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontWeight: 700, fontSize: 15 }, children: initials(chat.user.name) }), chat.unread > 0 && (_jsx("span", { style: { position: 'absolute', top: -2, right: -2, width: 18, height: 18, borderRadius: '50%', background: '#ef4444', color: '#fff', fontSize: 10, fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center', border: '2px solid #fff' }, children: chat.unread }))] }), _jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', marginBottom: 3 }, children: [_jsx("span", { style: { fontWeight: 700, fontSize: 14, color: '#1a2332' }, children: chat.user.name }), _jsx("span", { style: { fontSize: 11, color: '#b0bec5' }, children: formatTime(chat.lastTime) })] }), _jsxs("div", { style: { fontSize: 13, color: '#7b8fa1', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', display: 'flex', alignItems: 'center', gap: 5 }, children: [chat.isPaused && _jsx("span", { style: { fontSize: 10, background: '#fef3c7', color: '#92400e', padding: '1px 5px', borderRadius: 4, fontWeight: 700 }, children: "PAUSED" }), chat.lastMessage] })] })] }, chat.id))) })] }));
+};

package/dist/components/TicketFormScreen/index.js

@@ -45,7 +45,7 @@ export const TicketFormScreen = ({ config, onSubmit, onCancel }) => {
                             alignItems: 'center',
                             justifyContent: 'center',
                             cursor: 'pointer',
-                        }, children: _jsx("svg", { width: "18", height: "18", 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", { children: [_jsx("h2", { style: { margin: 0, fontSize: 18, fontWeight: 800, color: '#fff' }, children: "New ticket" }), _jsx("p", { style: { margin: '4px 0 0', fontSize: 12, color: 'rgba(255,255,255,0.85)' }, children: "Describe your issue below" })] })] }), _jsxs("div", { className: "cw-scroll", style: { flex: 1, overflowY: 'auto', padding: '20px 18px', minHeight: 0 }, children: [_jsx("input", { placeholder: "Title *", value: title, onChange: e => setTitle(e.target.value), style: inputStyle(config.primaryColor), onFocus: e => (e.target.style.borderColor = config.primaryColor), onBlur: e => (e.target.style.borderColor = '#e5e7eb') }), _jsx("textarea", { placeholder: "Describe the issue\u2026", value: desc, onChange: e => setDesc(e.target.value), rows: 5, style: Object.assign(Object.assign({}, inputStyle(config.primaryColor)), { resize: 'none', marginTop: 12 }), onFocus: e => (e.target.style.borderColor = config.primaryColor), onBlur: e => (e.target.style.borderColor = '#e5e7eb') }), _jsx("div", { style: { display: 'flex', gap: 8, marginTop: 12, paddingBottom: 8 }, children: ['low', 'medium', 'high'].map(p => (_jsx("button", { type: "button", onClick: () => setPriority(p), style: {
+                        }, children: _jsx("svg", { width: "18", height: "18", 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", { children: [_jsx("h2", { style: { margin: 0, fontSize: 18, fontWeight: 800, color: '#fff' }, children: "Raise a ticket" }), _jsx("p", { style: { margin: '4px 0 0', fontSize: 12, color: 'rgba(255,255,255,0.85)' }, children: "Please fill out the ticket form below and we will get back to you as soon as possible." })] })] }), _jsxs("div", { className: "cw-scroll", style: { flex: 1, overflowY: 'auto', padding: '20px 18px', minHeight: 0 }, children: [_jsx("input", { placeholder: "Title *", value: title, onChange: e => setTitle(e.target.value), style: inputStyle(config.primaryColor), onFocus: e => (e.target.style.borderColor = config.primaryColor), onBlur: e => (e.target.style.borderColor = '#e5e7eb') }), _jsx("textarea", { placeholder: "Describe the issue\u2026", value: desc, onChange: e => setDesc(e.target.value), rows: 5, style: Object.assign(Object.assign({}, inputStyle(config.primaryColor)), { resize: 'none', marginTop: 12 }), onFocus: e => (e.target.style.borderColor = config.primaryColor), onBlur: e => (e.target.style.borderColor = '#e5e7eb') }), _jsx("div", { style: { display: 'flex', gap: 8, marginTop: 12, paddingBottom: 8 }, children: ['low', 'medium', 'high'].map(p => (_jsx("button", { type: "button", onClick: () => setPriority(p), style: {
                                 flex: 1,
                                 padding: '8px',
                                 border: `1.5px solid ${priority === p ? pm[p].color : '#e5e7eb'}`,

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

@@ -5,6 +5,7 @@ interface TicketScreenProps {
     config: WidgetConfig;
     onNewTicket: () => void;
     onSelectTicket: (id: string) => void;
+    animateEntrance?: boolean;
 }
 export declare const TicketScreen: React.FC<TicketScreenProps>;
 export {};

package/dist/components/TicketScreen/index.js

@@ -1,5 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const TicketScreen = ({ tickets, config, onNewTicket, onSelectTicket }) => {
+import { useState, useMemo, useRef, useEffect } from 'react';
+function matchesTicket(t, q) {
+    if (!q.trim())
+        return true;
+    const s = q.trim().toLowerCase();
+    return (t.title.toLowerCase().includes(s) ||
+        t.description.toLowerCase().includes(s) ||
+        t.id.toLowerCase().includes(s));
+}
+export const TicketScreen = ({ tickets, config, onNewTicket, onSelectTicket, animateEntrance = false, }) => {
+    const [query, setQuery] = useState('');
+    const searchRef = useRef(null);
+    useEffect(() => {
+        var _a;
+        (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, []);
+    const filtered = useMemo(() => tickets.filter(t => matchesTicket(t, query)), [tickets, query]);
     const sm = {
         open: { label: 'Open', bg: `${config.primaryColor}14`, color: config.primaryColor },
         'in-progress': { label: 'In Progress', bg: '#fef3c7', color: '#d97706' },
@@ -13,15 +29,21 @@ export const TicketScreen = ({ tickets, config, onNewTicket, onSelectTicket }) =
     };
     return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', height: '100%' }, children: [_jsx("div", { style: {
                     background: `linear-gradient(135deg,${config.primaryColor},${config.primaryColor}cc)`,
-                    padding: '18px 18px 22px', flexShrink: 0, position: 'relative',
-                }, children: _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }, children: [_jsxs("div", { children: [_jsx("h2", { style: { margin: 0, fontSize: 20, fontWeight: 800, color: '#fff', letterSpacing: '-0.02em' }, children: "Tickets" }), _jsxs("p", { style: { margin: '3px 0 0', fontSize: 12, color: 'rgba(255,255,255,0.8)' }, children: [tickets.length, " ticket", tickets.length !== 1 ? 's' : '', " raised"] })] }), _jsx("button", { type: "button", onClick: onNewTicket, style: {
+                    padding: '18px 18px 14px', flexShrink: 0, position: 'relative',
+                }, children: _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12 }, children: [_jsxs("div", { style: { minWidth: 0 }, children: [_jsx("h2", { style: { margin: 0, fontSize: 20, fontWeight: 800, color: '#fff', letterSpacing: '-0.02em' }, children: "Tickets" }), _jsxs("p", { style: { margin: '3px 0 0', fontSize: 12, color: 'rgba(255,255,255,0.8)' }, children: [tickets.length, " ticket", tickets.length !== 1 ? 's' : '', " raised"] })] }), _jsx("button", { type: "button", onClick: onNewTicket, style: {
                                 background: 'rgba(255,255,255,0.22)', border: 'none', borderRadius: 20,
                                 padding: '7px 14px', color: '#fff', fontWeight: 700, fontSize: 13,
                                 cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 5,
-                            }, children: "+ New" })] }) }), _jsx("div", { style: { flex: 1, overflowY: 'auto' }, children: tickets.length === 0 ? (_jsxs("div", { style: { padding: '50px 24px', textAlign: 'center' }, children: [_jsx("div", { style: { fontSize: 36, marginBottom: 10 }, children: "\uD83C\uDFAB" }), _jsx("div", { style: { fontWeight: 700, color: '#1a2332', marginBottom: 6 }, children: "No tickets yet" }), _jsx("div", { style: { fontSize: 13, color: '#7b8fa1' }, children: "Raise a ticket for major issues" })] })) : tickets.map((t, i) => (_jsxs("button", { type: "button", onClick: () => onSelectTicket(t.id), style: {
-                        width: '100%', padding: '14px 16px', borderBottom: '1px solid #f0f2f5',
-                        animation: `cw-fadeUp 0.3s ease both`, animationDelay: `${i * 0.05}s`,
-                        background: 'transparent', borderLeft: 'none', borderRight: 'none', borderTop: 'none',
-                        cursor: 'pointer', textAlign: 'left', fontFamily: 'inherit',
-                    }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 5 }, children: [_jsx("span", { style: { fontWeight: 700, fontSize: 14, color: '#1a2332', flex: 1, paddingRight: 10 }, children: t.title }), _jsx("span", { style: { fontSize: 10, fontWeight: 700, padding: '3px 9px', borderRadius: 20, backgroundColor: sm[t.status].bg, color: sm[t.status].color, whiteSpace: 'nowrap', textTransform: 'uppercase', letterSpacing: '0.04em', flexShrink: 0 }, children: sm[t.status].label })] }), t.description && _jsx("p", { style: { margin: '0 0 7px', fontSize: 13, color: '#7b8fa1', lineHeight: 1.5 }, children: t.description }), _jsxs("div", { style: { display: 'flex', gap: 10, fontSize: 11, color: '#b0bec5' }, children: [_jsxs("span", { style: { color: pm[t.priority].color, fontWeight: 700 }, children: ["\u25CF ", pm[t.priority].label] }), _jsxs("span", { children: ["#", t.id] }), _jsx("span", { children: new Date(t.createdAt).toLocaleDateString([], { month: 'short', day: 'numeric' }) })] })] }, t.id))) })] }));
+                                flexShrink: 0,
+                            }, children: "+ New" })] }) }), _jsx("div", { style: { padding: '10px 14px', background: '#fff', borderBottom: '1px solid #eef0f5', flexShrink: 0 }, children: _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8, padding: '0 12px', borderRadius: 10, border: '1.5px solid #e5e7eb', background: '#f8fafc' }, children: [_jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0, opacity: 0.55 }, children: [_jsx("circle", { cx: "11", cy: "11", r: "7", stroke: "#64748b", strokeWidth: "2" }), _jsx("path", { d: "M20 20l-4-4", stroke: "#64748b", strokeWidth: "2", strokeLinecap: "round" })] }), _jsx("input", { ref: searchRef, type: "search", value: query, onChange: e => setQuery(e.target.value), placeholder: "Search tickets\u2026", autoComplete: "off", "aria-label": "Search tickets", style: {
+                                flex: 1,
+                                minWidth: 0,
+                                border: 'none',
+                                outline: 'none',
+                                background: 'transparent',
+                                fontSize: 14,
+                                padding: '10px 0',
+                                fontFamily: 'inherit',
+                                color: '#1a2332',
+                            } })] }) }), _jsx("div", { style: { flex: 1, overflowY: 'auto' }, children: filtered.length === 0 ? (_jsxs("div", { style: { padding: '50px 24px', textAlign: 'center' }, children: [_jsx("div", { style: { fontSize: 36, marginBottom: 10 }, children: query.trim() ? '🔍' : '🎫' }), _jsx("div", { style: { fontWeight: 700, color: '#1a2332', marginBottom: 6 }, children: query.trim() ? 'No matches' : 'No tickets yet' }), _jsx("div", { style: { fontSize: 13, color: '#7b8fa1' }, children: query.trim() ? 'Try a different search' : 'Raise a ticket for major issues' })] })) : filtered.map((t, i) => (_jsxs("button", { type: "button", onClick: () => onSelectTicket(t.id), style: Object.assign(Object.assign({ width: '100%', padding: '14px 16px', borderBottom: '1px solid #f0f2f5' }, (animateEntrance ? { animation: `cw-fadeUp 0.3s ease both`, animationDelay: `${i * 0.05}s` } : {})), { background: 'transparent', borderLeft: 'none', borderRight: 'none', borderTop: 'none', cursor: 'pointer', textAlign: 'left', fontFamily: 'inherit' }), children: [_jsxs("div", { style: { display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 5 }, children: [_jsx("span", { style: { fontWeight: 700, fontSize: 14, color: '#1a2332', flex: 1, paddingRight: 10 }, children: t.title }), _jsx("span", { style: { fontSize: 10, fontWeight: 700, padding: '3px 9px', borderRadius: 20, backgroundColor: sm[t.status].bg, color: sm[t.status].color, whiteSpace: 'nowrap', textTransform: 'uppercase', letterSpacing: '0.04em', flexShrink: 0 }, children: sm[t.status].label })] }), t.description && _jsx("p", { style: { margin: '0 0 7px', fontSize: 13, color: '#7b8fa1', lineHeight: 1.5 }, children: t.description }), _jsxs("div", { style: { display: 'flex', gap: 10, fontSize: 11, color: '#b0bec5' }, children: [_jsxs("span", { style: { color: pm[t.priority].color, fontWeight: 700 }, children: ["\u25CF ", pm[t.priority].label] }), _jsxs("span", { children: ["#", t.id] }), _jsx("span", { children: new Date(t.createdAt).toLocaleDateString([], { month: 'short', day: 'numeric' }) })] })] }, t.id))) })] }));
 };

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

@@ -12,6 +12,8 @@ interface UserListScreenProps {
     onBlockList?: () => void;
     /** “Need Support” (user → agents): show home icon instead of back arrow */
     useHomeHeader?: boolean;
+    /** Stagger animation — only when opening from home burger menu */
+    animateEntrance?: boolean;
 }
 export declare const UserListScreen: React.FC<UserListScreenProps>;
 export {};

package/dist/components/UserListScreen/index.js

@@ -1,6 +1,23 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useMemo, useRef, useEffect } from 'react';
 import { avatarColor, initials } from '../../utils/chat';
-export const UserListScreen = ({ context, users, primaryColor, viewerType = 'user', onBack, onSelectUser, onBlockList, useHomeHeader = false, }) => {
+function matchesUser(u, q) {
+    if (!q.trim())
+        return true;
+    const s = q.trim().toLowerCase();
+    return (u.name.toLowerCase().includes(s) ||
+        u.email.toLowerCase().includes(s) ||
+        u.designation.toLowerCase().includes(s) ||
+        u.project.toLowerCase().includes(s));
+}
+export const UserListScreen = ({ context, users, primaryColor, viewerType = 'user', onBack, onSelectUser, onBlockList, useHomeHeader = false, animateEntrance = false, }) => {
+    const [query, setQuery] = useState('');
+    const searchRef = useRef(null);
+    useEffect(() => {
+        var _a;
+        (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, []);
+    const filtered = useMemo(() => users.filter(u => matchesUser(u, query)), [users, query]);
     const isStaff = viewerType === 'developer';
     const title = context === 'support'
         ? (isStaff ? 'Provide Support' : 'Need Support')
@@ -8,7 +25,8 @@ export const UserListScreen = ({ context, users, primaryColor, viewerType = 'use
     const subtitle = context === 'support'
         ? (isStaff ? 'All chat users — choose who to help' : 'Choose a support agent')
         : (isStaff ? 'Chat with another developer or coordinate handoff' : 'Choose a colleague');
-    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', height: '100%', animation: 'cw-slideIn 0.22s ease' }, children: [_jsxs("div", { style: { background: `linear-gradient(135deg,${primaryColor},${primaryColor}cc)`, padding: '14px 18px', display: 'flex', alignItems: 'center', gap: 12, flexShrink: 0, position: 'relative' }, children: [useHomeHeader ? _jsx(HomeBtn, { onClick: onBack }) : _jsx(BackBtn, { onClick: onBack }), _jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [_jsx("div", { style: { fontWeight: 700, fontSize: 16, color: '#fff' }, children: title }), _jsx("div", { style: { fontSize: 12, color: 'rgba(255,255,255,0.8)' }, children: subtitle })] }), context === 'conversation' && onBlockList && (_jsxs("button", { type: "button", onClick: onBlockList, style: {
+    const rootAnim = animateEntrance ? 'cw-slideIn 0.22s ease' : undefined;
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', height: '100%', animation: rootAnim }, children: [_jsxs("div", { style: { background: `linear-gradient(135deg,${primaryColor},${primaryColor}cc)`, padding: '14px 18px', display: 'flex', alignItems: 'center', gap: 12, flexShrink: 0, position: 'relative' }, children: [useHomeHeader ? _jsx(HomeBtn, { onClick: onBack }) : _jsx(BackBtn, { onClick: onBack }), _jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [_jsx("div", { style: { fontWeight: 700, fontSize: 16, color: '#fff' }, children: title }), _jsx("div", { style: { fontSize: 12, color: 'rgba(255,255,255,0.8)' }, children: subtitle })] }), context === 'conversation' && onBlockList && (_jsxs("button", { type: "button", onClick: onBlockList, style: {
                             flexShrink: 0,
                             background: 'rgba(255,255,255,0.2)',
                             border: 'none',
@@ -21,14 +39,19 @@ export const UserListScreen = ({ context, users, primaryColor, viewerType = 'use
                             display: 'flex',
                             alignItems: 'center',
                             gap: 6,
-                        }, title: "Blocked users", children: [_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: [_jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "1.8" }), _jsx("line", { x1: "4.93", y1: "4.93", x2: "19.07", y2: "19.07", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" })] }), "Blocked"] }))] }), _jsx("div", { style: { flex: 1, overflowY: 'auto' }, children: users.length === 0 ? (_jsx(Empty, {})) : users.map((u, i) => (_jsxs("button", { onClick: () => onSelectUser(u), style: {
-                        width: '100%', padding: '13px 18px', display: 'flex',
-                        alignItems: 'center', gap: 13, background: 'transparent',
-                        border: 'none', borderBottom: '1px solid #f0f2f5',
-                        cursor: 'pointer', textAlign: 'left',
-                        animation: `cw-fadeUp 0.28s ease both`, animationDelay: `${i * 0.05}s`,
-                        transition: 'background 0.14s',
-                    }, onMouseEnter: e => e.currentTarget.style.background = '#f8faff', onMouseLeave: e => e.currentTarget.style.background = 'transparent', children: [_jsxs("div", { style: { position: 'relative', flexShrink: 0 }, children: [_jsx("div", { style: {
+                        }, title: "Blocked users", children: [_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: [_jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "1.8" }), _jsx("line", { x1: "4.93", y1: "4.93", x2: "19.07", y2: "19.07", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" })] }), "Blocked"] }))] }), _jsx("div", { style: { padding: '10px 14px', background: '#fff', borderBottom: '1px solid #eef0f5', flexShrink: 0 }, children: _jsxs("label", { style: { display: 'block', margin: 0 }, children: [_jsx("span", { style: { position: 'absolute', width: 1, height: 1, padding: 0, overflow: 'hidden', clip: 'rect(0,0,0,0)' }, children: "Search" }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8, padding: '0 12px', borderRadius: 10, border: '1.5px solid #e5e7eb', background: '#f8fafc' }, children: [_jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0, opacity: 0.55 }, children: [_jsx("circle", { cx: "11", cy: "11", r: "7", stroke: "#64748b", strokeWidth: "2" }), _jsx("path", { d: "M20 20l-4-4", stroke: "#64748b", strokeWidth: "2", strokeLinecap: "round" })] }), _jsx("input", { ref: searchRef, type: "search", value: query, onChange: e => setQuery(e.target.value), placeholder: "Search by name\u2026", autoComplete: "off", style: {
+                                        flex: 1,
+                                        minWidth: 0,
+                                        border: 'none',
+                                        outline: 'none',
+                                        background: 'transparent',
+                                        fontSize: 14,
+                                        padding: '10px 0',
+                                        fontFamily: 'inherit',
+                                        color: '#1a2332',
+                                    } })] })] }) }), _jsx("div", { style: { flex: 1, overflowY: 'auto' }, children: filtered.length === 0 ? (_jsx(Empty, { hasQuery: !!query.trim() })) : filtered.map((u, i) => (_jsxs("button", { onClick: () => onSelectUser(u), style: Object.assign(Object.assign({ width: '100%', padding: '13px 18px', display: 'flex', alignItems: 'center', gap: 13, background: 'transparent', border: 'none', borderBottom: '1px solid #f0f2f5', cursor: 'pointer', textAlign: 'left' }, (animateEntrance
+                        ? { animation: `cw-fadeUp 0.28s ease both`, animationDelay: `${i * 0.05}s` }
+                        : {})), { transition: 'background 0.14s' }), onMouseEnter: e => e.currentTarget.style.background = '#f8faff', onMouseLeave: e => e.currentTarget.style.background = 'transparent', children: [_jsxs("div", { style: { position: 'relative', flexShrink: 0 }, children: [_jsx("div", { style: {
                                         width: 44, height: 44, borderRadius: '50%',
                                         backgroundColor: avatarColor(u.name),
                                         display: 'flex', alignItems: 'center', justifyContent: 'center',
@@ -55,4 +78,4 @@ const HomeBtn = ({ onClick }) => (_jsx("button", { type: "button", onClick: onCl
         width: 32, height: 32, display: 'flex', alignItems: 'center', justifyContent: 'center',
         cursor: 'pointer', flexShrink: 0,
     }, children: _jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: [_jsx("path", { d: "M3 9.5L12 3l9 6.5V20a1 1 0 01-1 1H4a1 1 0 01-1-1V9.5z", stroke: "#fff", strokeWidth: "2.2", fill: "none", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M9 21V12h6v9", stroke: "#fff", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round" })] }) }));
-const Empty = () => (_jsxs("div", { style: { padding: '50px 24px', textAlign: 'center' }, children: [_jsx("div", { style: { fontSize: 36, marginBottom: 10 }, children: "\uD83D\uDC65" }), _jsx("div", { style: { fontWeight: 700, color: '#1a2332', marginBottom: 6 }, children: "No users available" }), _jsx("div", { style: { fontSize: 13, color: '#7b8fa1' }, children: "Check back later" })] }));
+const Empty = ({ hasQuery }) => (_jsxs("div", { style: { padding: '50px 24px', textAlign: 'center' }, children: [_jsx("div", { style: { fontSize: 36, marginBottom: 10 }, children: hasQuery ? '🔍' : '👥' }), _jsx("div", { style: { fontWeight: 700, color: '#1a2332', marginBottom: 6 }, children: hasQuery ? 'No matches' : 'No users available' }), _jsx("div", { style: { fontSize: 13, color: '#7b8fa1' }, children: hasQuery ? 'Try a different search' : 'Check back later' })] }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ajaxter-chat",
-  "version": "3.0.10",
+  "version": "3.0.12",
   "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/ChatWidget.tsx

@@ -50,6 +50,8 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme }) =>
   const [chatReturnCtx, setChatReturnCtx] = useState<UserListContext>('conversation');
   const [viewingTicketId, setViewingTicketId] = useState<string | null>(null);
   const [messageSoundEnabled, setMessageSoundEnabledState] = useState(true);
+  /** Stagger list animation only when opening from home burger menu */
+  const [listEntranceAnimation, setListEntranceAnimation] = useState(false);
 
   /* App state */
   const [tickets,      setTickets]      = useState<Ticket[]>(data?.sampleTickets ?? []);
@@ -172,7 +174,8 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme }) =>
   }, [data?.widget]);
 
   /* ── Navigation ──────────────────────────────────────────────────────── */
-  const handleCardClick = useCallback((ctx: UserListContext | 'ticket') => {
+  const handleCardClick = useCallback((ctx: UserListContext | 'ticket', options?: { fromMenu?: boolean }) => {
+    setListEntranceAnimation(!!options?.fromMenu);
     if (ctx === 'ticket') {
       setActiveTab('tickets');
       setScreen('tickets');
@@ -183,6 +186,7 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme }) =>
   }, []);
 
   const handleNavFromMenu = useCallback((ctx: UserListContext | 'ticket') => {
+    setListEntranceAnimation(false);
     clearChat();
     if (ctx === 'ticket') {
       setActiveTab('tickets');
@@ -199,6 +203,7 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme }) =>
   }, []);
 
   const handleSelectUser = useCallback((user: ChatUser, returnCtxOverride?: UserListContext) => {
+    setListEntranceAnimation(false);
     setChatReturnCtx(returnCtxOverride ?? userListCtx);
     const history = data?.sampleChats[user.uid] ?? [];
     selectUser(user, history);
@@ -211,22 +216,31 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme }) =>
   }, [data, selectUser, userListCtx]);
 
   const handleBackFromChat = useCallback(() => {
+    setListEntranceAnimation(false);
     clearChat();
     setUserListCtx(chatReturnCtx);
     setScreen('user-list');
   }, [clearChat, chatReturnCtx]);
 
   const handleOpenTicket = useCallback((id: string) => {
+    setListEntranceAnimation(false);
     setViewingTicketId(id);
     setScreen('ticket-detail');
     setActiveTab('tickets');
   }, []);
 
   const handleTabChange = useCallback((tab: BottomTab) => {
+    setListEntranceAnimation(false);
     setActiveTab(tab);
     setScreen(tab === 'home' ? 'home' : tab === 'chats' ? 'recent-chats' : 'tickets');
   }, []);
 
+  useEffect(() => {
+    if (!listEntranceAnimation) return;
+    const t = window.setTimeout(() => setListEntranceAnimation(false), 520);
+    return () => window.clearTimeout(t);
+  }, [listEntranceAnimation]);
+
   /* ── Block/Unblock ───────────────────────────────────────────────────── */
   const handleBlock = useCallback(() => {
     if (!activeUser) return;
@@ -409,10 +423,10 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme }) =>
         </button>
       )}
 
-      {/* ── Backdrop (mobile) ── */}
+      {/* ── Backdrop (visual only — does not close widget on click) ── */}
       {isOpen && (
         <div
-          onClick={closeDrawer}
+          aria-hidden
           style={{
             position: 'fixed', inset: 0, zIndex: 9997,
             backgroundColor: 'rgba(0,0,0,0.35)',
@@ -517,10 +531,11 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme }) =>
                       users={filteredUsers}
                       primaryColor={primaryColor}
                       viewerType={widgetConfig.viewerType ?? 'user'}
-                      onBack={() => setScreen('home')}
+                      onBack={() => { setListEntranceAnimation(false); setScreen('home'); }}
                       onSelectUser={handleSelectUser}
                       onBlockList={userListCtx === 'conversation' ? () => setScreen('block-list') : undefined}
                       useHomeHeader={userListCtx === 'support' && widgetConfig.viewerType !== 'developer'}
+                      animateEntrance={listEntranceAnimation}
                     />
                   )}
 
@@ -564,6 +579,7 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme }) =>
                       chats={recentChats}
                       config={widgetConfig}
                       onSelectChat={u => handleSelectUser(u, listCtxForUser(u, viewerIsDev))}
+                      animateEntrance={listEntranceAnimation}
                     />
                   )}
 
@@ -571,8 +587,13 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme }) =>
                     <TicketScreen
                       tickets={tickets}
                       config={widgetConfig}
-                      onNewTicket={() => setScreen('ticket-new')}
-                      onSelectTicket={id => { setViewingTicketId(id); setScreen('ticket-detail'); }}
+                      onNewTicket={() => { setListEntranceAnimation(false); setScreen('ticket-new'); }}
+                      onSelectTicket={id => {
+                        setListEntranceAnimation(false);
+                        setViewingTicketId(id);
+                        setScreen('ticket-detail');
+                      }}
+                      animateEntrance={listEntranceAnimation}
                     />
                   )}
 

package/src/components/HomeScreen/index.tsx

@@ -3,9 +3,14 @@ import { WidgetConfig, UserListContext, Ticket } from '../../types';
 import { SlideNavMenu } from '../SlideNavMenu';
 import { truncateWords } from '../../utils/chat';
 
+export interface HomeNavigateOptions {
+  /** When true, list screens play stagger animation (home burger menu only) */
+  fromMenu?: boolean;
+}
+
 interface HomeScreenProps {
   config: WidgetConfig;
-  onNavigate: (ctx: UserListContext | 'ticket') => void;
+  onNavigate: (ctx: UserListContext | 'ticket', options?: HomeNavigateOptions) => void;
   /** Open a specific pending ticket (full detail) */
   onOpenTicket: (ticketId: string) => void;
   tickets: Ticket[];
@@ -46,7 +51,9 @@ export const HomeScreen: React.FC<HomeScreenProps> = ({ config, onNavigate, onOp
         primaryColor={config.primaryColor}
         chatType={config.chatType}
         viewerType={config.viewerType ?? 'user'}
-        onSelect={onNavigate}
+        onSelect={ctx => {
+          onNavigate(ctx, { fromMenu: true });
+        }}
       />
 
       {/* Top bar — burger left */}
@@ -105,7 +112,7 @@ export const HomeScreen: React.FC<HomeScreenProps> = ({ config, onNavigate, onOp
         </p>
 
         {/* Continue Conversations */}
-        <h2 style={{ margin: '0 0 12px', fontSize: 15, fontWeight: 800, color: '#0f172a' }}>Continue Conversations</h2>
+        <h2 style={{ margin: '0 0 12px', fontSize: 15, fontWeight: 800, color: '#0f172a' }}>Continue with tickets</h2>
         <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 28 }}>
           {pendingTickets.length > 0 ? (
             pendingTickets.map(t => (
@@ -163,7 +170,7 @@ export const HomeScreen: React.FC<HomeScreenProps> = ({ config, onNavigate, onOp
 
         {/* Talk to our experts / staff tools */}
         <h2 style={{ margin: '0 0 12px', fontSize: 15, fontWeight: 800, color: '#0f172a' }}>
-          {viewerIsDev ? 'Support tools' : 'Talk to our experts'}
+          {viewerIsDev ? 'Support tools' : 'Talk to support experts'}
         </h2>
 
         {showSupport && (
@@ -306,7 +313,7 @@ export const HomeScreen: React.FC<HomeScreenProps> = ({ config, onNavigate, onOp
                   fill="#fff"
                 />
               </svg>
-              Call Us
+              Get Free Widget
             </button>
           </div>
         </div>

package/src/components/RecentChatsScreen/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useMemo, useRef, useEffect } from 'react';
 import { ChatUser, WidgetConfig } from '../../types';
 import { avatarColor, initials, formatTime } from '../../utils/chat';
 
@@ -10,54 +10,107 @@ interface RecentChatsScreenProps {
   chats:         RecentChat[];
   config:        WidgetConfig;
   onSelectChat:  (user: ChatUser) => void;
+  animateEntrance?: boolean;
 }
 
-export const RecentChatsScreen: React.FC<RecentChatsScreenProps> = ({ chats, config, onSelectChat }) => (
-  <div style={{ display:'flex', flexDirection:'column', height:'100%' }}>
-    <div style={{ background:`linear-gradient(135deg,${config.primaryColor},${config.primaryColor}cc)`, padding:'18px 18px 22px', flexShrink:0 }}>
-      <h2 style={{ margin:0, fontSize:20, fontWeight:800, color:'#fff', letterSpacing:'-0.02em' }}>Recent Chats</h2>
-      <p style={{ margin:'3px 0 0', fontSize:12, color:'rgba(255,255,255,0.8)' }}>Your conversation history</p>
-    </div>
+function matchesChat(chat: RecentChat, q: string): boolean {
+  if (!q.trim()) return true;
+  const s = q.trim().toLowerCase();
+  return (
+    chat.user.name.toLowerCase().includes(s) ||
+    chat.lastMessage.toLowerCase().includes(s)
+  );
+}
+
+export const RecentChatsScreen: React.FC<RecentChatsScreenProps> = ({
+  chats, config, onSelectChat, animateEntrance = false,
+}) => {
+  const [query, setQuery] = useState('');
+  const searchRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    searchRef.current?.focus();
+  }, []);
+
+  const filtered = useMemo(() => chats.filter(c => matchesChat(c, query)), [chats, query]);
 
-    <div style={{ flex:1, overflowY:'auto' }}>
-      {chats.length === 0 ? (
-        <div style={{ padding:'50px 24px', textAlign:'center' }}>
-          <div style={{ fontSize:36, marginBottom:10 }}>💬</div>
-          <div style={{ fontWeight:700, color:'#1a2332', marginBottom:6 }}>No chats yet</div>
-          <div style={{ fontSize:13, color:'#7b8fa1' }}>Start a conversation from home</div>
+  return (
+    <div style={{ display:'flex', flexDirection:'column', height:'100%' }}>
+      <div style={{ background:`linear-gradient(135deg,${config.primaryColor},${config.primaryColor}cc)`, padding:'18px 18px 14px', flexShrink:0 }}>
+        <h2 style={{ margin:0, fontSize:20, fontWeight:800, color:'#fff', letterSpacing:'-0.02em' }}>Recent Chats</h2>
+        <p style={{ margin:'3px 0 0', fontSize:12, color:'rgba(255,255,255,0.8)' }}>Your conversation history</p>
+      </div>
+
+      <div style={{ padding: '10px 14px', background: '#fff', borderBottom: '1px solid #eef0f5', flexShrink: 0 }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '0 12px', borderRadius: 10, border: '1.5px solid #e5e7eb', background: '#f8fafc' }}>
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" style={{ flexShrink: 0, opacity: 0.55 }}>
+            <circle cx="11" cy="11" r="7" stroke="#64748b" strokeWidth="2" />
+            <path d="M20 20l-4-4" stroke="#64748b" strokeWidth="2" strokeLinecap="round" />
+          </svg>
+          <input
+            ref={searchRef}
+            type="search"
+            value={query}
+            onChange={e => setQuery(e.target.value)}
+            placeholder="Search chats…"
+            autoComplete="off"
+            aria-label="Search chats"
+            style={{
+              flex: 1,
+              minWidth: 0,
+              border: 'none',
+              outline: 'none',
+              background: 'transparent',
+              fontSize: 14,
+              padding: '10px 0',
+              fontFamily: 'inherit',
+              color: '#1a2332',
+            }}
+          />
         </div>
-      ) : chats.map((chat, i) => (
-        <button key={chat.id} onClick={() => onSelectChat(chat.user)} style={{
-          width:'100%', padding:'13px 16px', display:'flex', alignItems:'center', gap:13,
-          background:'transparent', border:'none', borderBottom:'1px solid #f0f2f5',
-          cursor:'pointer', textAlign:'left', animation:`cw-fadeUp 0.28s ease both`, animationDelay:`${i*0.05}s`,
-          transition:'background 0.14s',
-        }}
-        onMouseEnter={e=>(e.currentTarget as HTMLElement).style.background='#f8faff'}
-        onMouseLeave={e=>(e.currentTarget as HTMLElement).style.background='transparent'}
-        >
-          <div style={{ position:'relative', flexShrink:0 }}>
-            <div style={{ width:46, height:46, borderRadius:'50%', backgroundColor:avatarColor(chat.user.name), display:'flex', alignItems:'center', justifyContent:'center', color:'#fff', fontWeight:700, fontSize:15 }}>
-              {initials(chat.user.name)}
-            </div>
-            {chat.unread > 0 && (
-              <span style={{ position:'absolute', top:-2, right:-2, width:18, height:18, borderRadius:'50%', background:'#ef4444', color:'#fff', fontSize:10, fontWeight:700, display:'flex', alignItems:'center', justifyContent:'center', border:'2px solid #fff' }}>
-                {chat.unread}
-              </span>
-            )}
+      </div>
+
+      <div style={{ flex:1, overflowY:'auto' }}>
+        {filtered.length === 0 ? (
+          <div style={{ padding:'50px 24px', textAlign:'center' }}>
+            <div style={{ fontSize:36, marginBottom:10 }}>{query.trim() ? '🔍' : '💬'}</div>
+            <div style={{ fontWeight:700, color:'#1a2332', marginBottom:6 }}>{query.trim() ? 'No matches' : 'No chats yet'}</div>
+            <div style={{ fontSize:13, color:'#7b8fa1' }}>{query.trim() ? 'Try a different search' : 'Start a conversation from home'}</div>
           </div>
-          <div style={{ flex:1, minWidth:0 }}>
-            <div style={{ display:'flex', justifyContent:'space-between', marginBottom:3 }}>
-              <span style={{ fontWeight:700, fontSize:14, color:'#1a2332' }}>{chat.user.name}</span>
-              <span style={{ fontSize:11, color:'#b0bec5' }}>{formatTime(chat.lastTime)}</span>
+        ) : filtered.map((chat, i) => (
+          <button key={chat.id} onClick={() => onSelectChat(chat.user)} style={{
+            width:'100%', padding:'13px 16px', display:'flex', alignItems:'center', gap:13,
+            background:'transparent', border:'none', borderBottom:'1px solid #f0f2f5',
+            cursor:'pointer', textAlign:'left',
+            ...(animateEntrance ? { animation: `cw-fadeUp 0.28s ease both`, animationDelay: `${i * 0.05}s` } : {}),
+            transition:'background 0.14s',
+          }}
+          onMouseEnter={e=>(e.currentTarget as HTMLElement).style.background='#f8faff'}
+          onMouseLeave={e=>(e.currentTarget as HTMLElement).style.background='transparent'}
+          >
+            <div style={{ position:'relative', flexShrink:0 }}>
+              <div style={{ width:46, height:46, borderRadius:'50%', backgroundColor:avatarColor(chat.user.name), display:'flex', alignItems:'center', justifyContent:'center', color:'#fff', fontWeight:700, fontSize:15 }}>
+                {initials(chat.user.name)}
+              </div>
+              {chat.unread > 0 && (
+                <span style={{ position:'absolute', top:-2, right:-2, width:18, height:18, borderRadius:'50%', background:'#ef4444', color:'#fff', fontSize:10, fontWeight:700, display:'flex', alignItems:'center', justifyContent:'center', border:'2px solid #fff' }}>
+                  {chat.unread}
+                </span>
+              )}
             </div>
-            <div style={{ fontSize:13, color:'#7b8fa1', overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap', display:'flex', alignItems:'center', gap:5 }}>
-              {chat.isPaused && <span style={{ fontSize:10, background:'#fef3c7', color:'#92400e', padding:'1px 5px', borderRadius:4, fontWeight:700 }}>PAUSED</span>}
-              {chat.lastMessage}
+            <div style={{ flex:1, minWidth:0 }}>
+              <div style={{ display:'flex', justifyContent:'space-between', marginBottom:3 }}>
+                <span style={{ fontWeight:700, fontSize:14, color:'#1a2332' }}>{chat.user.name}</span>
+                <span style={{ fontSize:11, color:'#b0bec5' }}>{formatTime(chat.lastTime)}</span>
+              </div>
+              <div style={{ fontSize:13, color:'#7b8fa1', overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap', display:'flex', alignItems:'center', gap:5 }}>
+                {chat.isPaused && <span style={{ fontSize:10, background:'#fef3c7', color:'#92400e', padding:'1px 5px', borderRadius:4, fontWeight:700 }}>PAUSED</span>}
+                {chat.lastMessage}
+              </div>
             </div>
-          </div>
-        </button>
-      ))}
+          </button>
+        ))}
+      </div>
     </div>
-  </div>
-);
+  );
+};

package/src/components/TicketFormScreen/index.tsx

@@ -70,8 +70,8 @@ export const TicketFormScreen: React.FC<TicketFormScreenProps> = ({ config, onSu
           </svg>
         </button>
         <div>
-          <h2 style={{ margin: 0, fontSize: 18, fontWeight: 800, color: '#fff' }}>New ticket</h2>
-          <p style={{ margin: '4px 0 0', fontSize: 12, color: 'rgba(255,255,255,0.85)' }}>Describe your issue below</p>
+          <h2 style={{ margin: 0, fontSize: 18, fontWeight: 800, color: '#fff' }}>Raise a ticket</h2>
+          <p style={{ margin: '4px 0 0', fontSize: 12, color: 'rgba(255,255,255,0.85)' }}>Please fill out the ticket form below and we will get back to you as soon as possible.</p>
         </div>
       </div>
 

package/src/components/TicketScreen/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useMemo, useRef, useEffect } from 'react';
 import { Ticket, WidgetConfig } from '../../types';
 
 interface TicketScreenProps {
@@ -6,9 +6,31 @@ interface TicketScreenProps {
   config:        WidgetConfig;
   onNewTicket:   () => void;
   onSelectTicket:(id: string) => void;
+  animateEntrance?: boolean;
 }
 
-export const TicketScreen: React.FC<TicketScreenProps> = ({ tickets, config, onNewTicket, onSelectTicket }) => {
+function matchesTicket(t: Ticket, q: string): boolean {
+  if (!q.trim()) return true;
+  const s = q.trim().toLowerCase();
+  return (
+    t.title.toLowerCase().includes(s) ||
+    t.description.toLowerCase().includes(s) ||
+    t.id.toLowerCase().includes(s)
+  );
+}
+
+export const TicketScreen: React.FC<TicketScreenProps> = ({
+  tickets, config, onNewTicket, onSelectTicket, animateEntrance = false,
+}) => {
+  const [query, setQuery] = useState('');
+  const searchRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    searchRef.current?.focus();
+  }, []);
+
+  const filtered = useMemo(() => tickets.filter(t => matchesTicket(t, query)), [tickets, query]);
+
   const sm: Record<Ticket['status'], { label: string; bg: string; color: string }> = {
     open:          { label:'Open',        bg:`${config.primaryColor}14`, color: config.primaryColor },
     'in-progress': { label:'In Progress', bg:'#fef3c7',                  color:'#d97706'            },
@@ -26,10 +48,10 @@ export const TicketScreen: React.FC<TicketScreenProps> = ({ tickets, config, onN
     <div style={{ display:'flex', flexDirection:'column', height:'100%' }}>
       <div style={{
         background:`linear-gradient(135deg,${config.primaryColor},${config.primaryColor}cc)`,
-        padding:'18px 18px 22px', flexShrink:0, position:'relative',
+        padding:'18px 18px 14px', flexShrink:0, position:'relative',
       }}>
-        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start' }}>
-          <div>
+        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', gap: 12 }}>
+          <div style={{ minWidth: 0 }}>
             <h2 style={{ margin:0, fontSize:20, fontWeight:800, color:'#fff', letterSpacing:'-0.02em' }}>Tickets</h2>
             <p style={{ margin:'3px 0 0', fontSize:12, color:'rgba(255,255,255,0.8)' }}>
               {tickets.length} ticket{tickets.length!==1?'s':''} raised
@@ -39,27 +61,57 @@ export const TicketScreen: React.FC<TicketScreenProps> = ({ tickets, config, onN
             background:'rgba(255,255,255,0.22)', border:'none', borderRadius:20,
             padding:'7px 14px', color:'#fff', fontWeight:700, fontSize:13,
             cursor:'pointer', display:'flex', alignItems:'center', gap:5,
+            flexShrink: 0,
           }}>
             + New
           </button>
         </div>
       </div>
 
+      <div style={{ padding: '10px 14px', background: '#fff', borderBottom: '1px solid #eef0f5', flexShrink: 0 }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '0 12px', borderRadius: 10, border: '1.5px solid #e5e7eb', background: '#f8fafc' }}>
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" style={{ flexShrink: 0, opacity: 0.55 }}>
+            <circle cx="11" cy="11" r="7" stroke="#64748b" strokeWidth="2" />
+            <path d="M20 20l-4-4" stroke="#64748b" strokeWidth="2" strokeLinecap="round" />
+          </svg>
+          <input
+            ref={searchRef}
+            type="search"
+            value={query}
+            onChange={e => setQuery(e.target.value)}
+            placeholder="Search tickets…"
+            autoComplete="off"
+            aria-label="Search tickets"
+            style={{
+              flex: 1,
+              minWidth: 0,
+              border: 'none',
+              outline: 'none',
+              background: 'transparent',
+              fontSize: 14,
+              padding: '10px 0',
+              fontFamily: 'inherit',
+              color: '#1a2332',
+            }}
+          />
+        </div>
+      </div>
+
       <div style={{ flex:1, overflowY:'auto' }}>
-        {tickets.length === 0 ? (
+        {filtered.length === 0 ? (
           <div style={{ padding:'50px 24px', textAlign:'center' }}>
-            <div style={{ fontSize:36, marginBottom:10 }}>🎫</div>
-            <div style={{ fontWeight:700, color:'#1a2332', marginBottom:6 }}>No tickets yet</div>
-            <div style={{ fontSize:13, color:'#7b8fa1' }}>Raise a ticket for major issues</div>
+            <div style={{ fontSize:36, marginBottom:10 }}>{query.trim() ? '🔍' : '🎫'}</div>
+            <div style={{ fontWeight:700, color:'#1a2332', marginBottom:6 }}>{query.trim() ? 'No matches' : 'No tickets yet'}</div>
+            <div style={{ fontSize:13, color:'#7b8fa1' }}>{query.trim() ? 'Try a different search' : 'Raise a ticket for major issues'}</div>
           </div>
-        ) : tickets.map((t, i) => (
+        ) : filtered.map((t, i) => (
           <button
             key={t.id}
             type="button"
             onClick={() => onSelectTicket(t.id)}
             style={{
               width:'100%', padding:'14px 16px', borderBottom:'1px solid #f0f2f5',
-              animation:`cw-fadeUp 0.3s ease both`, animationDelay:`${i*0.05}s`,
+              ...(animateEntrance ? { animation: `cw-fadeUp 0.3s ease both`, animationDelay: `${i * 0.05}s` } : {}),
               background:'transparent', borderLeft:'none', borderRight:'none', borderTop:'none',
               cursor:'pointer', textAlign:'left', fontFamily:'inherit',
             }}

package/src/components/UserListScreen/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useMemo, useRef, useEffect } from 'react';
 import { ChatUser, UserListContext } from '../../types';
 import { avatarColor, initials } from '../../utils/chat';
 
@@ -14,12 +14,35 @@ interface UserListScreenProps {
   onBlockList?: () => void;
   /** “Need Support” (user → agents): show home icon instead of back arrow */
   useHomeHeader?: boolean;
+  /** Stagger animation — only when opening from home burger menu */
+  animateEntrance?: boolean;
+}
+
+function matchesUser(u: ChatUser, q: string): boolean {
+  if (!q.trim()) return true;
+  const s = q.trim().toLowerCase();
+  return (
+    u.name.toLowerCase().includes(s) ||
+    u.email.toLowerCase().includes(s) ||
+    u.designation.toLowerCase().includes(s) ||
+    u.project.toLowerCase().includes(s)
+  );
 }
 
 export const UserListScreen: React.FC<UserListScreenProps> = ({
   context, users, primaryColor, viewerType = 'user', onBack, onSelectUser, onBlockList,
   useHomeHeader = false,
+  animateEntrance = false,
 }) => {
+  const [query, setQuery] = useState('');
+  const searchRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    searchRef.current?.focus();
+  }, []);
+
+  const filtered = useMemo(() => users.filter(u => matchesUser(u, query)), [users, query]);
+
   const isStaff = viewerType === 'developer';
   const title    = context === 'support'
     ? (isStaff ? 'Provide Support' : 'Need Support')
@@ -28,8 +51,10 @@ export const UserListScreen: React.FC<UserListScreenProps> = ({
     ? (isStaff ? 'All chat users — choose who to help' : 'Choose a support agent')
     : (isStaff ? 'Chat with another developer or coordinate handoff' : 'Choose a colleague');
 
+  const rootAnim = animateEntrance ? 'cw-slideIn 0.22s ease' : undefined;
+
   return (
-    <div style={{ display:'flex', flexDirection:'column', height:'100%', animation:'cw-slideIn 0.22s ease' }}>
+    <div style={{ display:'flex', flexDirection:'column', height:'100%', animation: rootAnim }}>
       {/* Header */}
       <div style={{ background:`linear-gradient(135deg,${primaryColor},${primaryColor}cc)`, padding:'14px 18px', display:'flex', alignItems:'center', gap:12, flexShrink:0, position:'relative' }}>
         {useHomeHeader ? <HomeBtn onClick={onBack} /> : <BackBtn onClick={onBack} />}
@@ -66,11 +91,42 @@ export const UserListScreen: React.FC<UserListScreenProps> = ({
         )}
       </div>
 
+      <div style={{ padding: '10px 14px', background: '#fff', borderBottom: '1px solid #eef0f5', flexShrink: 0 }}>
+        <label style={{ display: 'block', margin: 0 }}>
+          <span style={{ position: 'absolute', width: 1, height: 1, padding: 0, overflow: 'hidden', clip: 'rect(0,0,0,0)' }}>Search</span>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '0 12px', borderRadius: 10, border: '1.5px solid #e5e7eb', background: '#f8fafc' }}>
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" style={{ flexShrink: 0, opacity: 0.55 }}>
+              <circle cx="11" cy="11" r="7" stroke="#64748b" strokeWidth="2" />
+              <path d="M20 20l-4-4" stroke="#64748b" strokeWidth="2" strokeLinecap="round" />
+            </svg>
+            <input
+              ref={searchRef}
+              type="search"
+              value={query}
+              onChange={e => setQuery(e.target.value)}
+              placeholder="Search by name…"
+              autoComplete="off"
+              style={{
+                flex: 1,
+                minWidth: 0,
+                border: 'none',
+                outline: 'none',
+                background: 'transparent',
+                fontSize: 14,
+                padding: '10px 0',
+                fontFamily: 'inherit',
+                color: '#1a2332',
+              }}
+            />
+          </div>
+        </label>
+      </div>
+
       {/* User list */}
       <div style={{ flex:1, overflowY:'auto' }}>
-        {users.length === 0 ? (
-          <Empty />
-        ) : users.map((u, i) => (
+        {filtered.length === 0 ? (
+          <Empty hasQuery={!!query.trim()} />
+        ) : filtered.map((u, i) => (
           <button
             key={u.uid}
             onClick={() => onSelectUser(u)}
@@ -79,13 +135,14 @@ export const UserListScreen: React.FC<UserListScreenProps> = ({
               alignItems:'center', gap:13, background:'transparent',
               border:'none', borderBottom:'1px solid #f0f2f5',
               cursor:'pointer', textAlign:'left',
-              animation:`cw-fadeUp 0.28s ease both`, animationDelay:`${i*0.05}s`,
+              ...(animateEntrance
+                ? { animation: `cw-fadeUp 0.28s ease both`, animationDelay: `${i * 0.05}s` }
+                : {}),
               transition:'background 0.14s',
             }}
             onMouseEnter={e => (e.currentTarget as HTMLElement).style.background = '#f8faff'}
             onMouseLeave={e => (e.currentTarget as HTMLElement).style.background = 'transparent'}
           >
-            {/* Avatar with online dot */}
             <div style={{ position:'relative', flexShrink:0 }}>
               <div style={{
                 width:44, height:44, borderRadius:'50%',
@@ -99,14 +156,12 @@ export const UserListScreen: React.FC<UserListScreenProps> = ({
                 backgroundColor: u.status==='online' ? '#22c55e' : u.status==='away' ? '#f59e0b' : '#d1d5db',
               }} />
             </div>
-            {/* Info */}
             <div style={{ flex:1, minWidth:0 }}>
               <div style={{ fontWeight:700, fontSize:14, color:'#1a2332', marginBottom:2 }}>{u.name}</div>
               <div style={{ fontSize:12, color:'#7b8fa1', overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>
                 {u.designation} · {u.project}
               </div>
             </div>
-            {/* Type badge */}
             <span style={{
               fontSize:10, fontWeight:700, padding:'3px 9px', borderRadius:20,
               textTransform:'uppercase', letterSpacing:'0.05em', flexShrink:0,
@@ -147,10 +202,10 @@ const HomeBtn: React.FC<{ onClick: () => void }> = ({ onClick }) => (
   </button>
 );
 
-const Empty: React.FC = () => (
+const Empty: React.FC<{ hasQuery: boolean }> = ({ hasQuery }) => (
   <div style={{ padding:'50px 24px', textAlign:'center' }}>
-    <div style={{ fontSize:36, marginBottom:10 }}>👥</div>
-    <div style={{ fontWeight:700, color:'#1a2332', marginBottom:6 }}>No users available</div>
-    <div style={{ fontSize:13, color:'#7b8fa1' }}>Check back later</div>
+    <div style={{ fontSize:36, marginBottom:10 }}>{hasQuery ? '🔍' : '👥'}</div>
+    <div style={{ fontWeight:700, color:'#1a2332', marginBottom:6 }}>{hasQuery ? 'No matches' : 'No users available'}</div>
+    <div style={{ fontSize:13, color:'#7b8fa1' }}>{hasQuery ? 'Try a different search' : 'Check back later'}</div>
   </div>
 );