ajaxter-chat 1.0.3 → 3.0.1

package/dist/components/MaintenanceView/index.js

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

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

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

package/dist/components/RecentChatsScreen/index.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { avatarColor, initials, formatTime } from '../../utils/chat';
+export const RecentChatsScreen = ({ chats, config, onSelectChat }) => (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', height: '100%' }, children: [_jsxs("div", { style: { background: `linear-gradient(135deg,${config.primaryColor},${config.primaryColor}cc)`, padding: '18px 18px 22px', flexShrink: 0 }, children: [_jsx("h2", { style: { margin: 0, fontSize: 20, fontWeight: 800, color: '#fff', letterSpacing: '-0.02em' }, children: "Recent Chats" }), _jsx("p", { style: { margin: '3px 0 0', fontSize: 12, color: 'rgba(255,255,255,0.8)' }, children: "Your conversation history" })] }), _jsx("div", { style: { flex: 1, overflowY: 'auto' }, children: chats.length === 0 ? (_jsxs("div", { style: { padding: '50px 24px', textAlign: 'center' }, children: [_jsx("div", { style: { fontSize: 36, marginBottom: 10 }, children: "\uD83D\uDCAC" }), _jsx("div", { style: { fontWeight: 700, color: '#1a2332', marginBottom: 6 }, children: "No chats yet" }), _jsx("div", { style: { fontSize: 13, color: '#7b8fa1' }, children: "Start a conversation from home" })] })) : chats.map((chat, i) => (_jsxs("button", { onClick: () => onSelectChat(chat.user), style: {
+                    width: '100%', padding: '13px 16px', display: 'flex', alignItems: 'center', gap: 13,
+                    background: 'transparent', border: 'none', borderBottom: '1px solid #f0f2f5',
+                    cursor: 'pointer', textAlign: 'left', animation: `cw-fadeUp 0.28s ease both`, animationDelay: `${i * 0.05}s`,
+                    transition: 'background 0.14s',
+                }, onMouseEnter: e => e.currentTarget.style.background = '#f8faff', onMouseLeave: e => e.currentTarget.style.background = 'transparent', children: [_jsxs("div", { style: { position: 'relative', flexShrink: 0 }, children: [_jsx("div", { style: { width: 46, height: 46, borderRadius: '50%', backgroundColor: avatarColor(chat.user.name), display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontWeight: 700, fontSize: 15 }, children: initials(chat.user.name) }), chat.unread > 0 && (_jsx("span", { style: { position: 'absolute', top: -2, right: -2, width: 18, height: 18, borderRadius: '50%', background: '#ef4444', color: '#fff', fontSize: 10, fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center', border: '2px solid #fff' }, children: chat.unread }))] }), _jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', marginBottom: 3 }, children: [_jsx("span", { style: { fontWeight: 700, fontSize: 14, color: '#1a2332' }, children: chat.user.name }), _jsx("span", { style: { fontSize: 11, color: '#b0bec5' }, children: formatTime(chat.lastTime) })] }), _jsxs("div", { style: { fontSize: 13, color: '#7b8fa1', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', display: 'flex', alignItems: 'center', gap: 5 }, children: [chat.isPaused && _jsx("span", { style: { fontSize: 10, background: '#fef3c7', color: '#92400e', padding: '1px 5px', borderRadius: 4, fontWeight: 700 }, children: "PAUSED" }), chat.lastMessage] })] })] }, chat.id))) })] }));

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;
+    onBlockList: () => void;
+}
+export declare const BottomTabs: React.FC<BottomTabsProps>;
+export {};

package/dist/components/Tabs/BottomTabs.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const BottomTabs = ({ active, onChange, primaryColor, onBlockList }) => {
+    const tabs = [
+        { key: 'home', label: 'Home', Icon: HomeIcon },
+        { key: 'chats', label: 'Chats', Icon: ChatsIcon },
+        { key: 'tickets', label: 'Tickets', Icon: TicketsIcon },
+    ];
+    return (_jsxs("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',
+                        fontSize: '10px', fontWeight: isActive ? 700 : 500,
+                        color: isActive ? primaryColor : '#9aa3af',
+                        borderTop: isActive ? `2px solid ${primaryColor}` : '2px solid transparent',
+                        transition: 'color 0.15s',
+                        fontFamily: 'inherit',
+                    }, children: [_jsx(tab.Icon, { a: isActive, c: isActive ? primaryColor : '#b0bec5' }), tab.label] }, tab.key));
+            }), _jsxs("button", { onClick: onBlockList, style: {
+                    padding: '10px 14px 8px',
+                    display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3,
+                    background: 'transparent', border: 'none', cursor: 'pointer',
+                    fontSize: '10px', fontWeight: 500, color: '#9aa3af',
+                    borderTop: '2px solid transparent',
+                    transition: 'color 0.15s', fontFamily: 'inherit',
+                }, title: "Block List", children: [_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: [_jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "#b0bec5", strokeWidth: "1.8" }), _jsx("line", { x1: "4.93", y1: "4.93", x2: "19.07", y2: "19.07", stroke: "#b0bec5", strokeWidth: "1.8", strokeLinecap: "round" })] }), "Blocked"] })] }));
+};
+const HomeIcon = ({ a, c }) => (_jsxs("svg", { width: "20", height: "20", 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: c, strokeWidth: a ? 2.2 : 1.8, fill: a ? `${c}20` : 'none', strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M9 21V12h6v9", stroke: c, strokeWidth: a ? 2.2 : 1.8, strokeLinecap: "round", strokeLinejoin: "round" })] }));
+const ChatsIcon = ({ a, c }) => (_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: c, strokeWidth: a ? 2.2 : 1.8, fill: a ? `${c}20` : 'none', strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const TicketsIcon = ({ a, c }) => (_jsxs("svg", { width: "20", height: "20", 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: c, strokeWidth: a ? 2.2 : 1.8, fill: a ? `${c}20` : 'none', strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M15 5v4h4M9 13h6M9 17h4", stroke: c, strokeWidth: a ? 2.2 : 1.8, strokeLinecap: "round" })] }));

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

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

package/dist/components/TicketScreen/index.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+export const TicketScreen = ({ tickets, config, onRaiseTicket }) => {
+    const [showForm, setShowForm] = useState(false);
+    const [title, setTitle] = useState('');
+    const [desc, setDesc] = useState('');
+    const [priority, setPriority] = useState('medium');
+    const handleSubmit = () => {
+        if (!title.trim())
+            return;
+        onRaiseTicket(title.trim(), desc.trim(), priority);
+        setTitle('');
+        setDesc('');
+        setPriority('medium');
+        setShowForm(false);
+    };
+    const sm = {
+        open: { label: 'Open', bg: `${config.primaryColor}14`, color: config.primaryColor },
+        'in-progress': { label: 'In Progress', bg: '#fef3c7', color: '#d97706' },
+        resolved: { label: 'Resolved', bg: '#f0fdf4', color: '#16a34a' },
+        closed: { label: 'Closed', bg: '#f3f4f6', color: '#6b7280' },
+    };
+    const pm = {
+        low: { label: 'Low', color: '#6b7280' },
+        medium: { label: 'Medium', color: '#d97706' },
+        high: { label: 'High', color: '#ef4444' },
+    };
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', height: '100%' }, children: [_jsx("div", { style: {
+                    background: `linear-gradient(135deg,${config.primaryColor},${config.primaryColor}cc)`,
+                    padding: '18px 18px 22px', flexShrink: 0, position: 'relative',
+                }, children: _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }, children: [_jsxs("div", { children: [_jsx("h2", { style: { margin: 0, fontSize: 20, fontWeight: 800, color: '#fff', letterSpacing: '-0.02em' }, children: "Tickets" }), _jsxs("p", { style: { margin: '3px 0 0', fontSize: 12, color: 'rgba(255,255,255,0.8)' }, children: [tickets.length, " ticket", tickets.length !== 1 ? 's' : '', " raised"] })] }), _jsx("button", { onClick: () => setShowForm(v => !v), style: {
+                                background: 'rgba(255,255,255,0.22)', border: 'none', borderRadius: 20,
+                                padding: '7px 14px', color: '#fff', fontWeight: 700, fontSize: 13,
+                                cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 5,
+                            }, children: showForm ? '✕ Cancel' : '+ New' })] }) }), showForm && (_jsxs("div", { style: { padding: '16px', borderBottom: '1px solid #eef0f5', background: '#fafcff', flexShrink: 0, animation: 'cw-fadeUp 0.2s ease' }, children: [_jsx("input", { placeholder: "Title *", value: title, onChange: e => setTitle(e.target.value), style: inputStyle(config.primaryColor), onFocus: e => (e.target.style.borderColor = config.primaryColor), onBlur: e => (e.target.style.borderColor = '#e5e7eb') }), _jsx("textarea", { placeholder: "Describe the issue\u2026", value: desc, onChange: e => setDesc(e.target.value), rows: 3, style: Object.assign(Object.assign({}, inputStyle(config.primaryColor)), { resize: 'none', marginTop: 8 }), onFocus: e => (e.target.style.borderColor = config.primaryColor), onBlur: e => (e.target.style.borderColor = '#e5e7eb') }), _jsx("div", { style: { display: 'flex', gap: 8, marginTop: 8, marginBottom: 12 }, children: ['low', 'medium', 'high'].map(p => (_jsx("button", { onClick: () => setPriority(p), style: {
+                                flex: 1, padding: '6px', border: `1.5px solid ${priority === p ? pm[p].color : '#e5e7eb'}`,
+                                borderRadius: 8, background: priority === p ? pm[p].color + '15' : '#fff',
+                                color: pm[p].color, fontWeight: 700, fontSize: 12, cursor: 'pointer', textTransform: 'capitalize',
+                                transition: 'all 0.15s',
+                            }, children: pm[p].label }, p))) }), _jsx("button", { onClick: handleSubmit, disabled: !title.trim(), style: {
+                            width: '100%', padding: '10px', borderRadius: 10, border: 'none',
+                            background: title.trim() ? config.primaryColor : '#e5e7eb',
+                            color: title.trim() ? '#fff' : '#9ca3af',
+                            fontWeight: 700, fontSize: 14, cursor: title.trim() ? 'pointer' : 'not-allowed',
+                        }, children: "Submit Ticket" })] })), _jsx("div", { style: { flex: 1, overflowY: 'auto' }, children: tickets.length === 0 ? (_jsxs("div", { style: { padding: '50px 24px', textAlign: 'center' }, children: [_jsx("div", { style: { fontSize: 36, marginBottom: 10 }, children: "\uD83C\uDFAB" }), _jsx("div", { style: { fontWeight: 700, color: '#1a2332', marginBottom: 6 }, children: "No tickets yet" }), _jsx("div", { style: { fontSize: 13, color: '#7b8fa1' }, children: "Raise a ticket for major issues" })] })) : tickets.map((t, i) => (_jsxs("div", { style: { padding: '14px 16px', borderBottom: '1px solid #f0f2f5', 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: 5 }, children: [_jsx("span", { style: { fontWeight: 700, fontSize: 14, color: '#1a2332', flex: 1, paddingRight: 10 }, children: t.title }), _jsx("span", { style: { fontSize: 10, fontWeight: 700, padding: '3px 9px', borderRadius: 20, backgroundColor: sm[t.status].bg, color: sm[t.status].color, whiteSpace: 'nowrap', textTransform: 'uppercase', letterSpacing: '0.04em', flexShrink: 0 }, children: sm[t.status].label })] }), t.description && _jsx("p", { style: { margin: '0 0 7px', fontSize: 13, color: '#7b8fa1', lineHeight: 1.5 }, children: t.description }), _jsxs("div", { style: { display: 'flex', gap: 10, fontSize: 11, color: '#b0bec5' }, children: [_jsxs("span", { style: { color: pm[t.priority].color, fontWeight: 700 }, children: ["\u25CF ", pm[t.priority].label] }), _jsxs("span", { children: ["#", t.id] }), _jsx("span", { children: new Date(t.createdAt).toLocaleDateString([], { month: 'short', day: 'numeric' }) })] })] }, t.id))) })] }));
+};
+function inputStyle(primaryColor) {
+    return {
+        width: '100%', padding: '9px 13px', borderRadius: 10,
+        border: '1.5px solid #e5e7eb', outline: 'none',
+        fontSize: 14, color: '#1a2332', boxSizing: 'border-box',
+        fontFamily: 'inherit', transition: 'border-color 0.2s',
+    };
+}

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ChatUser, UserListContext } from '../../types';
+interface UserListScreenProps {
+    context: UserListContext;
+    users: ChatUser[];
+    primaryColor: string;
+    onBack: () => void;
+    onSelectUser: (user: ChatUser) => void;
+}
+export declare const UserListScreen: React.FC<UserListScreenProps>;
+export {};

package/dist/components/UserListScreen/index.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { avatarColor, initials } from '../../utils/chat';
+export const UserListScreen = ({ context, users, primaryColor, onBack, onSelectUser, }) => {
+    const title = context === 'support' ? 'Need Support' : 'New Conversation';
+    const subtitle = context === 'support' ? 'Choose a support agent' : 'Choose a colleague';
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', height: '100%', animation: 'cw-slideIn 0.22s ease' }, children: [_jsxs("div", { style: { background: `linear-gradient(135deg,${primaryColor},${primaryColor}cc)`, padding: '14px 18px', display: 'flex', alignItems: 'center', gap: 12, flexShrink: 0 }, children: [_jsx(BackBtn, { onClick: onBack }), _jsxs("div", { children: [_jsx("div", { style: { fontWeight: 700, fontSize: 16, color: '#fff' }, children: title }), _jsx("div", { style: { fontSize: 12, color: 'rgba(255,255,255,0.8)' }, children: subtitle })] })] }), _jsx("div", { style: { flex: 1, overflowY: 'auto' }, children: users.length === 0 ? (_jsx(Empty, {})) : users.map((u, i) => (_jsxs("button", { onClick: () => onSelectUser(u), style: {
+                        width: '100%', padding: '13px 18px', display: 'flex',
+                        alignItems: 'center', gap: 13, background: 'transparent',
+                        border: 'none', borderBottom: '1px solid #f0f2f5',
+                        cursor: 'pointer', textAlign: 'left',
+                        animation: `cw-fadeUp 0.28s ease both`, animationDelay: `${i * 0.05}s`,
+                        transition: 'background 0.14s',
+                    }, onMouseEnter: e => e.currentTarget.style.background = '#f8faff', onMouseLeave: e => e.currentTarget.style.background = 'transparent', children: [_jsxs("div", { style: { position: 'relative', flexShrink: 0 }, children: [_jsx("div", { style: {
+                                        width: 44, height: 44, borderRadius: '50%',
+                                        backgroundColor: avatarColor(u.name),
+                                        display: 'flex', alignItems: 'center', justifyContent: 'center',
+                                        color: '#fff', fontWeight: 700, fontSize: 14,
+                                    }, children: initials(u.name) }), _jsx("span", { style: {
+                                        position: 'absolute', bottom: 1, right: 1,
+                                        width: 11, height: 11, borderRadius: '50%', border: '2px solid #fff',
+                                        backgroundColor: u.status === 'online' ? '#22c55e' : u.status === 'away' ? '#f59e0b' : '#d1d5db',
+                                    } })] }), _jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [_jsx("div", { style: { fontWeight: 700, fontSize: 14, color: '#1a2332', marginBottom: 2 }, children: u.name }), _jsxs("div", { style: { fontSize: 12, color: '#7b8fa1', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: [u.designation, " \u00B7 ", u.project] })] }), _jsx("span", { style: {
+                                fontSize: 10, fontWeight: 700, padding: '3px 9px', borderRadius: 20,
+                                textTransform: 'uppercase', letterSpacing: '0.05em', flexShrink: 0,
+                                background: u.type === 'developer' ? `${primaryColor}15` : '#f0fdf4',
+                                color: u.type === 'developer' ? primaryColor : '#16a34a',
+                                border: `1px solid ${u.type === 'developer' ? primaryColor + '30' : '#16a34a30'}`,
+                            }, children: u.type === 'developer' ? 'Dev' : 'User' })] }, u.uid))) })] }));
+};
+const BackBtn = ({ onClick }) => (_jsx("button", { onClick: onClick, style: {
+        background: 'rgba(255,255,255,0.22)', border: 'none', borderRadius: '50%',
+        width: 32, height: 32, display: 'flex', alignItems: 'center', justifyContent: 'center',
+        cursor: 'pointer', flexShrink: 0,
+    }, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M19 12H5M5 12L12 19M5 12L12 5", stroke: "#fff", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }));
+const Empty = () => (_jsxs("div", { style: { padding: '50px 24px', textAlign: 'center' }, children: [_jsx("div", { style: { fontSize: 36, marginBottom: 10 }, children: "\uD83D\uDC65" }), _jsx("div", { style: { fontWeight: 700, color: '#1a2332', marginBottom: 6 }, children: "No users available" }), _jsx("div", { style: { fontSize: 13, color: '#7b8fa1' }, children: "Check back later" })] }));

package/dist/config/index.d.ts

@@ -1,16 +1,3 @@
-import { ChatConfig } from '../types';
-export declare function loadChatConfig(): ChatConfig;
-/**
- * Resolves the URL used by `fetchUsers`.
- *
- * **Same-origin / internal proxy (recommended):** If `CHAT_USER_LIST` starts with `/`
- * (e.g. `/api/v1/chat/users`), the browser only requests your app origin. The real
- * backend URL stays on the server (Next.js route, BFF, etc.) and does not appear in
- * the client Network tab as a cross-origin call.
- *
- * **Absolute URL:** If `CHAT_USER_LIST` is a full `http(s)://...` string, it is used as-is
- * (visible in Network as that host).
- *
- * **Legacy:** Otherwise the path is joined with `CHAT_HOST_URL` and optional `CHAT_HOST_PORT`.
- */
-export declare function buildUserListUrl(config: ChatConfig): string;
+import { LocalEnvConfig, RemoteChatData } from '../types';
+export declare function loadLocalConfig(): LocalEnvConfig;
+export declare function fetchRemoteChatData(apiKey: string, widgetId: string): Promise<RemoteChatData>;

package/dist/config/index.js

@@ -1,113 +1,30 @@
-/**
- * Safely reads an environment variable.
- * Supports both Next.js (NEXT_PUBLIC_) and React (REACT_APP_) prefixes.
- * Falls back gracefully if running in SSR or non-browser environments.
- */
-function getEnvVar(key) {
+const REMOTE_URL = 'https://window.mscorpres.com/TEST/chatData.json';
+const DEMO_API_KEY = 'demo1234';
+const DEMO_WIDGET_ID = 'demo';
+function getEnv(key) {
     var _a, _b, _c;
-    const nextKey = `NEXT_PUBLIC_${key}`;
-    const reactKey = `REACT_APP_${key}`;
-    // Next.js / Node.js environment
     if (typeof process !== 'undefined' && process.env) {
-        return ((_c = (_b = (_a = process.env[nextKey]) !== null && _a !== void 0 ? _a : process.env[reactKey]) !== null && _b !== void 0 ? _b : process.env[key]) !== null && _c !== void 0 ? _c : undefined);
+        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(value) {
-    const valid = ['ACTIVE', 'DISABLE', 'MAINTENANCE'];
-    if (value && valid.includes(value)) {
-        return value;
-    }
-    console.warn(`[ChatWidget] Invalid CHAT_STATUS "${value}". Defaulting to "DISABLE".`);
-    return 'DISABLE';
-}
-function validateChatType(value) {
-    const valid = ['SUPPORT', 'CHAT', 'BOTH'];
-    if (value && valid.includes(value)) {
-        return value;
-    }
-    console.warn(`[ChatWidget] Invalid CHAT_TYPE "${value}". Defaulting to "SUPPORT".`);
-    return 'SUPPORT';
-}
-function parseBool(value, defaultValue) {
-    if (value === undefined || value === '')
-        return defaultValue;
-    const v = value.toLowerCase().trim();
-    if (v === 'true' || v === '1' || v === 'yes')
-        return true;
-    if (v === 'false' || v === '0' || v === 'no')
-        return false;
-    return defaultValue;
-}
-function parsePositiveInt(value, fallback) {
-    if (value === undefined || value === '')
-        return fallback;
-    const n = parseInt(value, 10);
-    return Number.isFinite(n) && n > 0 ? n : fallback;
-}
-function parseOptionalPort(value) {
-    if (value === undefined || value.trim() === '')
-        return undefined;
-    const n = parseInt(value, 10);
-    return Number.isFinite(n) && n > 0 ? n : undefined;
-}
-function parseSizeRatio(value, fallback) {
-    if (value === undefined || value === '')
-        return fallback;
-    const n = parseFloat(value);
-    if (!Number.isFinite(n))
-        return fallback;
-    return Math.min(1, Math.max(0, n));
-}
-export function loadChatConfig() {
+export function loadLocalConfig() {
     var _a, _b;
-    const hostUrl = (_a = getEnvVar('CHAT_HOST_URL')) !== null && _a !== void 0 ? _a : 'http://localhost';
-    const hostPort = parseOptionalPort(getEnvVar('CHAT_HOST_PORT'));
-    const userListEndpoint = (_b = getEnvVar('CHAT_USER_LIST')) !== null && _b !== void 0 ? _b : 'api/users';
-    const status = validateStatus(getEnvVar('CHAT_STATUS'));
-    const chatType = validateChatType(getEnvVar('CHAT_TYPE'));
-    const showNeedSupport = parseBool(getEnvVar('CHAT_SHOW_NEED_SUPPORT'), true);
-    const showNewConversation = parseBool(getEnvVar('CHAT_SHOW_NEW_CONVERSATION'), true);
     return {
-        hostUrl,
-        hostPort,
-        userListEndpoint,
-        status,
-        chatType,
-        showNeedSupport,
-        showNewConversation,
-        widgetMinWidth: parsePositiveInt(getEnvVar('CHAT_WIDGET_MIN_WIDTH'), 320),
-        widgetMaxWidth: parsePositiveInt(getEnvVar('CHAT_WIDGET_MAX_WIDTH'), 720),
-        widgetMinHeight: parsePositiveInt(getEnvVar('CHAT_WIDGET_MIN_HEIGHT'), 420),
-        widgetMaxHeight: parsePositiveInt(getEnvVar('CHAT_WIDGET_MAX_HEIGHT'), 720),
-        widgetDefaultSize: parseSizeRatio(getEnvVar('CHAT_WIDGET_DEFAULT_SIZE'), 0.45),
+        apiKey: (_a = getEnv('CHAT_API_KEY')) !== null && _a !== void 0 ? _a : DEMO_API_KEY,
+        widgetId: (_b = getEnv('CHAT_WIDGET_ID')) !== null && _b !== void 0 ? _b : DEMO_WIDGET_ID,
     };
 }
-/**
- * Resolves the URL used by `fetchUsers`.
- *
- * **Same-origin / internal proxy (recommended):** If `CHAT_USER_LIST` starts with `/`
- * (e.g. `/api/v1/chat/users`), the browser only requests your app origin. The real
- * backend URL stays on the server (Next.js route, BFF, etc.) and does not appear in
- * the client Network tab as a cross-origin call.
- *
- * **Absolute URL:** If `CHAT_USER_LIST` is a full `http(s)://...` string, it is used as-is
- * (visible in Network as that host).
- *
- * **Legacy:** Otherwise the path is joined with `CHAT_HOST_URL` and optional `CHAT_HOST_PORT`.
- */
-export function buildUserListUrl(config) {
-    const raw = config.userListEndpoint.trim();
-    if (raw.startsWith('/')) {
-        return raw;
-    }
-    if (/^https?:\/\//i.test(raw)) {
-        return raw;
-    }
-    const base = config.hostUrl.replace(/\/$/, '');
-    const endpoint = raw.replace(/^\//, '');
-    if (config.hostPort !== undefined) {
-        return `${base}:${config.hostPort}/${endpoint}`;
-    }
-    return `${base}/${endpoint}`;
+export async function fetchRemoteChatData(apiKey, widgetId) {
+    const url = REMOTE_URL;
+    const res = await fetch(url, {
+        headers: {
+            'X-Chat-Api-Key': apiKey,
+            'X-Chat-Widget-Id': widgetId,
+            'Content-Type': 'application/json',
+        },
+    });
+    if (!res.ok)
+        throw new Error(`Failed to load chat config: ${res.status}`);
+    return res.json();
 }

package/dist/hooks/useChat.d.ts

@@ -1,12 +1,13 @@
-import { ChatMessage, ChatUser, RecentChat } from '../types';
-interface UseChatReturn {
+import { ChatMessage, ChatUser } from '../types';
+export declare function useChat(initialMessages?: ChatMessage[]): {
     messages: ChatMessage[];
     activeUser: ChatUser | null;
-    recentChats: RecentChat[];
-    selectUser: (user: ChatUser) => void;
-    sendMessage: (text: string) => void;
+    isPaused: boolean;
+    isReported: boolean;
+    selectUser: (user: ChatUser, history?: ChatMessage[]) => void;
+    sendMessage: (text: string, type?: ChatMessage["type"], extra?: Partial<ChatMessage>) => void;
+    togglePause: () => void;
+    reportChat: () => void;
     clearChat: () => void;
-    openRecent: (user: ChatUser) => void;
-}
-export declare function useChat(): UseChatReturn;
-export {};
+    setMessages: import("react").Dispatch<import("react").SetStateAction<ChatMessage[]>>;
+};

package/dist/hooks/useChat.js

@@ -1,48 +1,30 @@
 import { useState, useCallback } from 'react';
-export function useChat() {
-    const [messages, setMessages] = useState([]);
+export function useChat(initialMessages = []) {
+    const [messages, setMessages] = useState(initialMessages);
     const [activeUser, setActiveUser] = useState(null);
-    const [recentChats, setRecentChats] = useState([]);
-    const upsertRecent = useCallback((user, lastMessage) => {
-        const updatedAt = new Date();
-        setRecentChats((prev) => {
-            const rest = prev.filter((r) => r.user.uid !== user.uid);
-            return [{ user, lastMessage, updatedAt }, ...rest].slice(0, 50);
-        });
-    }, []);
-    const selectUser = useCallback((user) => {
-        setActiveUser(user);
-        setMessages([]);
-    }, []);
-    const openRecent = useCallback((user) => {
+    const [isPaused, setIsPaused] = useState(false);
+    const [isReported, setIsReported] = useState(false);
+    const selectUser = useCallback((user, history = []) => {
         setActiveUser(user);
-        setMessages([]);
+        setMessages(history);
+        setIsPaused(false);
+        setIsReported(false);
+        // TODO: socket.emit('join', { roomId: user.uid });
+        // TODO: socket.on('message', msg => setMessages(prev => [...prev, msg]));
     }, []);
-    const sendMessage = useCallback((text) => {
-        if (!activeUser || !text.trim())
+    const sendMessage = useCallback((text, type = 'text', extra = {}) => {
+        if (!activeUser || isPaused)
             return;
-        const newMsg = {
-            id: `msg_${Date.now()}_${Math.random().toString(36).slice(2)}`,
-            senderId: 'me',
-            receiverId: activeUser.uid,
-            text: text.trim(),
-            timestamp: new Date(),
-            status: 'sent',
-        };
-        setMessages((prev) => [...prev, newMsg]);
-        upsertRecent(activeUser, text.trim());
-    }, [activeUser, upsertRecent]);
-    const clearChat = useCallback(() => {
-        setMessages([]);
-        setActiveUser(null);
-    }, []);
+        const msg = Object.assign({ id: `msg_${Date.now()}_${Math.random().toString(36).slice(2)}`, senderId: 'me', receiverId: activeUser.uid, text, timestamp: new Date().toISOString(), type, status: 'sent' }, extra);
+        setMessages(prev => [...prev, msg]);
+        // TODO: socket.emit('message', msg);
+    }, [activeUser, isPaused]);
+    const togglePause = useCallback(() => setIsPaused(p => !p), []);
+    const reportChat = useCallback(() => { setIsReported(true); /* TODO: API call */ }, []);
+    const clearChat = useCallback(() => { setMessages([]); setActiveUser(null); }, []);
     return {
-        messages,
-        activeUser,
-        recentChats,
-        selectUser,
-        sendMessage,
-        clearChat,
-        openRecent,
+        messages, activeUser, isPaused, isReported,
+        selectUser, sendMessage, togglePause, reportChat, clearChat,
+        setMessages,
     };
 }

package/dist/hooks/useRemoteConfig.d.ts

@@ -0,0 +1,6 @@
+import { RemoteChatData } from '../types';
+export declare function useRemoteConfig(apiKey: string, widgetId: string): {
+    data: RemoteChatData | null;
+    loading: boolean;
+    error: string | null;
+};

package/dist/hooks/useRemoteConfig.js

@@ -0,0 +1,22 @@
+import { useState, useEffect } from 'react';
+import { fetchRemoteChatData } from '../config';
+export function useRemoteConfig(apiKey, widgetId) {
+    const [data, setData] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        let cancelled = false;
+        setLoading(true);
+        fetchRemoteChatData(apiKey, widgetId)
+            .then(d => { if (!cancelled) {
+            setData(d);
+            setLoading(false);
+        } })
+            .catch(e => { if (!cancelled) {
+            setError(e.message);
+            setLoading(false);
+        } });
+        return () => { cancelled = true; };
+    }, [apiKey, widgetId]);
+    return { data, loading, error };
+}

package/dist/hooks/useWebRTC.d.ts

@@ -0,0 +1,11 @@
+import { CallSession, ChatUser } from '../types';
+export declare function useWebRTC(): {
+    session: CallSession;
+    localVideoRef: import("react").RefObject<HTMLVideoElement | null>;
+    remoteVideoRef: import("react").RefObject<HTMLVideoElement | null>;
+    startCall: (peer: ChatUser, withVideo?: boolean) => Promise<void>;
+    acceptCall: (offer: RTCSessionDescriptionInit, peer: ChatUser, withVideo?: boolean) => Promise<void>;
+    endCall: () => void;
+    toggleMute: () => void;
+    toggleCamera: () => void;
+};