ajaxter-chat 1.0.3 → 2.0.1

package/dist/components/ChatWidget.js

@@ -1,50 +1,141 @@
-'use client'; // Next.js App Router directive (ignored in React/Pages Router)
+'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect } from 'react';
-import { loadChatConfig } from '../config';
-import { ChatButton } from './ChatButton';
-import { ChatWindow } from './ChatWindow';
+import { useState, useEffect, useCallback } from 'react';
+import { loadChatConfig, buildUserListUrl } from '../config';
 import { mergeTheme } from '../utils/theme';
-/**
- * ChatWidget
- *
- * Drop-in chat widget for React.js and Next.js apps.
- * All behavior is configured via environment variables.
- * All UI styling is configured via the `theme` prop.
- *
- * @example
- * // Basic usage
- * <ChatWidget />
- *
- * @example
- * // With custom theme
- * <ChatWidget
- *   theme={{
- *     primaryColor: '#FF6B6B',
- *     buttonColor: '#FF6B6B',
- *     buttonLabel: 'Need Help?',
- *     buttonPosition: 'bottom-left',
- *     fontFamily: "'Inter', sans-serif",
- *     borderRadius: '12px',
- *   }}
- * />
- */
+import { useUsers } from '../hooks/useUsers';
+import { useChat } from '../hooks/useChat';
+// Screens
+import { HomeScreen } from './HomeScreen';
+import { UserListScreen } from './UserListScreen';
+import { ChatScreen } from './ChatScreen';
+import { RecentChatsScreen } from './RecentChatsScreen';
+import { TicketScreen } from './TicketScreen';
+import { MaintenanceView } from './MaintenanceView';
+import { BottomTabs } from './Tabs/BottomTabs';
 export const ChatWidget = ({ theme }) => {
-    const [isOpen, setIsOpen] = useState(false);
     const [isMounted, setIsMounted] = useState(false);
-    // SSR Safety: Only render on the client
-    useEffect(() => {
-        setIsMounted(true);
-    }, []);
-    // Load config from env (safe on both client and server)
+    const [isOpen, setIsOpen] = useState(false);
+    const [isMaximized, setIsMaximized] = useState(false);
+    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);
-    // Don't render anything server-side
+    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');
+        }
+    }, []);
+    const handleCardClick = useCallback((ctx) => {
+        if (ctx === 'ticket') {
+            setActiveTab('tickets');
+            setScreen('tickets');
+        }
+        else {
+            setUserListCtx(ctx);
+            setScreen('user-list');
+        }
+    }, []);
+    const handleSelectUser = useCallback((user) => {
+        selectUser(user);
+        setScreen('chat');
+    }, [selectUser]);
+    const handleBackFromUserList = useCallback(() => {
+        setScreen('home');
+    }, []);
+    const handleBackFromChat = useCallback(() => {
+        clearChat();
+        setScreen('user-list');
+    }, [clearChat]);
+    const handleRaiseTicket = useCallback((title, description) => {
+        const t = {
+            id: `ticket_${Date.now()}`,
+            title,
+            description,
+            status: 'open',
+            priority: 'medium',
+            createdAt: new Date(),
+            updatedAt: new Date(),
+        };
+        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'
+        ? { left: 24, right: 'auto' }
+        : { right: 24, left: 'auto' };
     if (!isMounted)
         return null;
-    // DISABLE: render nothing at all
     if (config.status === 'DISABLE')
         return null;
-    return (_jsxs(_Fragment, { children: [isOpen && (_jsx(ChatWindow, { config: config, theme: theme, buttonPosition: t.buttonPosition, onClose: () => setIsOpen(false) })), _jsx(ChatButton, { isOpen: isOpen, onClick: () => setIsOpen((prev) => !prev), theme: theme })] }));
+    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`;
+                    }
+                }, 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 }))] }))] }));
 };
 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" }) }));

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

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

package/dist/components/HomeScreen/index.js

@@ -0,0 +1,71 @@
+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);
+    const showSupport = config.chatType === 'SUPPORT' || config.chatType === 'BOTH';
+    const showConversation = config.chatType === 'CHAT' || config.chatType === 'BOTH';
+    const cards = [
+        showSupport && {
+            key: 'support',
+            title: 'Need Support',
+            subtitle: 'We typically reply in a few minutes',
+            onClick: () => onNavigate('support'),
+        },
+        showConversation && {
+            key: 'conversation',
+            title: 'New Conversation',
+            subtitle: 'With your colleague',
+            onClick: () => onNavigate('conversation'),
+        },
+        // Raise Ticket is always shown
+        {
+            key: 'ticket',
+            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',
+                    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',
+                        animation: `cw-fadeUp 0.35s ease both`,
+                        animationDelay: `${i * 0.08}s`,
+                        fontFamily: t.fontFamily,
+                    }, onMouseEnter: e => {
+                        e.currentTarget.style.transform = 'translateY(-2px)';
+                        e.currentTarget.style.boxShadow = '0 6px 20px rgba(0,0,0,0.13)';
+                    }, 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))) })] }));
+};
+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" }) }));

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

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

package/dist/components/MaintenanceView/index.js

@@ -1,53 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const MaintenanceView = ({ fontFamily, primaryColor, }) => {
-    return (_jsxs("div", { style: {
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            justifyContent: 'center',
-            height: '100%',
-            padding: '32px',
-            fontFamily,
-            textAlign: 'center',
-            gap: '16px',
-        }, children: [_jsx("div", { style: {
-                    width: '72px',
-                    height: '72px',
-                    borderRadius: '50%',
-                    backgroundColor: `${primaryColor}15`,
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    marginBottom: '8px',
-                }, 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: 700,
-                    color: '#1a1a2e',
-                    letterSpacing: '-0.02em',
-                }, children: "Under Maintenance" }), _jsx("p", { style: {
-                    margin: 0,
-                    fontSize: '14px',
-                    color: '#888',
-                    lineHeight: 1.6,
-                    maxWidth: '220px',
-                }, children: "Chat is under maintenance. We'll be back shortly. Thank you for your patience!" }), _jsxs("span", { style: {
-                    display: 'inline-flex',
-                    alignItems: 'center',
-                    gap: '6px',
-                    padding: '6px 14px',
-                    borderRadius: '20px',
-                    backgroundColor: '#fff3cd',
-                    color: '#856404',
-                    fontSize: '12px',
-                    fontWeight: 600,
-                    marginTop: '8px',
-                    border: '1px solid #ffc10730',
-                }, children: [_jsx("span", { style: {
-                            width: '6px',
-                            height: '6px',
-                            borderRadius: '50%',
-                            backgroundColor: '#ffc107',
-                            display: 'inline-block',
-                        } }), "Temporarily Unavailable"] })] }));
-};
+export const MaintenanceView = ({ primaryColor, fontFamily }) => (_jsxs("div", { style: {
+        display: 'flex', flexDirection: 'column', alignItems: 'center',
+        justifyContent: 'center', height: '100%', padding: '32px',
+        fontFamily, 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: {
+                display: 'inline-flex', alignItems: 'center', gap: 6,
+                padding: '6px 14px', borderRadius: 20,
+                backgroundColor: '#fff3cd', color: '#856404',
+                fontSize: '12px', 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

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

package/dist/components/RecentChatsScreen/index.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { mergeTheme } from '../../utils/theme';
+export const RecentChatsScreen = ({ chats, theme, onSelectChat }) => {
+    const t = mergeTheme(theme);
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', height: '100%' }, children: [_jsxs("div", { style: {
+                    backgroundColor: t.primaryColor,
+                    padding: '20px 20px 24px',
+                    flexShrink: 0,
+                }, children: [_jsx("h2", { style: { margin: 0, fontSize: '20px', fontWeight: 800, color: '#fff', fontFamily: t.fontFamily, letterSpacing: '-0.02em' }, children: "Recent Chats" }), _jsx("p", { style: { margin: '4px 0 0', fontSize: '13px', color: 'rgba(255,255,255,0.8)', fontFamily: t.fontFamily }, children: "Your conversation history" })] }), _jsx("div", { style: { flex: 1, overflowY: 'auto' }, children: chats.length === 0 ? (_jsxs("div", { style: { padding: '50px 24px', textAlign: 'center', fontFamily: t.fontFamily }, children: [_jsx("div", { style: { fontSize: '36px', marginBottom: 12 }, children: "\uD83D\uDCAC" }), _jsx("div", { style: { fontWeight: 700, color: '#1a2332', marginBottom: 6 }, children: "No chats yet" }), _jsx("div", { style: { fontSize: '13px', color: '#7b8fa1' }, children: "Start a conversation from the home tab" })] })) : (chats.map((chat, i) => {
+                    const initials = chat.user.name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
+                    const avatarColors = ['#1aaa96', '#2563EB', '#7C3AED', '#D97706', '#DC2626'];
+                    const bg = avatarColors[chat.user.name.charCodeAt(0) % avatarColors.length];
+                    const timeStr = new Date(chat.lastTime).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+                    return (_jsxs("button", { onClick: () => onSelectChat(chat.user), style: {
+                            width: '100%', padding: '14px 20px',
+                            display: 'flex', alignItems: 'center', gap: '14px',
+                            background: 'transparent', border: 'none',
+                            borderBottom: '1px solid #f3f4f6',
+                            cursor: 'pointer', textAlign: 'left',
+                            fontFamily: t.fontFamily,
+                            animation: `cw-fadeUp 0.3s ease both`,
+                            animationDelay: `${i * 0.05}s`,
+                            transition: 'background 0.15s',
+                        }, onMouseEnter: e => e.currentTarget.style.background = '#f8fdfc', onMouseLeave: e => e.currentTarget.style.background = 'transparent', children: [_jsxs("div", { style: {
+                                    width: 46, height: 46, borderRadius: '50%', backgroundColor: bg,
+                                    display: 'flex', alignItems: 'center', justifyContent: 'center',
+                                    color: '#fff', fontWeight: 700, fontSize: '15px', flexShrink: 0,
+                                    position: 'relative',
+                                }, children: [initials, chat.unread > 0 && (_jsx("span", { style: {
+                                            position: 'absolute', top: -2, right: -2,
+                                            width: 18, height: 18, borderRadius: '50%',
+                                            backgroundColor: '#ff4757', color: '#fff',
+                                            fontSize: '10px', 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: '14px', color: '#1a2332' }, children: chat.user.name }), _jsx("span", { style: { fontSize: '11px', color: '#b0bec5' }, children: timeStr })] }), _jsx("div", { style: { fontSize: '13px', color: '#7b8fa1', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: chat.lastMessage })] })] }, chat.id));
+                })) })] }));
+};

package/dist/components/Tabs/BottomTabs.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { BottomTab } from '../../types';
+interface BottomTabsProps {
+    active: BottomTab;
+    onChange: (tab: BottomTab) => void;
+    primaryColor: string;
+    fontFamily: string;
+}
+export declare const BottomTabs: React.FC<BottomTabsProps>;
+export {};

package/dist/components/Tabs/BottomTabs.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const BottomTabs = ({ active, onChange, primaryColor, fontFamily }) => {
+    const tabs = [
+        { key: 'home', label: 'Home', Icon: HomeIcon },
+        { key: 'chats', label: 'Chats', Icon: ChatsIcon },
+        { key: 'tickets', label: 'Tickets', Icon: TicketsIcon },
+    ];
+    return (_jsx("div", { style: {
+            display: 'flex',
+            borderTop: '1px solid #eef0f5',
+            backgroundColor: '#fff',
+            flexShrink: 0,
+        }, children: tabs.map(tab => {
+            const isActive = active === tab.key;
+            return (_jsxs("button", { onClick: () => onChange(tab.key), style: {
+                    flex: 1, padding: '10px 0 8px',
+                    display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3,
+                    background: 'transparent', border: 'none', cursor: 'pointer',
+                    fontFamily, fontSize: '10px', fontWeight: isActive ? 700 : 500,
+                    color: isActive ? primaryColor : '#9aa3af',
+                    transition: 'color 0.15s',
+                    borderTop: isActive ? `2px solid ${primaryColor}` : '2px solid transparent',
+                }, children: [_jsx(tab.Icon, { active: isActive, color: isActive ? primaryColor : '#b0bec5' }), tab.label] }, tab.key));
+        }) }));
+};
+// ── Icons ─────────────────────────────────────────────────────────────────────
+const HomeIcon = ({ active, color }) => (_jsxs("svg", { width: "22", height: "22", 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: color, strokeWidth: active ? 2.2 : 1.8, strokeLinecap: "round", strokeLinejoin: "round", fill: active ? `${color}20` : 'none' }), _jsx("path", { d: "M9 21V12h6v9", stroke: color, strokeWidth: active ? 2.2 : 1.8, strokeLinecap: "round", strokeLinejoin: "round" })] }));
+const ChatsIcon = ({ active, color }) => (_jsx("svg", { width: "22", height: "22", 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: active ? 2.2 : 1.8, strokeLinecap: "round", strokeLinejoin: "round", fill: active ? `${color}20` : 'none' }) }));
+const TicketsIcon = ({ active, color }) => (_jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", children: [_jsx("path", { d: "M15 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V9l-4-4z", stroke: color, strokeWidth: active ? 2.2 : 1.8, strokeLinecap: "round", strokeLinejoin: "round", fill: active ? `${color}20` : 'none' }), _jsx("path", { d: "M15 5v4h4M9 13h6M9 17h4", stroke: color, strokeWidth: active ? 2.2 : 1.8, strokeLinecap: "round" })] }));

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ChatWidgetTheme, Ticket } from '../../types';
+interface TicketScreenProps {
+    tickets: Ticket[];
+    theme?: ChatWidgetTheme;
+    onRaiseTicket: (title: string, description: string) => void;
+}
+export declare const TicketScreen: React.FC<TicketScreenProps>;
+export {};

package/dist/components/TicketScreen/index.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { mergeTheme } from '../../utils/theme';
+export const TicketScreen = ({ tickets, theme, onRaiseTicket }) => {
+    const t = mergeTheme(theme);
+    const [showForm, setShowForm] = useState(false);
+    const [title, setTitle] = useState('');
+    const [desc, setDesc] = useState('');
+    const handleSubmit = () => {
+        if (!title.trim())
+            return;
+        onRaiseTicket(title.trim(), desc.trim());
+        setTitle('');
+        setDesc('');
+        setShowForm(false);
+    };
+    const statusMeta = {
+        'open': { label: 'Open', bg: '#e6faf8', color: t.primaryColor },
+        'in-progress': { label: 'In Progress', bg: '#fffbeb', color: '#d97706' },
+        'resolved': { label: 'Resolved', bg: '#f0fdf4', color: '#16a34a' },
+        'closed': { label: 'Closed', bg: '#f3f4f6', color: '#6b7280' },
+    };
+    const priorityMeta = {
+        low: { label: '↓ Low', color: '#6b7280' },
+        medium: { label: '→ Medium', color: '#d97706' },
+        high: { label: '↑ High', color: '#dc2626' },
+    };
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', height: '100%' }, children: [_jsx("div", { style: { backgroundColor: t.primaryColor, padding: '20px 20px 24px', flexShrink: 0 }, children: _jsxs("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' }, children: [_jsxs("div", { children: [_jsx("h2", { style: { margin: 0, fontSize: '20px', fontWeight: 800, color: '#fff', fontFamily: t.fontFamily, letterSpacing: '-0.02em' }, children: "Tickets" }), _jsxs("p", { style: { margin: '4px 0 0', fontSize: '13px', color: 'rgba(255,255,255,0.8)', fontFamily: t.fontFamily }, children: [tickets.length, " ticket", tickets.length !== 1 ? 's' : '', " raised"] })] }), _jsx("button", { onClick: () => setShowForm(v => !v), style: {
+                                background: 'rgba(255,255,255,0.25)', border: 'none', borderRadius: '20px',
+                                padding: '8px 16px', color: '#fff', fontWeight: 700, fontSize: '13px',
+                                cursor: 'pointer', fontFamily: t.fontFamily, display: 'flex', alignItems: 'center', gap: 5,
+                            }, children: showForm ? '✕ Cancel' : '+ New Ticket' })] }) }), showForm && (_jsxs("div", { style: {
+                    padding: '16px 20px',
+                    borderBottom: '1px solid #eef0f5',
+                    backgroundColor: '#fafcff',
+                    animation: 'cw-fadeUp 0.2s ease',
+                    flexShrink: 0,
+                }, children: [_jsx("input", { placeholder: "Ticket title *", value: title, onChange: e => setTitle(e.target.value), style: {
+                            width: '100%', padding: '10px 14px', borderRadius: 10,
+                            border: '1.5px solid #e2e8f0', outline: 'none',
+                            fontFamily: t.fontFamily, fontSize: '14px', color: '#1a2332',
+                            marginBottom: 10, boxSizing: 'border-box',
+                        }, onFocus: e => (e.target.style.borderColor = t.primaryColor), onBlur: e => (e.target.style.borderColor = '#e2e8f0') }), _jsx("textarea", { placeholder: "Describe the issue (optional)", value: desc, onChange: e => setDesc(e.target.value), rows: 3, style: {
+                            width: '100%', padding: '10px 14px', borderRadius: 10,
+                            border: '1.5px solid #e2e8f0', outline: 'none', resize: 'none',
+                            fontFamily: t.fontFamily, fontSize: '14px', color: '#1a2332',
+                            marginBottom: 10, boxSizing: 'border-box',
+                        }, onFocus: e => (e.target.style.borderColor = t.primaryColor), onBlur: e => (e.target.style.borderColor = '#e2e8f0') }), _jsx("button", { onClick: handleSubmit, disabled: !title.trim(), style: {
+                            width: '100%', padding: '11px', borderRadius: 10,
+                            backgroundColor: title.trim() ? t.primaryColor : '#e2e8f0',
+                            color: title.trim() ? '#fff' : '#9aa3af',
+                            border: 'none', cursor: title.trim() ? 'pointer' : 'not-allowed',
+                            fontWeight: 700, fontSize: '14px', fontFamily: t.fontFamily,
+                            transition: 'background 0.2s',
+                        }, children: "Submit Ticket" })] })), _jsx("div", { style: { flex: 1, overflowY: 'auto' }, children: tickets.length === 0 ? (_jsxs("div", { style: { padding: '50px 24px', textAlign: 'center', fontFamily: t.fontFamily }, children: [_jsx("div", { style: { fontSize: '36px', marginBottom: 12 }, children: "\uD83C\uDFAB" }), _jsx("div", { style: { fontWeight: 700, color: '#1a2332', marginBottom: 6 }, children: "No tickets yet" }), _jsx("div", { style: { fontSize: '13px', color: '#7b8fa1' }, children: "Raise a ticket for major issues or changes" })] })) : (tickets.map((ticket, i) => {
+                    const sm = statusMeta[ticket.status];
+                    const pm = priorityMeta[ticket.priority];
+                    const date = new Date(ticket.createdAt).toLocaleDateString([], { month: 'short', day: 'numeric' });
+                    return (_jsxs("div", { style: {
+                            padding: '14px 20px',
+                            borderBottom: '1px solid #f3f4f6',
+                            fontFamily: t.fontFamily,
+                            animation: `cw-fadeUp 0.3s ease both`,
+                            animationDelay: `${i * 0.05}s`,
+                        }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 6 }, children: [_jsx("span", { style: { fontWeight: 700, fontSize: '14px', color: '#1a2332', flex: 1, paddingRight: 12 }, children: ticket.title }), _jsx("span", { style: {
+                                            fontSize: '10px', fontWeight: 700, padding: '3px 9px', borderRadius: 20,
+                                            backgroundColor: sm.bg, color: sm.color, whiteSpace: 'nowrap',
+                                            textTransform: 'uppercase', letterSpacing: '0.04em',
+                                        }, children: sm.label })] }), ticket.description && (_jsx("div", { style: { fontSize: '13px', color: '#7b8fa1', marginBottom: 8, lineHeight: 1.5 }, children: ticket.description })), _jsxs("div", { style: { display: 'flex', gap: 12, fontSize: '11px', color: '#b0bec5' }, children: [_jsx("span", { style: { color: pm.color, fontWeight: 600 }, children: pm.label }), _jsxs("span", { children: ["#", ticket.id.slice(-6).toUpperCase()] }), _jsx("span", { children: date })] })] }, ticket.id));
+                })) })] }));
+};

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ChatUser, ChatWidgetTheme, UserListContext } from '../../types';
+interface UserListScreenProps {
+    context: UserListContext;
+    users: ChatUser[];
+    loading: boolean;
+    error: string | null;
+    theme?: ChatWidgetTheme;
+    onBack: () => void;
+    onSelectUser: (user: ChatUser) => void;
+}
+export declare const UserListScreen: React.FC<UserListScreenProps>;
+export {};

package/dist/components/UserListScreen/index.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { mergeTheme } from '../../utils/theme';
+export const UserListScreen = ({ context, users, loading, error, theme, onBack, onSelectUser, }) => {
+    const t = mergeTheme(theme);
+    const title = context === 'support' ? 'Need Support' : 'New Conversation';
+    const subtitle = context === 'support'
+        ? 'Choose a support agent'
+        : 'Choose a colleague to chat with';
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', height: '100%', animation: 'cw-slideInRight 0.25s ease' }, children: [_jsxs("div", { style: {
+                    backgroundColor: t.primaryColor,
+                    padding: '16px 20px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '12px',
+                    flexShrink: 0,
+                }, children: [_jsx("button", { onClick: onBack, style: {
+                            background: 'rgba(255,255,255,0.2)',
+                            border: 'none',
+                            borderRadius: '50%',
+                            width: '34px',
+                            height: '34px',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            cursor: 'pointer',
+                            flexShrink: 0,
+                        }, 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.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) }), _jsxs("div", { children: [_jsx("div", { style: { fontWeight: 700, fontSize: '16px', color: '#fff', fontFamily: t.fontFamily }, children: title }), _jsx("div", { style: { fontSize: '12px', color: 'rgba(255,255,255,0.8)', fontFamily: t.fontFamily }, children: subtitle })] })] }), _jsxs("div", { style: { flex: 1, overflowY: 'auto', padding: '8px 0' }, children: [loading && _jsx(UserListSkeleton, {}), error && _jsx(ErrorState, { message: error, color: t.primaryColor, font: t.fontFamily }), !loading && !error && users.length === 0 && (_jsx(EmptyState, { color: t.primaryColor, font: t.fontFamily })), !loading && !error && users.map((user, i) => (_jsx(UserRow, { user: user, index: i, primaryColor: t.primaryColor, fontFamily: t.fontFamily, onClick: () => onSelectUser(user) }, user.uid)))] })] }));
+};
+// ── Sub-components ─────────────────────────────────────────────────────────────
+const UserRow = ({ user, index, primaryColor, fontFamily, onClick }) => {
+    const initials = user.name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
+    const avatarColors = ['#1aaa96', '#2563EB', '#7C3AED', '#D97706', '#DC2626', '#059669'];
+    const bg = avatarColors[user.name.charCodeAt(0) % avatarColors.length];
+    return (_jsxs("button", { onClick: onClick, style: {
+            width: '100%',
+            padding: '14px 20px',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '14px',
+            background: 'transparent',
+            border: 'none',
+            borderBottom: '1px solid #f3f4f6',
+            cursor: 'pointer',
+            textAlign: 'left',
+            fontFamily,
+            animation: 'cw-fadeUp 0.3s ease both',
+            animationDelay: `${index * 0.05}s`,
+            transition: 'background 0.15s',
+        }, onMouseEnter: e => e.currentTarget.style.background = '#f8fdfc', onMouseLeave: e => e.currentTarget.style.background = 'transparent', children: [_jsx("div", { style: {
+                    width: '46px', height: '46px', borderRadius: '50%',
+                    backgroundColor: bg, flexShrink: 0,
+                    display: 'flex', alignItems: 'center', justifyContent: 'center',
+                    color: '#fff', fontWeight: 700, fontSize: '15px',
+                }, children: initials }), _jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [_jsx("div", { style: { fontWeight: 700, fontSize: '14px', color: '#1a2332', marginBottom: '2px' }, children: user.name }), _jsx("div", { style: { fontSize: '12px', color: '#7b8fa1', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: user.project || user.email })] }), _jsx("span", { style: {
+                    fontSize: '10px', fontWeight: 700, padding: '3px 9px',
+                    borderRadius: '20px', textTransform: 'uppercase', letterSpacing: '0.05em',
+                    backgroundColor: user.type === 'developer' ? '#e6faf8' : '#eff6ff',
+                    color: user.type === 'developer' ? primaryColor : '#2563EB',
+                    border: `1px solid ${user.type === 'developer' ? primaryColor + '30' : '#2563eb30'}`,
+                }, children: user.type === 'developer' ? 'Dev' : 'User' })] }));
+};
+const UserListSkeleton = () => (_jsx(_Fragment, { children: [1, 2, 3, 4].map(i => (_jsxs("div", { style: { padding: '14px 20px', display: 'flex', gap: '14px', alignItems: 'center' }, children: [_jsx("div", { style: { width: 46, height: 46, borderRadius: '50%', background: '#f0f0f0', flexShrink: 0 } }), _jsxs("div", { style: { flex: 1 }, children: [_jsx("div", { style: { height: 13, width: '55%', background: '#f0f0f0', borderRadius: 6, marginBottom: 7 } }), _jsx("div", { style: { height: 11, width: '38%', background: '#f0f0f0', borderRadius: 6 } })] })] }, i))) }));
+const ErrorState = ({ message, color, font }) => (_jsxs("div", { style: { padding: '40px 24px', textAlign: 'center', fontFamily: font }, children: [_jsx("div", { style: { fontSize: '32px', marginBottom: '10px' }, children: "\u26A0\uFE0F" }), _jsx("div", { style: { fontWeight: 700, color: '#1a2332', marginBottom: '6px' }, children: "Could not load users" }), _jsx("div", { style: { fontSize: '13px', color: '#7b8fa1' }, children: message })] }));
+const EmptyState = ({ color, font }) => (_jsxs("div", { style: { padding: '40px 24px', textAlign: 'center', fontFamily: font }, children: [_jsx("div", { style: { fontSize: '32px', marginBottom: '10px' }, children: "\uD83D\uDC65" }), _jsx("div", { style: { fontWeight: 700, color: '#1a2332', marginBottom: '6px' }, children: "No users available" }), _jsx("div", { style: { fontSize: '13px', color: '#7b8fa1' }, children: "Check back later" })] }));