ajaxter-chat 1.0.3 → 3.0.1

package/dist/components/ChatScreen/index.js

@@ -0,0 +1,168 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import { avatarColor, initials, formatTime, formatDate, generateTranscript, downloadText } from '../../utils/chat';
+import { EmojiPicker } from '../EmojiPicker';
+export const ChatScreen = ({ activeUser, messages, config, isPaused, isReported, isBlocked, onSend, onBack, onClose, onTogglePause, onReport, onBlock, onStartCall, }) => {
+    const [text, setText] = useState('');
+    const [showEmoji, setShowEmoji] = useState(false);
+    const [showMenu, setShowMenu] = useState(false);
+    const [isRecording, setIsRecording] = useState(false);
+    const [recordSec, setRecordSec] = useState(0);
+    const [showConfirm, setShowConfirm] = useState(null);
+    const endRef = useRef(null);
+    const inputRef = useRef(null);
+    const fileRef = useRef(null);
+    const recordTimer = useRef(null);
+    const mediaRecorder = useRef(null);
+    useEffect(() => { var _a; (_a = endRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'smooth' }); }, [messages]);
+    const handleSend = useCallback(() => {
+        var _a;
+        if (!text.trim() || isPaused || isBlocked)
+            return;
+        onSend(text.trim());
+        setText('');
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [text, isPaused, isBlocked, onSend]);
+    const handleKey = (e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            handleSend();
+        }
+    };
+    // Voice recording
+    const startRecording = async () => {
+        if (isPaused || isBlocked)
+            return;
+        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+        const mr = new MediaRecorder(stream);
+        mediaRecorder.current = mr;
+        const chunks = [];
+        mr.ondataavailable = e => chunks.push(e.data);
+        mr.onstop = () => {
+            stream.getTracks().forEach(t => t.stop());
+            // In production: upload blob, get URL, then send as voice message
+            onSend('[Voice Message]', 'voice', { voiceDuration: recordSec });
+            setRecordSec(0);
+        };
+        mr.start();
+        setIsRecording(true);
+        recordTimer.current = setInterval(() => setRecordSec(s => s + 1), 1000);
+    };
+    const stopRecording = () => {
+        var _a;
+        (_a = mediaRecorder.current) === null || _a === void 0 ? void 0 : _a.stop();
+        if (recordTimer.current)
+            clearInterval(recordTimer.current);
+        setIsRecording(false);
+    };
+    // Attachment
+    const handleFileChange = (e) => {
+        var _a;
+        const file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
+        if (!file || isPaused || isBlocked)
+            return;
+        onSend(`[Attachment: ${file.name}]`, 'attachment', {
+            attachmentName: file.name,
+            attachmentSize: `${(file.size / 1024).toFixed(1)} KB`,
+        });
+        e.target.value = '';
+    };
+    // Download transcript
+    const handleTranscript = () => {
+        const content = generateTranscript(messages, activeUser);
+        downloadText(content, `chat-${activeUser.name.replace(/\s+/g, '_')}-${Date.now()}.txt`);
+        setShowMenu(false);
+    };
+    // Confirm actions
+    const handleConfirm = (action) => {
+        setShowConfirm(null);
+        setShowMenu(false);
+        if (action === 'report')
+            onReport();
+        if (action === 'block')
+            onBlock();
+        if (action === 'pause')
+            onTogglePause();
+    };
+    const peerAvatar = avatarColor(activeUser.name);
+    const peerInit = initials(activeUser.name);
+    // Group messages by date
+    const grouped = groupByDate(messages);
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', height: '100%', animation: 'cw-slideIn 0.22s ease', position: 'relative' }, children: [_jsxs("div", { style: {
+                    background: `linear-gradient(135deg,${config.primaryColor},${config.primaryColor}cc)`,
+                    padding: '12px 14px', display: 'flex', alignItems: 'center', gap: 10, flexShrink: 0,
+                }, children: [_jsx("button", { onClick: onBack, style: hdrBtn, children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: [_jsx("line", { x1: "3", y1: "6", x2: "21", y2: "6", stroke: "#fff", strokeWidth: "2.2", strokeLinecap: "round" }), _jsx("line", { x1: "3", y1: "12", x2: "21", y2: "12", stroke: "#fff", strokeWidth: "2.2", strokeLinecap: "round" }), _jsx("line", { x1: "3", y1: "18", x2: "21", y2: "18", stroke: "#fff", strokeWidth: "2.2", strokeLinecap: "round" })] }) }), _jsxs("div", { style: { width: 36, height: 36, borderRadius: '50%', backgroundColor: peerAvatar, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontWeight: 700, fontSize: 13, flexShrink: 0, position: 'relative' }, children: [peerInit, _jsx("span", { style: { position: 'absolute', bottom: 0, right: 0, width: 9, height: 9, borderRadius: '50%', border: '2px solid', borderColor: 'transparent', backgroundColor: activeUser.status === 'online' ? '#22c55e' : activeUser.status === 'away' ? '#f59e0b' : '#9ca3af' } })] }), _jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [_jsx("div", { style: { fontWeight: 700, fontSize: 14, color: '#fff', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: activeUser.name }), _jsx("div", { style: { fontSize: 11, color: 'rgba(255,255,255,0.8)' }, children: activeUser.designation })] }), _jsx("span", { style: { fontSize: 14, fontWeight: 700, color: '#fff', opacity: 0.9 }, children: "Support" }), config.allowWebCall && (_jsx("button", { onClick: () => onStartCall(false), style: hdrBtn, title: "Voice Call", children: _jsx("svg", { width: "17", height: "17", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 10.8a19.79 19.79 0 01-3.07-8.68A2 2 0 012 0h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.09 7.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 14.92v2z", fill: "#fff" }) }) })), _jsx("button", { style: hdrBtn, title: "Fullscreen", children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M8 3H5a2 2 0 00-2 2v3M21 8V5a2 2 0 00-2-2h-3M3 16v3a2 2 0 002 2h3M16 21h3a2 2 0 002-2v-3", stroke: "#fff", strokeWidth: "2", strokeLinecap: "round" }) }) })] }), isPaused && (_jsxs("div", { style: { background: '#fef3c7', padding: '8px 16px', fontSize: 12, fontWeight: 600, color: '#92400e', textAlign: 'center', flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }, children: ["\u23F8 Chat is paused \u2014 users cannot send messages", _jsx("button", { onClick: onTogglePause, style: { background: '#92400e', color: '#fff', border: 'none', borderRadius: 6, padding: '2px 8px', fontSize: 11, cursor: 'pointer', marginLeft: 4 }, children: "Resume" })] })), isBlocked && (_jsx("div", { style: { background: '#fee2e2', padding: '8px 16px', fontSize: 12, fontWeight: 600, color: '#991b1b', textAlign: 'center', flexShrink: 0 }, children: "\uD83D\uDEAB This user is blocked" })), isReported && (_jsx("div", { style: { background: '#fef3c7', padding: '6px 16px', fontSize: 11, color: '#92400e', textAlign: 'center', flexShrink: 0 }, children: "\u26A0\uFE0F This chat has been reported" })), _jsx("div", { style: { padding: '14px 14px 0', flexShrink: 0 }, children: _jsxs("div", { style: {
+                        background: `linear-gradient(135deg, ${config.primaryColor}, ${config.primaryColor}cc)`,
+                        borderRadius: 12, padding: '14px 16px',
+                        display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer',
+                    }, children: [_jsx("div", { style: { width: 32, height: 32, borderRadius: '50%', background: 'rgba(255,255,255,0.25)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }, children: _jsx("span", { style: { fontSize: 16 }, children: "\u2753" }) }), _jsxs("div", { children: [_jsx("div", { style: { fontWeight: 700, fontSize: 14, color: '#fff' }, children: "Enter your details" }), _jsx("div", { style: { fontSize: 12, color: 'rgba(255,255,255,0.85)' }, children: "Click here to provide your information" })] })] }) }), _jsxs("div", { style: { flex: 1, overflowY: 'auto', padding: '14px', display: 'flex', flexDirection: 'column', gap: 10, background: '#f8f9fc' }, className: "cw-scroll", children: [grouped.map(({ date, msgs }) => (_jsxs(React.Fragment, { children: [_jsx(DateDivider, { label: date }), msgs.map(msg => (_jsx(Bubble, { msg: msg, peer: activeUser, primaryColor: config.primaryColor }, msg.id)))] }, date))), messages.length === 0 && (_jsxs("div", { style: { margin: 'auto', textAlign: 'center', color: '#c4cad4', fontSize: 13 }, children: [_jsx("div", { style: { fontSize: 28, marginBottom: 8 }, children: "\uD83D\uDCAC" }), "Say hello to ", activeUser.name, "!"] })), _jsx("div", { ref: endRef })] }), _jsxs("div", { style: { borderTop: '1px solid #eef0f5', padding: '10px 14px', background: '#fff', flexShrink: 0, position: 'relative' }, children: [showEmoji && config.allowEmoji && (_jsx(EmojiPicker, { primaryColor: config.primaryColor, onSelect: e => setText(t => t + e), onClose: () => setShowEmoji(false) })), isRecording && (_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8, padding: '6px 12px', background: '#fee2e2', borderRadius: 8 }, children: [_jsx("span", { style: { width: 8, height: 8, borderRadius: '50%', background: '#ef4444', display: 'inline-block', animation: 'cw-pulse 1s infinite' } }), _jsxs("span", { style: { fontSize: 13, color: '#991b1b', fontWeight: 600 }, children: ["Recording ", recordSec, "s"] }), _jsx("button", { onClick: stopRecording, style: { marginLeft: 'auto', background: '#ef4444', color: '#fff', border: 'none', borderRadius: 6, padding: '3px 10px', fontSize: 12, cursor: 'pointer' }, children: "Stop" })] })), _jsxs("div", { style: { display: 'flex', alignItems: 'flex-end', gap: 8 }, children: [_jsx("textarea", { ref: inputRef, value: text, onChange: e => setText(e.target.value), onKeyDown: handleKey, placeholder: isPaused || isBlocked ? 'Chat is unavailable' : 'Message...', disabled: isPaused || isBlocked || isRecording, rows: 1, style: {
+                                    flex: 1, resize: 'none', border: '1.5px solid #e5e7eb',
+                                    borderRadius: 22, padding: '9px 14px',
+                                    fontSize: 14, outline: 'none', lineHeight: 1.5,
+                                    maxHeight: 80, overflowY: 'auto', color: '#1a2332',
+                                    background: isPaused || isBlocked ? '#f9fafb' : '#fff',
+                                    transition: 'border-color 0.2s',
+                                    fontFamily: 'inherit',
+                                }, onFocus: e => (e.target.style.borderColor = config.primaryColor), onBlur: e => (e.target.style.borderColor = '#e5e7eb') }), config.allowEmoji && (_jsx(ActionBtn, { onClick: () => setShowEmoji(v => !v), title: "Emoji", children: _jsxs("svg", { width: "19", height: "19", viewBox: "0 0 24 24", fill: "none", children: [_jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "#9ca3af", strokeWidth: "1.8" }), _jsx("path", { d: "M8 14s1.5 2 4 2 4-2 4-2", stroke: "#9ca3af", strokeWidth: "1.8", strokeLinecap: "round" }), _jsx("circle", { cx: "9", cy: "9", r: "1", fill: "#9ca3af" }), _jsx("circle", { cx: "15", cy: "9", r: "1", fill: "#9ca3af" })] }) })), config.allowAttachment && (_jsxs(_Fragment, { children: [_jsx("input", { ref: fileRef, type: "file", style: { display: 'none' }, onChange: handleFileChange }), _jsx(ActionBtn, { onClick: () => { var _a; return (_a = fileRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, title: "Attach file", children: _jsx("svg", { width: "19", height: "19", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66L9.41 17.41a2 2 0 01-2.83-2.83l8.49-8.48", stroke: "#9ca3af", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] })), config.allowVoiceMessage && !isRecording && (_jsx(ActionBtn, { onClick: startRecording, title: "Voice message", children: _jsxs("svg", { width: "19", height: "19", viewBox: "0 0 24 24", fill: "none", children: [_jsx("path", { d: "M12 1a3 3 0 00-3 3v8a3 3 0 006 0V4a3 3 0 00-3-3z", stroke: "#9ca3af", strokeWidth: "1.8", strokeLinecap: "round" }), _jsx("path", { d: "M19 10v2a7 7 0 01-14 0v-2M12 19v4M8 23h8", stroke: "#9ca3af", strokeWidth: "1.8", strokeLinecap: "round" })] }) })), text.trim() && (_jsx("button", { onClick: handleSend, style: {
+                                    width: 36, height: 36, borderRadius: '50%', backgroundColor: config.primaryColor,
+                                    border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
+                                    transition: 'transform 0.15s',
+                                }, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M22 2L11 13M22 2L15 22L11 13L2 9L22 2Z", stroke: "#fff", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }))] })] }), _jsxs("div", { style: { position: 'absolute', top: 12, right: 52, zIndex: 50 }, children: [_jsx("button", { onClick: () => setShowMenu(v => !v), style: Object.assign(Object.assign({}, hdrBtn), { background: 'rgba(255,255,255,0.18)' }), title: "More options", children: _jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: [_jsx("circle", { cx: "12", cy: "5", r: "1.5", fill: "#fff" }), _jsx("circle", { cx: "12", cy: "12", r: "1.5", fill: "#fff" }), _jsx("circle", { cx: "12", cy: "19", r: "1.5", fill: "#fff" })] }) }), showMenu && (_jsxs("div", { style: {
+                            position: 'absolute', top: '100%', right: 0, marginTop: 4,
+                            background: '#fff', borderRadius: 12,
+                            boxShadow: '0 8px 30px rgba(0,0,0,0.16)',
+                            padding: '6px', minWidth: 200, zIndex: 200,
+                            animation: 'cw-fadeUp 0.18s ease',
+                        }, children: [config.allowTranscriptDownload && (_jsx(MenuItem, { icon: "\uD83D\uDCE5", label: "Download Transcript", onClick: handleTranscript })), _jsx(MenuItem, { icon: isPaused ? '▶️' : '⏸', label: isPaused ? 'Resume Chat' : 'Pause Chat', onClick: () => { setShowMenu(false); setShowConfirm('pause'); } }), config.allowReport && !isReported && (_jsx(MenuItem, { icon: "\u26A0\uFE0F", label: "Report Chat", onClick: () => { setShowMenu(false); setShowConfirm('report'); } })), config.allowBlock && activeUser.type === 'user' && !isBlocked && (_jsx(MenuItem, { icon: "\uD83D\uDEAB", label: "Block User", onClick: () => { setShowMenu(false); setShowConfirm('block'); }, danger: true })), _jsx("div", { style: { borderTop: '1px solid #f0f2f5', margin: '4px 0' } }), _jsx(MenuItem, { icon: "\u2715", label: "Close Chat", onClick: onClose })] }))] }), showConfirm && (_jsx("div", { style: {
+                    position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.45)',
+                    display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 300,
+                    borderRadius: 'inherit',
+                }, children: _jsxs("div", { style: { background: '#fff', borderRadius: 16, padding: '24px 20px', width: 280, boxShadow: '0 16px 48px rgba(0,0,0,0.22)', animation: 'cw-fadeUp 0.2s ease' }, children: [_jsxs("div", { style: { fontWeight: 800, fontSize: 16, color: '#1a2332', marginBottom: 8 }, children: [showConfirm === 'pause' && (isPaused ? 'Resume Chat?' : 'Pause Chat?'), showConfirm === 'report' && 'Report this chat?', showConfirm === 'block' && 'Block this user?'] }), _jsxs("p", { style: { fontSize: 13, color: '#7b8fa1', lineHeight: 1.6, margin: '0 0 18px' }, children: [showConfirm === 'pause' && (isPaused ? 'The user will be able to send messages again.' : 'The user will not be able to send new messages.'), showConfirm === 'report' && 'This chat will be flagged for review by the admin team.', showConfirm === 'block' && 'This user will be blocked and added to your block list. You can unblock them later.'] }), _jsxs("div", { style: { display: 'flex', gap: 10 }, children: [_jsx("button", { onClick: () => setShowConfirm(null), style: { flex: 1, padding: '9px', borderRadius: 10, border: '1.5px solid #e5e7eb', background: '#fff', cursor: 'pointer', fontSize: 13, fontWeight: 600, color: '#374151' }, children: "Cancel" }), _jsx("button", { onClick: () => handleConfirm(showConfirm), style: {
+                                        flex: 1, padding: '9px', borderRadius: 10, border: 'none',
+                                        background: showConfirm === 'block' ? '#ef4444' : config.primaryColor,
+                                        color: '#fff', cursor: 'pointer', fontSize: 13, fontWeight: 700,
+                                    }, children: "Confirm" })] })] }) }))] }));
+};
+// ── Sub-components ─────────────────────────────────────────────────────────────
+const Bubble = ({ msg, peer, primaryColor }) => {
+    var _a;
+    const isMe = msg.senderId === 'me';
+    const content = msg.type === 'voice' ? (_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8 }, children: [_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: [_jsx("path", { d: "M12 1a3 3 0 00-3 3v8a3 3 0 006 0V4a3 3 0 00-3-3z", stroke: isMe ? '#fff' : '#374151', strokeWidth: "2", strokeLinecap: "round" }), _jsx("path", { d: "M19 10v2a7 7 0 01-14 0v-2M12 19v4", stroke: isMe ? '#fff' : '#374151', strokeWidth: "2", strokeLinecap: "round" })] }), _jsxs("span", { children: ["Voice Message ", msg.voiceDuration ? `· ${msg.voiceDuration}s` : ''] })] })) : msg.type === 'attachment' ? (_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8 }, children: [_jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66L9.41 17.41a2 2 0 01-2.83-2.83l8.49-8.48", stroke: isMe ? '#fff' : '#374151', strokeWidth: "2", strokeLinecap: "round" }) }), _jsxs("div", { children: [_jsx("div", { style: { fontWeight: 600 }, children: (_a = msg.attachmentName) !== null && _a !== void 0 ? _a : 'File' }), msg.attachmentSize && _jsx("div", { style: { fontSize: 11, opacity: 0.75 }, children: msg.attachmentSize })] })] })) : _jsx("span", { children: msg.text });
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: isMe ? 'flex-end' : 'flex-start', gap: 3 }, children: [_jsx("div", { style: {
+                    maxWidth: '76%', padding: '10px 13px',
+                    borderRadius: isMe ? '18px 18px 4px 18px' : '18px 18px 18px 4px',
+                    backgroundColor: isMe ? primaryColor : '#fff',
+                    color: isMe ? '#fff' : '#1a2332',
+                    fontSize: 14, lineHeight: 1.5,
+                    boxShadow: '0 1px 4px rgba(0,0,0,0.07)',
+                    wordBreak: 'break-word',
+                }, children: content }), _jsx("span", { style: { fontSize: 11, color: '#b0bec5', padding: '0 4px' }, children: formatTime(msg.timestamp) })] }));
+};
+const DateDivider = ({ label }) => (_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 10, margin: '4px 0' }, children: [_jsx("div", { style: { flex: 1, height: 1, background: '#e5e7eb' } }), _jsx("span", { style: { fontSize: 11, fontWeight: 600, color: '#9ca3af', whiteSpace: 'nowrap' }, children: label }), _jsx("div", { style: { flex: 1, height: 1, background: '#e5e7eb' } })] }));
+const MenuItem = ({ icon, label, onClick, danger }) => (_jsxs("button", { onClick: onClick, style: {
+        display: 'flex', alignItems: 'center', gap: 10, width: '100%', padding: '9px 12px',
+        background: 'none', border: 'none', borderRadius: 8, cursor: 'pointer', textAlign: 'left',
+        fontSize: 13, fontWeight: 600, color: danger ? '#ef4444' : '#374151',
+        transition: 'background 0.12s',
+    }, onMouseEnter: e => e.currentTarget.style.background = danger ? '#fee2e2' : '#f3f4f6', onMouseLeave: e => e.currentTarget.style.background = 'none', children: [_jsx("span", { children: icon }), " ", label] }));
+const ActionBtn = ({ onClick, title, children }) => (_jsx("button", { onClick: onClick, title: title, style: {
+        background: 'none', border: 'none', cursor: 'pointer', padding: '7px',
+        borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
+        transition: 'background 0.13s',
+    }, onMouseEnter: e => e.currentTarget.style.background = '#f3f4f6', onMouseLeave: e => e.currentTarget.style.background = 'none', children: children }));
+const hdrBtn = {
+    background: 'rgba(255,255,255,0.2)', border: 'none', borderRadius: '50%',
+    width: 32, height: 32, display: 'flex', alignItems: 'center', justifyContent: 'center',
+    cursor: 'pointer', flexShrink: 0,
+};
+// Group messages by date
+function groupByDate(messages) {
+    const map = new Map();
+    messages.forEach(m => {
+        const d = formatDate(m.timestamp);
+        if (!map.has(d))
+            map.set(d, []);
+        map.get(d).push(m);
+    });
+    return Array.from(map.entries()).map(([date, msgs]) => ({ date, msgs }));
+}

package/dist/components/ChatWidget.d.ts

@@ -1,28 +1,4 @@
 import React from 'react';
 import { ChatWidgetProps } from '../types';
-/**
- * ChatWidget
- *
- * Drop-in chat widget for React.js and Next.js apps.
- * All behavior is configured via environment variables.
- * All UI styling is configured via the `theme` prop.
- *
- * @example
- * // Basic usage
- * <ChatWidget />
- *
- * @example
- * // With custom theme
- * <ChatWidget
- *   theme={{
- *     primaryColor: '#FF6B6B',
- *     buttonColor: '#FF6B6B',
- *     buttonLabel: 'Need Help?',
- *     buttonPosition: 'bottom-left',
- *     fontFamily: "'Inter', sans-serif",
- *     borderRadius: '12px',
- *   }}
- * />
- */
 export declare const ChatWidget: React.FC<ChatWidgetProps>;
 export default ChatWidget;

package/dist/components/ChatWidget.js

@@ -1,50 +1,235 @@
-'use client'; // Next.js App Router directive (ignored in React/Pages Router)
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect } from 'react';
-import { loadChatConfig } from '../config';
-import { ChatButton } from './ChatButton';
-import { ChatWindow } from './ChatWindow';
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useCallback } from 'react';
+import { loadLocalConfig } from '../config';
 import { mergeTheme } from '../utils/theme';
-/**
- * ChatWidget
- *
- * Drop-in chat widget for React.js and Next.js apps.
- * All behavior is configured via environment variables.
- * All UI styling is configured via the `theme` prop.
- *
- * @example
- * // Basic usage
- * <ChatWidget />
- *
- * @example
- * // With custom theme
- * <ChatWidget
- *   theme={{
- *     primaryColor: '#FF6B6B',
- *     buttonColor: '#FF6B6B',
- *     buttonLabel: 'Need Help?',
- *     buttonPosition: 'bottom-left',
- *     fontFamily: "'Inter', sans-serif",
- *     borderRadius: '12px',
- *   }}
- * />
- */
-export const ChatWidget = ({ theme }) => {
+import { useRemoteConfig } from '../hooks/useRemoteConfig';
+import { useChat } from '../hooks/useChat';
+import { useWebRTC } from '../hooks/useWebRTC';
+import { HomeScreen } from './HomeScreen';
+import { UserListScreen } from './UserListScreen';
+import { ChatScreen } from './ChatScreen';
+import { RecentChatsScreen } from './RecentChatsScreen';
+import { TicketScreen } from './TicketScreen';
+import { BlockListScreen } from './BlockList';
+import { CallScreen } from './CallScreen';
+import { MaintenanceView } from './MaintenanceView';
+import { BottomTabs } from './Tabs/BottomTabs';
+/* ─── Drawer width ─────────────────────────────────────────────────────────── */
+const DRAWER_W_NORMAL = 380;
+const DRAWER_W_MAX = 480;
+export const ChatWidget = ({ theme: localTheme }) => {
+    var _a, _b;
+    /* SSR guard */
+    const [mounted, setMounted] = useState(false);
+    useEffect(() => { setMounted(true); }, []);
+    /* Env config */
+    const { apiKey, widgetId } = loadLocalConfig();
+    /* Remote config */
+    const { data, loading: cfgLoading, error: cfgError } = useRemoteConfig(apiKey, widgetId);
+    /* Merged theme — remote config overrides defaults, local prop overrides both */
+    const theme = mergeTheme((data === null || data === void 0 ? void 0 : data.widget) ? { primaryColor: data.widget.primaryColor, buttonLabel: data.widget.buttonLabel, buttonPosition: data.widget.buttonPosition } : undefined, localTheme);
+    /* Drawer open state */
     const [isOpen, setIsOpen] = useState(false);
-    const [isMounted, setIsMounted] = useState(false);
-    // SSR Safety: Only render on the client
+    const [isMaximized, setIsMaximized] = useState(false);
+    const [closing, setClosing] = useState(false); // for slide-out animation
+    /* Navigation */
+    const [activeTab, setActiveTab] = useState('home');
+    const [screen, setScreen] = useState('home');
+    const [userListCtx, setUserListCtx] = useState('support');
+    /* App state */
+    const [tickets, setTickets] = useState((_a = data === null || data === void 0 ? void 0 : data.sampleTickets) !== null && _a !== void 0 ? _a : []);
+    const [recentChats, setRecentChats] = useState([]);
+    const [blockedUids, setBlockedUids] = useState((_b = data === null || data === void 0 ? void 0 : data.blockedUsers) !== null && _b !== void 0 ? _b : []);
+    /* Sync remote data into local state once loaded */
     useEffect(() => {
-        setIsMounted(true);
+        var _a, _b;
+        if (data) {
+            setTickets(data.sampleTickets);
+            setBlockedUids(data.blockedUsers);
+            // Seed recent chats from sample chats
+            const all = [...((_a = data.developers) !== null && _a !== void 0 ? _a : []), ...((_b = data.users) !== null && _b !== void 0 ? _b : [])];
+            const recents = Object.entries(data.sampleChats).map(([uid, msgs]) => {
+                const user = all.find(u => u.uid === uid);
+                if (!user || msgs.length === 0)
+                    return null;
+                const last = msgs[msgs.length - 1];
+                return {
+                    id: `rc_${uid}`,
+                    user,
+                    lastMessage: last.text,
+                    lastTime: last.timestamp,
+                    unread: Math.floor(Math.random() * 3),
+                    isPaused: false,
+                };
+            }).filter(Boolean);
+            setRecentChats(recents);
+        }
+    }, [data]);
+    /* Chat hook */
+    const { messages, activeUser, isPaused, isReported, selectUser, sendMessage, togglePause, reportChat, clearChat, setMessages, } = useChat();
+    /* WebRTC hook */
+    const { session: callSession, localVideoRef, remoteVideoRef, startCall, endCall, toggleMute, toggleCamera } = useWebRTC();
+    /* ── Drawer open/close with slide animation ───────────────────────────── */
+    const openDrawer = () => {
+        setClosing(false);
+        setIsOpen(true);
+    };
+    const closeDrawer = useCallback(() => {
+        setClosing(true);
+        setTimeout(() => {
+            setIsOpen(false);
+            setClosing(false);
+            setScreen('home');
+            setActiveTab('home');
+            clearChat();
+        }, 300);
+    }, [clearChat]);
+    /* ── Navigation ──────────────────────────────────────────────────────── */
+    const handleCardClick = useCallback((ctx) => {
+        if (ctx === 'ticket') {
+            setActiveTab('tickets');
+            setScreen('tickets');
+        }
+        else {
+            setUserListCtx(ctx);
+            setScreen('user-list');
+        }
     }, []);
-    // Load config from env (safe on both client and server)
-    const config = loadChatConfig();
-    const t = mergeTheme(theme);
-    // Don't render anything server-side
-    if (!isMounted)
-        return null;
-    // DISABLE: render nothing at all
-    if (config.status === 'DISABLE')
+    const handleSelectUser = useCallback((user) => {
+        var _a;
+        // Load history from sample chats if available
+        const history = (_a = data === null || data === void 0 ? void 0 : data.sampleChats[user.uid]) !== null && _a !== void 0 ? _a : [];
+        selectUser(user, history);
+        setScreen('chat');
+        // Update recent chats
+        setRecentChats(prev => {
+            const exists = prev.find(r => r.user.uid === user.uid);
+            if (exists)
+                return prev;
+            return [{ id: `rc_${user.uid}`, user, lastMessage: '', lastTime: new Date().toISOString(), unread: 0, isPaused: false }, ...prev];
+        });
+    }, [data, selectUser]);
+    const handleTabChange = useCallback((tab) => {
+        setActiveTab(tab);
+        setScreen(tab === 'home' ? 'home' : tab === 'chats' ? 'recent-chats' : 'tickets');
+    }, []);
+    /* ── Block/Unblock ───────────────────────────────────────────────────── */
+    const handleBlock = useCallback(() => {
+        if (!activeUser)
+            return;
+        setBlockedUids(prev => [...prev, activeUser.uid]);
+        clearChat();
+        setScreen('home');
+        setActiveTab('home');
+    }, [activeUser, clearChat]);
+    const handleUnblock = useCallback((uid) => {
+        setBlockedUids(prev => prev.filter(id => id !== uid));
+    }, []);
+    /* ── Tickets ─────────────────────────────────────────────────────────── */
+    const handleRaiseTicket = useCallback((title, desc, priority) => {
+        const t = {
+            id: `TKT-${String(Date.now()).slice(-4)}`,
+            title, description: desc, status: 'open', priority,
+            createdAt: new Date().toISOString(),
+            updatedAt: new Date().toISOString(),
+            assignedTo: null,
+        };
+        setTickets(prev => [t, ...prev]);
+    }, []);
+    /* ── Pause sync back into recent chats ──────────────────────────────── */
+    const handleTogglePause = useCallback(() => {
+        togglePause();
+        if (activeUser) {
+            setRecentChats(prev => prev.map(r => r.user.uid === activeUser.uid ? Object.assign(Object.assign({}, r), { isPaused: !isPaused }) : r));
+        }
+    }, [togglePause, activeUser, isPaused]);
+    /* ── Call ────────────────────────────────────────────────────────────── */
+    const handleStartCall = useCallback((withVideo) => {
+        if (!activeUser)
+            return;
+        startCall(activeUser, withVideo);
+        setScreen('call');
+    }, [activeUser, startCall]);
+    const handleEndCall = useCallback(() => {
+        endCall();
+        setScreen('chat');
+    }, [endCall]);
+    /* ── Derived ─────────────────────────────────────────────────────────── */
+    const isBlocked = activeUser ? blockedUids.includes(activeUser.uid) : false;
+    const drawerW = isMaximized ? DRAWER_W_MAX : DRAWER_W_NORMAL;
+    const widgetConfig = data === null || data === void 0 ? void 0 : data.widget;
+    const primaryColor = theme.primaryColor;
+    const allUsers = data ? [...data.developers, ...data.users] : [];
+    const filteredUsers = screen === 'user-list'
+        ? allUsers.filter(u => userListCtx === 'support' ? u.type === 'developer' : u.type === 'user')
+        : [];
+    const blockedUsers = allUsers.filter(u => blockedUids.includes(u.uid));
+    /* Position */
+    const posStyle = theme.buttonPosition === 'bottom-left'
+        ? { left: 24, right: 'auto' }
+        : { right: 24, left: 'auto' };
+    const drawerPosStyle = theme.buttonPosition === 'bottom-left'
+        ? { left: 0, borderRadius: '0 16px 16px 0' }
+        : { right: 0, borderRadius: '16px 0 0 16px' };
+    /* ── Don't render until mounted (SSR safe) ──────────────────────────── */
+    if (!mounted)
         return null;
-    return (_jsxs(_Fragment, { children: [isOpen && (_jsx(ChatWindow, { config: config, theme: theme, buttonPosition: t.buttonPosition, onClose: () => setIsOpen(false) })), _jsx(ChatButton, { isOpen: isOpen, onClick: () => setIsOpen((prev) => !prev), theme: theme })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("style", { children: `
+        @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap');
+
+        .cw-root * { box-sizing: border-box; font-family: 'DM Sans', 'Segoe UI', sans-serif; }
+
+        @keyframes cw-slideInRight  { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
+        @keyframes cw-slideOutRight { from { transform: translateX(0); opacity: 1; }    to { transform: translateX(100%); opacity: 0; } }
+        @keyframes cw-slideInLeft   { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
+        @keyframes cw-slideOutLeft  { from { transform: translateX(0); opacity: 1; }    to { transform: translateX(-100%); opacity: 0; } }
+        @keyframes cw-fadeUp  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
+        @keyframes cw-slideIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } }
+        @keyframes cw-pulse   { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
+        @keyframes cw-btnPop  { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
+
+        .cw-scroll::-webkit-scrollbar        { width: 4px; }
+        .cw-scroll::-webkit-scrollbar-track  { background: transparent; }
+        .cw-scroll::-webkit-scrollbar-thumb  { background: #e0e0e0; border-radius: 4px; }
+
+        .cw-drawer-enter { animation: ${theme.buttonPosition === 'bottom-left' ? 'cw-slideInLeft' : 'cw-slideInRight'} 0.32s cubic-bezier(0.22,1,0.36,1) both; }
+        .cw-drawer-exit  { animation: ${theme.buttonPosition === 'bottom-left' ? 'cw-slideOutLeft' : 'cw-slideOutRight'} 0.28s cubic-bezier(0.55,0,1,0.45) both; }
+      ` }), !isOpen && (_jsxs("button", { className: "cw-root", onClick: openDrawer, "aria-label": theme.buttonLabel, style: Object.assign(Object.assign({ position: 'fixed', bottom: 24, zIndex: 9999 }, posStyle), { display: 'flex', alignItems: 'center', gap: 10, padding: '13px 22px', backgroundColor: theme.buttonColor, color: theme.buttonTextColor, border: 'none', borderRadius: 50, cursor: 'pointer', fontSize: 15, fontWeight: 700, boxShadow: `0 8px 28px ${theme.buttonColor}55`, animation: 'cw-btnPop 0.4s cubic-bezier(0.34,1.56,0.64,1)', transition: 'transform 0.2s, box-shadow 0.2s' }), onMouseEnter: e => {
+                    e.currentTarget.style.transform = 'scale(1.06) translateY(-2px)';
+                    e.currentTarget.style.boxShadow = `0 14px 36px ${theme.buttonColor}66`;
+                }, onMouseLeave: e => {
+                    e.currentTarget.style.transform = 'scale(1)';
+                    e.currentTarget.style.boxShadow = `0 8px 28px ${theme.buttonColor}55`;
+                }, children: [_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: theme.buttonTextColor, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }), _jsx("span", { children: theme.buttonLabel })] })), isOpen && (_jsx("div", { onClick: closeDrawer, style: {
+                    position: 'fixed', inset: 0, zIndex: 9997,
+                    backgroundColor: 'rgba(0,0,0,0.35)',
+                    opacity: closing ? 0 : 1,
+                    transition: 'opacity 0.3s',
+                } })), isOpen && (_jsxs("div", { className: `cw-root ${closing ? 'cw-drawer-exit' : 'cw-drawer-enter'}`, style: Object.assign(Object.assign({ position: 'fixed', top: 0, bottom: 0 }, drawerPosStyle), { zIndex: 9998, width: drawerW, maxWidth: '100vw', backgroundColor: '#fff', boxShadow: theme.buttonPosition === 'bottom-left'
+                        ? '4px 0 40px rgba(0,0,0,0.18)'
+                        : '-4px 0 40px rgba(0,0,0,0.18)', display: 'flex', flexDirection: 'column', overflow: 'hidden', transition: 'width 0.28s ease' }), children: [cfgLoading && (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', gap: 16 }, children: [_jsx("div", { style: {
+                                    width: 40, height: 40, borderRadius: '50%',
+                                    border: `3px solid ${primaryColor}30`,
+                                    borderTopColor: primaryColor,
+                                    animation: 'spin 0.8s linear infinite',
+                                } }), _jsx("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` }), _jsx("p", { style: { fontSize: 14, color: '#7b8fa1' }, children: "Loading chat\u2026" })] })), cfgError && !cfgLoading && (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', gap: 12, padding: 32, textAlign: 'center' }, children: [_jsx("div", { style: { fontSize: 40 }, children: "\u26A0\uFE0F" }), _jsx("p", { style: { fontWeight: 700, color: '#1a2332' }, children: "Could not load chat configuration" }), _jsx("p", { style: { fontSize: 13, color: '#7b8fa1', lineHeight: 1.6 }, children: cfgError }), _jsx("button", { onClick: closeDrawer, style: { padding: '9px 20px', borderRadius: 10, border: 'none', background: primaryColor, color: '#fff', cursor: 'pointer', fontWeight: 700 }, children: "Close" })] })), !cfgLoading && !cfgError && widgetConfig && (_jsxs(_Fragment, { children: [screen !== 'chat' && screen !== 'call' && (_jsxs("div", { style: {
+                                    position: 'absolute', top: 12,
+                                    right: theme.buttonPosition === 'bottom-left' ? 'auto' : 12,
+                                    left: theme.buttonPosition === 'bottom-left' ? 12 : 'auto',
+                                    zIndex: 20, display: 'flex', gap: 6,
+                                }, children: [_jsx(CornerBtn, { onClick: () => setIsMaximized(m => !m), title: isMaximized ? 'Minimize' : 'Maximize', children: isMaximized
+                                            ? _jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M8 3v5H3M21 8h-5V3M3 16h5v5M16 21v-5h5", stroke: "#fff", strokeWidth: "2.2", strokeLinecap: "round" }) })
+                                            : _jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M8 3H5a2 2 0 00-2 2v3M21 8V5a2 2 0 00-2-2h-3M3 16v3a2 2 0 002 2h3M16 21h3a2 2 0 002-2v-3", stroke: "#fff", strokeWidth: "2.2", strokeLinecap: "round" }) }) }), _jsx(CornerBtn, { onClick: closeDrawer, title: "Close", children: _jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M18 6L6 18M6 6l12 12", stroke: "#fff", strokeWidth: "2.5", strokeLinecap: "round" }) }) })] })), widgetConfig.status === 'MAINTENANCE' && (_jsx(MaintenanceView, { primaryColor: primaryColor })), widgetConfig.status === 'DISABLE' && (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', padding: 32, textAlign: 'center', gap: 12 }, children: [_jsx("div", { style: { fontSize: 40 }, children: "\uD83D\uDD12" }), _jsx("p", { style: { fontWeight: 700, color: '#1a2332' }, children: "Chat is disabled" }), _jsx("button", { onClick: closeDrawer, style: { padding: '9px 20px', borderRadius: 10, border: 'none', background: primaryColor, color: '#fff', cursor: 'pointer', fontWeight: 700 }, children: "Close" })] })), widgetConfig.status === 'ACTIVE' && (_jsxs("div", { className: "cw-scroll", style: { flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }, children: [screen === 'home' && (_jsx(HomeScreen, { config: widgetConfig, onNavigate: handleCardClick })), screen === 'user-list' && (_jsx(UserListScreen, { context: userListCtx, users: filteredUsers, primaryColor: primaryColor, onBack: () => setScreen('home'), onSelectUser: handleSelectUser })), screen === 'chat' && activeUser && (_jsx(ChatScreen, { activeUser: activeUser, messages: messages, config: widgetConfig, isPaused: isPaused, isReported: isReported, isBlocked: isBlocked, onSend: sendMessage, onBack: () => { clearChat(); setScreen('home'); setActiveTab('home'); }, onClose: closeDrawer, onTogglePause: handleTogglePause, onReport: reportChat, onBlock: handleBlock, onStartCall: handleStartCall })), screen === 'call' && callSession.peer && (_jsx(CallScreen, { session: callSession, localVideoRef: localVideoRef, remoteVideoRef: remoteVideoRef, onEnd: handleEndCall, onToggleMute: toggleMute, onToggleCamera: toggleCamera, primaryColor: primaryColor })), screen === 'recent-chats' && (_jsx(RecentChatsScreen, { chats: recentChats, config: widgetConfig, onSelectChat: handleSelectUser })), screen === 'tickets' && (_jsx(TicketScreen, { tickets: tickets, config: widgetConfig, onRaiseTicket: handleRaiseTicket })), screen === 'block-list' && (_jsx(BlockListScreen, { blockedUsers: blockedUsers, config: widgetConfig, onUnblock: handleUnblock, onBack: () => { setScreen('home'); setActiveTab('home'); } }))] })), widgetConfig.status === 'ACTIVE' &&
+                                screen !== 'chat' &&
+                                screen !== 'call' &&
+                                screen !== 'user-list' &&
+                                screen !== 'block-list' && (_jsx(BottomTabs, { active: activeTab, onChange: handleTabChange, primaryColor: primaryColor, onBlockList: () => setScreen('block-list') }))] }))] }))] }));
 };
 export default ChatWidget;
+/* ── Tiny corner button ────────────────────────────────────────────────────── */
+const CornerBtn = ({ onClick, title, children }) => (_jsx("button", { onClick: onClick, title: title, style: {
+        width: 26, height: 26, borderRadius: '50%',
+        background: 'rgba(0,0,0,0.25)', border: 'none',
+        display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
+    }, children: children }));

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

@@ -0,0 +1,8 @@
+import React from 'react';
+interface EmojiPickerProps {
+    onSelect: (emoji: string) => void;
+    onClose: () => void;
+    primaryColor: string;
+}
+export declare const EmojiPicker: React.FC<EmojiPickerProps>;
+export {};

package/dist/components/EmojiPicker/index.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const EMOJIS = [
+    '😀', '😂', '😊', '😍', '🤔', '😎', '😢', '😡',
+    '👍', '👎', '👏', '🙏', '🎉', '❤️', '🔥', '✅',
+    '🚀', '💡', '⚠️', '🎫',
+];
+export const EmojiPicker = ({ onSelect, onClose, primaryColor }) => (_jsxs("div", { style: {
+        position: 'absolute', bottom: '100%', right: 0,
+        background: '#fff', borderRadius: 14,
+        boxShadow: '0 8px 32px rgba(0,0,0,0.18)',
+        padding: '12px', zIndex: 100,
+        animation: 'cw-fadeUp 0.18s ease',
+        marginBottom: 8,
+    }, children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }, children: [_jsx("span", { style: { fontSize: 11, fontWeight: 700, color: '#7b8fa1', textTransform: 'uppercase', letterSpacing: '0.06em' }, children: "Emojis" }), _jsx("button", { onClick: onClose, style: { background: 'none', border: 'none', cursor: 'pointer', padding: 2, color: '#7b8fa1', fontSize: 14 }, children: "\u2715" })] }), _jsx("div", { style: { display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 4, width: 200 }, children: EMOJIS.map(e => (_jsx("button", { onClick: () => { onSelect(e); onClose(); }, style: {
+                    background: 'none', border: 'none', cursor: 'pointer',
+                    fontSize: 22, padding: '6px', borderRadius: 8,
+                    transition: 'background 0.12s',
+                }, onMouseEnter: el => el.currentTarget.style.background = `${primaryColor}15`, onMouseLeave: el => el.currentTarget.style.background = 'none', children: e }, e))) })] }));

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

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

package/dist/components/HomeScreen/index.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const HomeScreen = ({ config, onNavigate }) => {
+    const showSupport = config.chatType === 'SUPPORT' || config.chatType === 'BOTH';
+    const showChat = config.chatType === 'CHAT' || config.chatType === 'BOTH';
+    const cards = [
+        showSupport && {
+            key: 'support',
+            icon: '🛠',
+            title: 'Need Support',
+            subtitle: 'We typically reply in a few minutes',
+            onClick: () => onNavigate('support'),
+        },
+        showChat && {
+            key: 'conversation',
+            icon: '💬',
+            title: 'New Conversation',
+            subtitle: 'With your colleague',
+            onClick: () => onNavigate('conversation'),
+        },
+        {
+            key: 'ticket',
+            icon: '🎫',
+            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: {
+                    background: `linear-gradient(145deg, ${config.primaryColor}, ${config.primaryColor}dd)`,
+                    padding: '36px 24px 52px',
+                    flexShrink: 0,
+                    position: 'relative',
+                    overflow: 'hidden',
+                }, children: [_jsx("div", { style: { position: 'absolute', top: -40, right: -40, width: 140, height: 140, borderRadius: '50%', background: 'rgba(255,255,255,0.07)' } }), _jsx("div", { style: { position: 'absolute', bottom: -20, left: -20, width: 90, height: 90, borderRadius: '50%', background: 'rgba(255,255,255,0.05)' } }), _jsx("h1", { style: { margin: '0 0 8px', fontSize: 26, fontWeight: 800, color: '#fff', letterSpacing: '-0.03em' }, children: config.welcomeTitle }), _jsx("p", { style: { margin: 0, fontSize: 14, color: 'rgba(255,255,255,0.85)', lineHeight: 1.6 }, children: config.welcomeSubtitle })] }), _jsx("div", { style: { flex: 1, overflowY: 'auto', padding: '0 16px 20px', marginTop: -28, display: 'flex', flexDirection: 'column', gap: 10 }, children: cards.map((card, i) => (_jsxs("button", { onClick: card.onClick, style: {
+                        width: '100%', background: '#fff', border: 'none', borderRadius: 14,
+                        padding: '18px 20px', display: 'flex', alignItems: 'center',
+                        justifyContent: 'space-between', cursor: 'pointer', textAlign: 'left',
+                        boxShadow: '0 2px 14px rgba(0,0,0,0.10)',
+                        animation: `cw-fadeUp 0.35s ease both`,
+                        animationDelay: `${i * 0.08}s`,
+                        transition: 'transform 0.15s, box-shadow 0.15s',
+                    }, onMouseEnter: e => {
+                        e.currentTarget.style.transform = 'translateY(-2px)';
+                        e.currentTarget.style.boxShadow = '0 8px 24px rgba(0,0,0,0.14)';
+                    }, onMouseLeave: e => {
+                        e.currentTarget.style.transform = 'translateY(0)';
+                        e.currentTarget.style.boxShadow = '0 2px 14px rgba(0,0,0,0.10)';
+                    }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 14 }, children: [_jsx("div", { style: {
+                                        width: 44, height: 44, borderRadius: 12,
+                                        backgroundColor: `${config.primaryColor}14`,
+                                        display: 'flex', alignItems: 'center', justifyContent: 'center',
+                                        fontSize: 20, flexShrink: 0,
+                                    }, children: card.icon }), _jsxs("div", { children: [_jsx("div", { style: { fontWeight: 700, fontSize: 15, color: '#1a2332', marginBottom: 2 }, children: card.title }), _jsx("div", { style: { fontSize: 12, color: '#7b8fa1' }, children: card.subtitle })] })] }), _jsx(SendArrow, { color: config.primaryColor })] }, card.key))) })] }));
+};
+const SendArrow = ({ color }) => (_jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: _jsx("path", { d: "M5 12h14M12 5l7 7-7 7", stroke: color, strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round" }) }));

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

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