ajaxter-chat 1.0.3 → 2.0.1

package/dist/src/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/src/components/MaintenanceView/index.d.ts

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,16 @@
+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

@@ -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/src/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/src/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/src/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/src/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/src/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/src/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/src/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" })] }));

package/dist/src/config/index.d.ts

@@ -0,0 +1,3 @@
+import { ChatConfig } from '../types';
+export declare function loadChatConfig(): ChatConfig;
+export declare function buildUserListUrl(config: ChatConfig): string;

package/dist/src/config/index.js

@@ -0,0 +1,38 @@
+function getEnv(key) {
+    var _a, _b, _c;
+    if (typeof process !== 'undefined' && process.env) {
+        return ((_c = (_b = (_a = process.env[`NEXT_PUBLIC_${key}`]) !== null && _a !== void 0 ? _a : process.env[`REACT_APP_${key}`]) !== null && _b !== void 0 ? _b : process.env[key]) !== null && _c !== void 0 ? _c : undefined);
+    }
+    return undefined;
+}
+function validateStatus(v) {
+    if (v === 'ACTIVE' || v === 'DISABLE' || v === 'MAINTENANCE')
+        return v;
+    console.warn(`[ChatWidget] Invalid CHAT_STATUS "${v}". Defaulting to DISABLE.`);
+    return 'DISABLE';
+}
+function validateChatType(v) {
+    if (v === 'SUPPORT' || v === 'CHAT' || v === 'BOTH')
+        return v;
+    console.warn(`[ChatWidget] Invalid CHAT_TYPE "${v}". Defaulting to SUPPORT.`);
+    return 'SUPPORT';
+}
+export function loadChatConfig() {
+    var _a, _b;
+    const portStr = getEnv('CHAT_HOST_PORT');
+    const hostPort = portStr ? parseInt(portStr, 10) : null;
+    return {
+        hostUrl: (_a = getEnv('CHAT_HOST_URL')) !== null && _a !== void 0 ? _a : 'http://localhost',
+        hostPort,
+        userListEndpoint: (_b = getEnv('CHAT_USER_LIST')) !== null && _b !== void 0 ? _b : 'api/users',
+        status: validateStatus(getEnv('CHAT_STATUS')),
+        chatType: validateChatType(getEnv('CHAT_TYPE')),
+    };
+}
+export function buildUserListUrl(config) {
+    const base = config.hostUrl.replace(/\/$/, '');
+    const endpoint = config.userListEndpoint.replace(/^\//, '');
+    // Port is optional
+    const portPart = config.hostPort ? `:${config.hostPort}` : '';
+    return `${base}${portPart}/${endpoint}`;
+}

package/dist/src/hooks/useChat.d.ts

@@ -0,0 +1,8 @@
+import { ChatMessage, ChatUser } from '../types';
+export declare function useChat(): {
+    messages: ChatMessage[];
+    activeUser: ChatUser | null;
+    selectUser: (user: ChatUser) => void;
+    sendMessage: (text: string) => void;
+    clearChat: () => void;
+};

package/dist/src/hooks/useChat.js

@@ -0,0 +1,26 @@
+import { useState, useCallback } from 'react';
+export function useChat() {
+    const [messages, setMessages] = useState([]);
+    const [activeUser, setActiveUser] = useState(null);
+    const selectUser = useCallback((user) => {
+        setActiveUser(user);
+        setMessages([]);
+        // TODO: socket.emit('join', user.uid); socket.on('message', handler)
+    }, []);
+    const sendMessage = useCallback((text) => {
+        if (!activeUser || !text.trim())
+            return;
+        const msg = {
+            id: `msg_${Date.now()}`,
+            senderId: 'me',
+            receiverId: activeUser.uid,
+            text: text.trim(),
+            timestamp: new Date(),
+            status: 'sent',
+        };
+        setMessages(prev => [...prev, msg]);
+        // TODO: socket.emit('message', msg)
+    }, [activeUser]);
+    const clearChat = useCallback(() => { setMessages([]); setActiveUser(null); }, []);
+    return { messages, activeUser, selectUser, sendMessage, clearChat };
+}

package/dist/src/hooks/useUsers.d.ts

@@ -0,0 +1,7 @@
+import { ChatUser, UserType } from '../types';
+export declare function useUsers(url: string, filterType?: UserType, enabled?: boolean): {
+    users: ChatUser[];
+    loading: boolean;
+    error: string | null;
+    refetch: () => Promise<void>;
+};

package/dist/src/hooks/useUsers.js

@@ -0,0 +1,26 @@
+import { useState, useEffect, useCallback } from 'react';
+import { fetchUsers } from '../services/userService';
+export function useUsers(url, filterType, enabled = true) {
+    const [users, setUsers] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const load = useCallback(async () => {
+        if (!enabled)
+            return;
+        setLoading(true);
+        setError(null);
+        try {
+            const data = await fetchUsers(url);
+            setUsers(filterType ? data.filter(u => u.type === filterType) : data);
+        }
+        catch (e) {
+            setError(e instanceof Error ? e.message : 'Unknown error');
+            setUsers([]);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [url, filterType, enabled]);
+    useEffect(() => { load(); }, [load]);
+    return { users, loading, error, refetch: load };
+}

package/dist/src/index.d.ts

@@ -0,0 +1,14 @@
+export { ChatWidget, default } from './components/ChatWidget';
+export { HomeScreen } from './components/HomeScreen';
+export { UserListScreen } from './components/UserListScreen';
+export { ChatScreen } from './components/ChatScreen';
+export { RecentChatsScreen } from './components/RecentChatsScreen';
+export { TicketScreen } from './components/TicketScreen';
+export { MaintenanceView } from './components/MaintenanceView';
+export { BottomTabs } from './components/Tabs/BottomTabs';
+export { useUsers } from './hooks/useUsers';
+export { useChat } from './hooks/useChat';
+export { loadChatConfig, buildUserListUrl } from './config';
+export { fetchUsers } from './services/userService';
+export { defaultTheme, mergeTheme } from './utils/theme';
+export type { ChatUser, ChatMessage, ChatConfig, ChatWidgetTheme, ChatWidgetProps, ChatStatus, ChatType, UserType, Screen, BottomTab, UserListContext, Ticket, } from './types';

package/dist/src/index.js

@@ -0,0 +1,13 @@
+export { ChatWidget, default } from './components/ChatWidget';
+export { HomeScreen } from './components/HomeScreen';
+export { UserListScreen } from './components/UserListScreen';
+export { ChatScreen } from './components/ChatScreen';
+export { RecentChatsScreen } from './components/RecentChatsScreen';
+export { TicketScreen } from './components/TicketScreen';
+export { MaintenanceView } from './components/MaintenanceView';
+export { BottomTabs } from './components/Tabs/BottomTabs';
+export { useUsers } from './hooks/useUsers';
+export { useChat } from './hooks/useChat';
+export { loadChatConfig, buildUserListUrl } from './config';
+export { fetchUsers } from './services/userService';
+export { defaultTheme, mergeTheme } from './utils/theme';

package/dist/src/services/userService.d.ts

@@ -0,0 +1,2 @@
+import { ChatUser } from '../types';
+export declare function fetchUsers(url: string): Promise<ChatUser[]>;

package/dist/src/services/userService.js

@@ -0,0 +1,9 @@
+export async function fetchUsers(url) {
+    const res = await fetch(url, { headers: { 'Content-Type': 'application/json' } });
+    if (!res.ok)
+        throw new Error(`Failed to fetch users: ${res.status}`);
+    const data = await res.json();
+    if (!Array.isArray(data))
+        throw new Error('User API did not return an array');
+    return data;
+}

package/dist/src/types/index.d.ts

@@ -0,0 +1,59 @@
+export type ChatStatus = 'ACTIVE' | 'DISABLE' | 'MAINTENANCE';
+export type ChatType = 'SUPPORT' | 'CHAT' | 'BOTH';
+export type UserType = 'developer' | 'user';
+export type Screen = 'home' | 'user-list' | 'chat' | 'recent-chats' | 'tickets';
+export type UserListContext = 'support' | 'conversation';
+export type BottomTab = 'home' | 'chats' | 'tickets';
+export type WidgetSize = 'normal' | 'maximized';
+export interface ChatUser {
+    name: string;
+    uid: string;
+    email: string;
+    mobile: string;
+    project: string;
+    type: UserType;
+}
+export interface ChatMessage {
+    id: string;
+    senderId: string;
+    receiverId: string;
+    text: string;
+    timestamp: Date;
+    status: 'sent' | 'delivered' | 'read';
+}
+export interface RecentChat {
+    id: string;
+    user: ChatUser;
+    lastMessage: string;
+    lastTime: Date;
+    unread: number;
+}
+export interface Ticket {
+    id: string;
+    title: string;
+    description: string;
+    status: 'open' | 'in-progress' | 'resolved' | 'closed';
+    priority: 'low' | 'medium' | 'high';
+    createdAt: Date;
+    updatedAt: Date;
+}
+export interface ChatConfig {
+    hostUrl: string;
+    hostPort: number | null;
+    userListEndpoint: string;
+    status: ChatStatus;
+    chatType: ChatType;
+}
+export interface ChatWidgetTheme {
+    primaryColor?: string;
+    fontFamily?: string;
+    buttonColor?: string;
+    buttonTextColor?: string;
+    buttonLabel?: string;
+    buttonPosition?: 'bottom-right' | 'bottom-left';
+    borderRadius?: string;
+    backgroundColor?: string;
+}
+export interface ChatWidgetProps {
+    theme?: ChatWidgetTheme;
+}

package/dist/src/types/index.js

@@ -0,0 +1 @@
+export {};

package/dist/src/utils/theme.d.ts

@@ -0,0 +1,3 @@
+import { ChatWidgetTheme } from '../types';
+export declare const defaultTheme: Required<ChatWidgetTheme>;
+export declare function mergeTheme(custom?: ChatWidgetTheme): Required<ChatWidgetTheme>;

package/dist/src/utils/theme.js

@@ -0,0 +1,13 @@
+export const defaultTheme = {
+    primaryColor: '#1aaa96',
+    fontFamily: "'DM Sans', 'Segoe UI', sans-serif",
+    buttonColor: '#1aaa96',
+    buttonTextColor: '#ffffff',
+    buttonLabel: 'Chat with us',
+    buttonPosition: 'bottom-right',
+    borderRadius: '16px',
+    backgroundColor: '#ffffff',
+};
+export function mergeTheme(custom) {
+    return Object.assign(Object.assign({}, defaultTheme), custom);
+}