ajaxter-chat 2.0.1 → 3.0.3

package/dist/src/components/ChatScreen/index.js

@@ -1,83 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useRef, useEffect } from 'react';
-import { mergeTheme } from '../../utils/theme';
-export const ChatScreen = ({ activeUser, messages, onSend, onBack, onClose, theme, }) => {
-    const t = mergeTheme(theme);
-    const [text, setText] = useState('');
-    const endRef = useRef(null);
-    const inputRef = useRef(null);
-    useEffect(() => { var _a; (_a = endRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'smooth' }); }, [messages]);
-    const handleSend = () => {
-        var _a;
-        if (!text.trim())
-            return;
-        onSend(text);
-        setText('');
-        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    };
-    const handleKey = (e) => {
-        if (e.key === 'Enter' && !e.shiftKey) {
-            e.preventDefault();
-            handleSend();
-        }
-    };
-    const initials = activeUser.name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
-    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', height: '100%', animation: 'cw-slideInRight 0.25s ease' }, children: [_jsxs("div", { style: {
-                    backgroundColor: t.primaryColor,
-                    padding: '14px 18px',
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: '10px',
-                    flexShrink: 0,
-                }, children: [_jsx("button", { onClick: onBack, style: iconBtnStyle, 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" }) }) }), _jsx("div", { style: {
-                            width: 36, height: 36, borderRadius: '50%',
-                            backgroundColor: 'rgba(255,255,255,0.25)',
-                            display: 'flex', alignItems: 'center', justifyContent: 'center',
-                            fontWeight: 700, fontSize: '13px', color: '#fff', flexShrink: 0,
-                        }, children: initials }), _jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [_jsx("div", { style: { fontWeight: 700, fontSize: '14px', color: '#fff', fontFamily: t.fontFamily }, children: activeUser.name }), _jsxs("div", { style: { fontSize: '11px', color: 'rgba(255,255,255,0.8)', display: 'flex', alignItems: 'center', gap: 4 }, children: [_jsx("span", { style: { width: 6, height: 6, borderRadius: '50%', backgroundColor: '#a8f0c6', display: 'inline-block' } }), "Online"] })] }), _jsx("button", { onClick: onClose, style: iconBtnStyle, children: _jsx("svg", { width: "16", height: "16", 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", { style: {
-                    flex: 1, overflowY: 'auto', padding: '18px 16px',
-                    display: 'flex', flexDirection: 'column', gap: '10px',
-                    backgroundColor: '#f7f8fc',
-                }, children: [messages.length === 0 && (_jsxs("div", { style: {
-                            margin: 'auto', textAlign: 'center',
-                            fontSize: '13px', color: '#b0bec5',
-                            fontFamily: t.fontFamily,
-                        }, children: [_jsx("div", { style: { fontSize: '28px', marginBottom: 8 }, children: "\uD83D\uDCAC" }), "Say hi to ", activeUser.name, "!"] })), messages.map(msg => (_jsx(Bubble, { msg: msg, primaryColor: t.primaryColor, font: t.fontFamily }, msg.id))), _jsx("div", { ref: endRef })] }), _jsxs("div", { style: {
-                    borderTop: '1px solid #eef0f5',
-                    padding: '10px 14px',
-                    backgroundColor: '#fff',
-                    display: 'flex',
-                    alignItems: 'flex-end',
-                    gap: '10px',
-                    flexShrink: 0,
-                }, children: [_jsx("textarea", { ref: inputRef, value: text, onChange: e => setText(e.target.value), onKeyDown: handleKey, placeholder: "Type and press [enter]..", rows: 1, style: {
-                            flex: 1, resize: 'none', border: 'none', outline: 'none',
-                            fontFamily: t.fontFamily, fontSize: '14px', lineHeight: '1.5',
-                            maxHeight: '80px', overflowY: 'auto', color: '#1a2332',
-                            padding: '6px 0', backgroundColor: 'transparent',
-                        } }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '8px', flexShrink: 0 }, children: [_jsx(IconBtn, { onClick: () => { }, title: "Reaction", children: _jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: [_jsx("path", { d: "M14 9h.01M10 9h.01M12 2a10 10 0 100 20A10 10 0 0012 2zm0 14s-4-1.5-4-4", stroke: "#9aa3af", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M8 15s1.5 2 4 2 4-2 4-2", stroke: "#9aa3af", strokeWidth: "1.8", strokeLinecap: "round" })] }) }), _jsx(IconBtn, { onClick: () => { }, title: "Attach", children: _jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66L9.41 17.41a2 2 0 01-2.83-2.83l8.49-8.48", stroke: "#9aa3af", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }) }), _jsx(IconBtn, { onClick: () => { }, title: "Emoji", children: _jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: [_jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "#9aa3af", strokeWidth: "1.8" }), _jsx("path", { d: "M8 14s1.5 2 4 2 4-2 4-2", stroke: "#9aa3af", strokeWidth: "1.8", strokeLinecap: "round" }), _jsx("line", { x1: "9", y1: "9", x2: "9.01", y2: "9", stroke: "#9aa3af", strokeWidth: "2.5", strokeLinecap: "round" }), _jsx("line", { x1: "15", y1: "9", x2: "15.01", y2: "9", stroke: "#9aa3af", strokeWidth: "2.5", strokeLinecap: "round" })] }) }), text.trim() && (_jsx("button", { onClick: handleSend, style: {
-                                    width: 36, height: 36, borderRadius: '50%',
-                                    backgroundColor: t.primaryColor, border: 'none',
-                                    cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
-                                    transition: 'transform 0.15s',
-                                }, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M22 2L11 13M22 2L15 22L11 13L2 9L22 2Z", stroke: "#fff", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }))] })] })] }));
-};
-const Bubble = ({ msg, primaryColor, font }) => {
-    const isMe = msg.senderId === 'me';
-    const time = new Date(msg.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
-    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: isMe ? 'flex-end' : 'flex-start', gap: 3 }, children: [_jsx("div", { style: {
-                    maxWidth: '75%', padding: '10px 14px',
-                    borderRadius: isMe ? '18px 18px 4px 18px' : '18px 18px 18px 4px',
-                    backgroundColor: isMe ? primaryColor : '#fff',
-                    color: isMe ? '#fff' : '#1a2332',
-                    fontSize: '14px', lineHeight: '1.5',
-                    boxShadow: '0 1px 4px rgba(0,0,0,0.07)',
-                    fontFamily: font, wordBreak: 'break-word',
-                }, children: msg.text }), _jsx("span", { style: { fontSize: '11px', color: '#b0bec5', padding: '0 4px' }, children: time })] }));
-};
-const IconBtn = ({ onClick, title, children }) => (_jsx("button", { onClick: onClick, title: title, style: { background: 'none', border: 'none', cursor: 'pointer', padding: '4px', display: 'flex', alignItems: 'center', borderRadius: '6px' }, onMouseEnter: e => e.currentTarget.style.background = '#f3f4f6', onMouseLeave: e => e.currentTarget.style.background = 'none', children: children }));
-const iconBtnStyle = {
-    background: 'rgba(255,255,255,0.2)', border: 'none', borderRadius: '50%',
-    width: 34, height: 34, display: 'flex', alignItems: 'center', justifyContent: 'center',
-    cursor: 'pointer', flexShrink: 0,
-};

package/dist/src/components/ChatWidget.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { ChatWidgetProps } from '../types';
-export declare const ChatWidget: React.FC<ChatWidgetProps>;
-export default ChatWidget;

package/dist/src/components/ChatWidget.js

@@ -1,141 +0,0 @@
-'use client';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect, useCallback } from 'react';
-import { loadChatConfig, buildUserListUrl } from '../config';
-import { mergeTheme } from '../utils/theme';
-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 [isMounted, setIsMounted] = useState(false);
-    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);
-    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;
-    if (config.status === 'DISABLE')
-        return null;
-    return (_jsxs(_Fragment, { children: [_jsx("style", { children: `
-        @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap');
-        @keyframes cw-fadeUp {
-          from { opacity:0; transform:translateY(10px); }
-          to   { opacity:1; transform:translateY(0);    }
-        }
-        @keyframes cw-slideInRight {
-          from { opacity:0; transform:translateX(18px); }
-          to   { opacity:1; transform:translateX(0);    }
-        }
-        @keyframes cw-popIn {
-          from { opacity:0; transform:scale(0.88) translateY(16px); }
-          to   { opacity:1; transform:scale(1)    translateY(0);    }
-        }
-        .cw-scrollbar::-webkit-scrollbar { width:4px; }
-        .cw-scrollbar::-webkit-scrollbar-track { background:transparent; }
-        .cw-scrollbar::-webkit-scrollbar-thumb { background:#e0e0e0; border-radius:4px; }
-      ` }), _jsx("button", { onClick: () => setIsOpen(o => !o), "aria-label": isOpen ? 'Close chat' : t.buttonLabel, style: Object.assign(Object.assign({ position: 'fixed', bottom: 24 }, posStyle), { zIndex: 9999, display: 'flex', alignItems: 'center', gap: 10, padding: isOpen ? '14px' : '13px 22px', backgroundColor: t.buttonColor, color: t.buttonTextColor, border: 'none', borderRadius: 50, cursor: 'pointer', fontFamily: t.fontFamily, fontSize: '15px', fontWeight: 700, boxShadow: `0 8px 28px ${t.buttonColor}55`, transition: 'all 0.3s cubic-bezier(0.34,1.56,0.64,1)', transform: isOpen ? 'scale(0.94)' : 'scale(1)', minWidth: isOpen ? 50 : 'auto', justifyContent: 'center' }), onMouseEnter: e => {
-                    if (!isOpen) {
-                        e.currentTarget.style.transform = 'scale(1.06) translateY(-2px)';
-                        e.currentTarget.style.boxShadow = `0 12px 36px ${t.buttonColor}77`;
-                    }
-                }, 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/src/components/HomeScreen/index.d.ts

@@ -1,9 +0,0 @@
-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/src/components/HomeScreen/index.js

@@ -1,71 +0,0 @@
-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/src/components/MaintenanceView/index.d.ts

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

package/dist/src/components/MaintenanceView/index.js

@@ -1,16 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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/src/components/RecentChatsScreen/index.d.ts

@@ -1,16 +0,0 @@
-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/src/components/RecentChatsScreen/index.js

@@ -1,38 +0,0 @@
-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/src/components/Tabs/BottomTabs.d.ts

@@ -1,10 +0,0 @@
-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/src/components/Tabs/BottomTabs.js

@@ -1,29 +0,0 @@
-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/src/components/TicketScreen/index.d.ts

@@ -1,9 +0,0 @@
-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/src/components/TicketScreen/index.js

@@ -1,71 +0,0 @@
-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/src/components/UserListScreen/index.d.ts

@@ -1,13 +0,0 @@
-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 {};