ajaxter-chat 2.0.1 → 3.0.3

package/dist/components/RecentChatsScreen/index.js

@@ -1,38 +1,8 @@
 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));
-                })) })] }));
-};
+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

@@ -4,7 +4,7 @@ interface BottomTabsProps {
     active: BottomTab;
     onChange: (tab: BottomTab) => void;
     primaryColor: string;
-    fontFamily: string;
+    onBlockList: () => void;
 }
 export declare const BottomTabs: React.FC<BottomTabsProps>;
 export {};

package/dist/components/Tabs/BottomTabs.js

@@ -1,29 +1,34 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const BottomTabs = ({ active, onChange, primaryColor, fontFamily }) => {
+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 (_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',
+    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',
-                    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));
-        }) }));
+                    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"] })] }));
 };
-// ── 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" })] }));
+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

@@ -1,9 +1,9 @@
 import React from 'react';
-import { ChatWidgetTheme, Ticket } from '../../types';
+import { Ticket, WidgetConfig } from '../../types';
 interface TicketScreenProps {
     tickets: Ticket[];
-    theme?: ChatWidgetTheme;
-    onRaiseTicket: (title: string, description: string) => void;
+    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

@@ -1,71 +1,54 @@
 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);
+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());
+        onRaiseTicket(title.trim(), desc.trim(), priority);
         setTitle('');
         setDesc('');
+        setPriority('medium');
         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 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 priorityMeta = {
-        low: { label: '↓ Low', color: '#6b7280' },
-        medium: { label: '→ Medium', color: '#d97706' },
-        high: { label: '↑ High', color: '#dc2626' },
+    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: { 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));
-                })) })] }));
+    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

@@ -1,11 +1,9 @@
 import React from 'react';
-import { ChatUser, ChatWidgetTheme, UserListContext } from '../../types';
+import { ChatUser, UserListContext } from '../../types';
 interface UserListScreenProps {
     context: UserListContext;
     users: ChatUser[];
-    loading: boolean;
-    error: string | null;
-    theme?: ChatWidgetTheme;
+    primaryColor: string;
     onBack: () => void;
     onSelectUser: (user: ChatUser) => void;
 }

package/dist/components/UserListScreen/index.js

@@ -1,64 +1,35 @@
-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);
+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 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)))] })] }));
+    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))) })] }));
 };
-// ── 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" })] }));
+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,3 +1,7 @@
-import { ChatConfig } from '../types';
-export declare function loadChatConfig(): ChatConfig;
-export declare function buildUserListUrl(config: ChatConfig): string;
+import { LocalEnvConfig, RemoteChatData } from '../types';
+/**
+ * Loads remote widget config once via GET. Uses query params `key` and `widget` so the
+ * server can validate the request without custom headers (avoids CORS preflight failures).
+ */
+export declare function fetchRemoteChatData(apiKey: string, widgetId: string): Promise<RemoteChatData>;
+export declare function loadLocalConfig(): LocalEnvConfig;

package/dist/config/index.js

@@ -1,3 +1,7 @@
+/** Default JSON endpoint; override with REACT_APP_CHAT_CONFIG_URL / NEXT_PUBLIC_CHAT_CONFIG_URL */
+const DEFAULT_CHAT_DATA_BASE = 'https://window.mscorpres.com/TEST/chatData.json';
+const DEMO_API_KEY = 'demo1234';
+const DEMO_WIDGET_ID = 'demo';
 function getEnv(key) {
     var _a, _b, _c;
     if (typeof process !== 'undefined' && process.env) {
@@ -5,34 +9,33 @@ function getEnv(key) {
     }
     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 getChatDataBaseUrl() {
+    var _a;
+    return ((_a = getEnv('CHAT_CONFIG_URL')) === null || _a === void 0 ? void 0 : _a.trim()) || DEFAULT_CHAT_DATA_BASE;
 }
-function validateChatType(v) {
-    if (v === 'SUPPORT' || v === 'CHAT' || v === 'BOTH')
-        return v;
-    console.warn(`[ChatWidget] Invalid CHAT_TYPE "${v}". Defaulting to SUPPORT.`);
-    return 'SUPPORT';
+/**
+ * Loads remote widget config once via GET. Uses query params `key` and `widget` so the
+ * server can validate the request without custom headers (avoids CORS preflight failures).
+ */
+export async function fetchRemoteChatData(apiKey, widgetId) {
+    const base = getChatDataBaseUrl();
+    const url = new URL(base, typeof window !== 'undefined' ? window.location.origin : 'https://localhost');
+    url.searchParams.set('key', apiKey);
+    url.searchParams.set('widget', widgetId);
+    const res = await fetch(url.toString(), {
+        method: 'GET',
+        credentials: 'omit',
+        mode: 'cors',
+        headers: { Accept: 'application/json' },
+    });
+    if (!res.ok)
+        throw new Error(`Failed to load chat config: ${res.status}`);
+    return res.json();
 }
-export function loadChatConfig() {
+export function loadLocalConfig() {
     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')),
+        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,
     };
 }
-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/hooks/useChat.d.ts

@@ -1,8 +1,13 @@
 import { ChatMessage, ChatUser } from '../types';
-export declare function useChat(): {
+export declare function useChat(initialMessages?: ChatMessage[]): {
     messages: ChatMessage[];
     activeUser: ChatUser | null;
-    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;
+    setMessages: import("react").Dispatch<import("react").SetStateAction<ChatMessage[]>>;
 };

package/dist/hooks/useChat.js

@@ -1,26 +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 selectUser = useCallback((user) => {
+    const [isPaused, setIsPaused] = useState(false);
+    const [isReported, setIsReported] = useState(false);
+    const selectUser = useCallback((user, history = []) => {
         setActiveUser(user);
-        setMessages([]);
-        // TODO: socket.emit('join', user.uid); socket.on('message', handler)
+        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 msg = {
-            id: `msg_${Date.now()}`,
-            senderId: 'me',
-            receiverId: activeUser.uid,
-            text: text.trim(),
-            timestamp: new Date(),
-            status: 'sent',
-        };
+        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]);
+        // 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, selectUser, sendMessage, clearChat };
+    return {
+        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,26 @@
+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);
+            setError(null);
+            setLoading(false);
+        } })
+            .catch(e => {
+            if (!cancelled) {
+                const msg = e instanceof Error ? e.message : String(e);
+                setError(msg || 'Network error while loading configuration');
+                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").MutableRefObject<HTMLVideoElement | null>;
+    remoteVideoRef: import("react").MutableRefObject<HTMLVideoElement | null>;
+    startCall: (peer: ChatUser, withVideo?: boolean) => Promise<void>;
+    acceptCall: (offer: RTCSessionDescriptionInit, peer: ChatUser, withVideo?: boolean) => Promise<void>;
+    endCall: () => void;
+    toggleMute: () => void;
+    toggleCamera: () => void;
+};