@reechdesk/react 1.0.0

package/dist/index.mjs

@@ -0,0 +1,760 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { createContext, useContext, useState, useEffect, useRef, useCallback } from 'react';
+import PusherJS from 'pusher-js';
+
+const HelpdeskContext = createContext(null);
+function useHelpdesk() {
+    const ctx = useContext(HelpdeskContext);
+    if (!ctx)
+        throw new Error('useHelpdesk must be used within HelpdeskProvider');
+    return ctx;
+}
+const DEFAULT_API_URL = 'https://api.reechdesk.com';
+const DEFAULT_BRANDING = {
+    entityName: 'Support',
+    logoUrl: null,
+    primaryColor: '#f26522',
+    greeting: 'Hi! How can we help you today?',
+    position: 'bottom-right',
+    borderRadius: 12,
+    poweredBy: true,
+    soundEnabled: true,
+};
+function HelpdeskProvider({ entityId, apiUrl, user, pusherKey, children, }) {
+    const [sessionId, setSessionId] = useState(null);
+    useEffect(() => {
+        const params = new URLSearchParams(window.location.search);
+        if (params.get('chat') === 'resume' && params.get('id')) {
+            setSessionId(params.get('id'));
+        }
+    }, []);
+    const [pusher, setPusher] = useState(null);
+    const [resolvedApiUrl] = useState(apiUrl || DEFAULT_API_URL);
+    const [branding, setBranding] = useState(DEFAULT_BRANDING);
+    useEffect(() => {
+        if (!resolvedApiUrl)
+            return;
+        fetch(`${resolvedApiUrl}/api/chat/pusher-config?entityId=${entityId}`)
+            .then((r) => r.json())
+            .then((data) => {
+            var _a, _b, _c;
+            if (data.pusherKey && !pusherKey) {
+                const client = new PusherJS(data.pusherKey, { cluster: 'us2' });
+                setPusher(client);
+            }
+            if (data.entityName) {
+                setBranding({
+                    entityName: data.entityName,
+                    logoUrl: data.logoUrl || null,
+                    primaryColor: data.primaryColor || '#f26522',
+                    greeting: data.greeting || 'Hi! How can we help you today?',
+                    position: data.position || 'bottom-right',
+                    borderRadius: (_a = data.borderRadius) !== null && _a !== void 0 ? _a : 12,
+                    poweredBy: (_b = data.poweredBy) !== null && _b !== void 0 ? _b : true,
+                    soundEnabled: (_c = data.soundEnabled) !== null && _c !== void 0 ? _c : true,
+                });
+            }
+        })
+            .catch(() => { });
+    }, [pusherKey, resolvedApiUrl, entityId]);
+    useEffect(() => {
+        if (pusherKey) {
+            const client = new PusherJS(pusherKey, { cluster: 'us2' });
+            setPusher(client);
+            return () => client.disconnect();
+        }
+    }, [pusherKey]);
+    return (jsx(HelpdeskContext.Provider, { value: { entityId, apiUrl: resolvedApiUrl, user, sessionId, setSessionId, pusher, branding }, children: children }));
+}
+
+function ChatIcon({ size = 24 }) {
+    return (jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "currentColor", children: jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) }));
+}
+function CloseIcon({ size = 20 }) {
+    return (jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }));
+}
+function UserIcon() {
+    return (jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "#9c948a", children: jsx("path", { d: "M12 12c2.7 0 5-2.3 5-5s-2.3-5-5-5-5 2.3-5 5 2.3 5 5 5zm0 2c-3.3 0-10 1.7-10 5v2h20v-2c0-3.3-6.7-5-10-5z" }) }));
+}
+function MailIcon() {
+    return (jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "#9c948a", children: jsx("path", { d: "M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z" }) }));
+}
+function SendIcon() {
+    return (jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsx("line", { x1: "22", y1: "2", x2: "11", y2: "13" }), jsx("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })] }));
+}
+function PaperclipIcon() {
+    return (jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "#9c948a", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: jsx("path", { d: "m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48" }) }));
+}
+function ReechdeskLogo() {
+    return (jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", children: [jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "4", fill: "#f26522" }), jsx("path", { d: "M8 8h8v2H8zM8 12h6v2H8z", fill: "#fff" })] }));
+}
+const REECHDESK_LOGO = 'data:image/svg+xml,' + encodeURIComponent('<svg width="28" height="28" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="2" width="20" height="20" rx="4" fill="#f26522"/><path d="M8 8h8v2H8zM8 12h6v2H8z" fill="#fff"/></svg>');
+function ChatWidget({ position, primaryColor, greeting, entityName, logoUrl, borderRadius, inputBorderRadius = 4, poweredBy, soundEnabled, }) {
+    const { entityId, apiUrl, user, sessionId, setSessionId, pusher, branding } = useHelpdesk();
+    const color = primaryColor || branding.primaryColor;
+    const name = entityName || branding.entityName;
+    const logo = logoUrl || branding.logoUrl || REECHDESK_LOGO;
+    const pos = position || branding.position;
+    const rad = borderRadius !== null && borderRadius !== void 0 ? borderRadius : branding.borderRadius;
+    const greet = greeting || branding.greeting;
+    const showPoweredBy = poweredBy !== null && poweredBy !== void 0 ? poweredBy : branding.poweredBy;
+    const showSound = soundEnabled !== null && soundEnabled !== void 0 ? soundEnabled : branding.soundEnabled;
+    const [open, setOpen] = useState(false);
+    const [messages, setMessages] = useState([]);
+    const [input, setInput] = useState('');
+    const [visitorName, setVisitorName] = useState((user === null || user === void 0 ? void 0 : user.name) || '');
+    const [visitorEmail, setVisitorEmail] = useState((user === null || user === void 0 ? void 0 : user.email) || '');
+    const [started, setStarted] = useState(false);
+    const [sending, setSending] = useState(false);
+    const [pendingFiles, setPendingFiles] = useState([]);
+    const [agents, setAgents] = useState([]);
+    const [agentsOnline, setAgentsOnline] = useState(false);
+    const messagesEnd = useRef(null);
+    const fileInputRef = useRef(null);
+    const nameInputRef = useRef(null);
+    const visitorIdRef = useRef('');
+    useEffect(() => {
+        let stored = sessionStorage.getItem('rd_visitor_id');
+        if (!stored) {
+            stored = `v-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+            sessionStorage.setItem('rd_visitor_id', stored);
+        }
+        visitorIdRef.current = stored;
+    }, []);
+    function playChime() {
+        if (!showSound || typeof window === 'undefined')
+            return;
+        try {
+            const AudioContextClass = window.AudioContext || window.webkitAudioContext;
+            if (!AudioContextClass)
+                return;
+            const ctx = new AudioContextClass();
+            const osc = ctx.createOscillator();
+            const gain = ctx.createGain();
+            osc.connect(gain);
+            gain.connect(ctx.destination);
+            osc.type = 'sine';
+            osc.frequency.setValueAtTime(880, ctx.currentTime);
+            osc.frequency.setValueAtTime(1100, ctx.currentTime + 0.08);
+            gain.gain.setValueAtTime(0.3, ctx.currentTime);
+            gain.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.3);
+            osc.start(ctx.currentTime);
+            osc.stop(ctx.currentTime + 0.3);
+        }
+        catch (_a) {
+            // AudioContext not available
+        }
+    }
+    useEffect(() => {
+        if (!apiUrl || !entityId)
+            return;
+        const vid = visitorIdRef.current;
+        if (!vid)
+            return;
+        const ping = () => {
+            fetch(`${apiUrl}/api/chat/presence`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ entityId, visitorId: vid, visitorName: visitorName || 'Anonymous Visitor' }),
+            }).catch(() => { });
+        };
+        ping();
+        const interval = setInterval(ping, 15000);
+        const handleBeforeUnload = () => {
+            try {
+                const blob = new Blob([JSON.stringify({ entityId, visitorId: vid })], { type: 'application/json' });
+                navigator.sendBeacon(`${apiUrl}/api/chat/presence`, blob);
+            }
+            catch (_a) {
+                // ignore
+            }
+        };
+        window.addEventListener('beforeunload', handleBeforeUnload);
+        return () => {
+            clearInterval(interval);
+            window.removeEventListener('beforeunload', handleBeforeUnload);
+            ping();
+        };
+    }, [apiUrl, entityId, visitorName]);
+    // Fetch agent presence when widget opens
+    useEffect(() => {
+        if (!apiUrl || !entityId || !open)
+            return;
+        const fetchAgentPresence = () => {
+            fetch(`${apiUrl}/api/chat/agent-presence?entityId=${entityId}`)
+                .then((r) => r.json())
+                .then((data) => {
+                if (Array.isArray(data)) {
+                    setAgents(data);
+                    setAgentsOnline(data.length > 0);
+                }
+            })
+                .catch(() => { });
+        };
+        fetchAgentPresence();
+        const interval = setInterval(fetchAgentPresence, 20000);
+        return () => clearInterval(interval);
+    }, [apiUrl, entityId, open]);
+    // Resume chat from email link - load existing messages
+    useEffect(() => {
+        if (!sessionId || started || !apiUrl)
+            return;
+        fetch(`${apiUrl}/api/chat/sessions/${sessionId}`)
+            .then((r) => r.json())
+            .then((msgs) => {
+            if (Array.isArray(msgs) && msgs.length > 0) {
+                setMessages(msgs.map((m) => ({
+                    id: m.id,
+                    senderType: m.senderType,
+                    body: m.body,
+                    createdAt: m.createdAt,
+                    senderId: m.senderId,
+                    senderName: m.senderName,
+                    senderAvatar: m.senderAvatar,
+                    attachments: m.attachments,
+                })));
+                setStarted(true);
+                setOpen(true);
+            }
+        })
+            .catch(() => { });
+    }, [sessionId, started, apiUrl]);
+    useEffect(() => {
+        var _a;
+        (_a = messagesEnd.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'smooth' });
+    }, [messages]);
+    useEffect(() => {
+        if (open && !started) {
+            setTimeout(() => { var _a; return (_a = nameInputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, 100);
+        }
+    }, [open, started]);
+    useEffect(() => {
+        if (sessionId && pusher) {
+            const channel = pusher.subscribe(`chat.${sessionId}`);
+            channel.bind('chat:message', (msg) => {
+                setMessages((prev) => [...prev, msg]);
+                if (msg.senderType !== 'visitor') {
+                    playChime();
+                }
+            });
+            return () => {
+                pusher.unsubscribe(`chat.${sessionId}`);
+            };
+        }
+    }, [sessionId, pusher]);
+    const startChat = async () => {
+        if (!visitorName || !visitorEmail)
+            return;
+        try {
+            const res = await fetch(`${apiUrl}/api/chat/sessions`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    entityId,
+                    visitorId: (user === null || user === void 0 ? void 0 : user.id) || `anon-${Date.now()}`,
+                    visitorName,
+                    visitorEmail,
+                }),
+            });
+            const data = await res.json();
+            setSessionId(data.sessionId);
+            setStarted(true);
+            const personalizedGreeting = greet
+                .replace('{name}', visitorName)
+                .replace('{Name}', visitorName.charAt(0).toUpperCase() + visitorName.slice(1));
+            setMessages([{
+                    id: 'greeting',
+                    senderType: 'bot',
+                    body: personalizedGreeting,
+                    createdAt: new Date().toISOString(),
+                }]);
+        }
+        catch (err) {
+            console.error('Failed to start chat', err);
+        }
+    };
+    const sendMessage = async () => {
+        if ((!input.trim() && pendingFiles.length === 0) || !sessionId)
+            return;
+        setSending(true);
+        const msgBody = input;
+        setInput('');
+        const filesToSend = [...pendingFiles];
+        setPendingFiles([]);
+        setMessages((prev) => [...prev, {
+                id: `temp-${Date.now()}`,
+                senderType: 'visitor',
+                body: msgBody,
+                createdAt: new Date().toISOString(),
+                attachments: filesToSend.map((f, i) => (Object.assign(Object.assign({}, f), { id: `temp-att-${i}` }))),
+            }]);
+        try {
+            await fetch(`${apiUrl}/api/chat/sessions/${sessionId}`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    body: msgBody || '(attachment)',
+                    senderType: 'visitor',
+                    senderId: user === null || user === void 0 ? void 0 : user.id,
+                    attachments: filesToSend,
+                }),
+            });
+            // If no agents online, show offline acknowledgment
+            if (!agentsOnline) {
+                setTimeout(() => {
+                    setMessages((prev) => [...prev, {
+                            id: `offline-ack-${Date.now()}`,
+                            senderType: 'bot',
+                            body: `Thanks ${visitorName}! Our team is currently offline. We've received your message and will get back to you at ${visitorEmail} as soon as someone is available.`,
+                            createdAt: new Date().toISOString(),
+                        }]);
+                }, 800);
+            }
+        }
+        catch (err) {
+            console.error('Failed to send message', err);
+        }
+        finally {
+            setSending(false);
+        }
+    };
+    const handleFileSelect = async (e) => {
+        const files = e.target.files;
+        if (!files)
+            return;
+        for (const file of Array.from(files)) {
+            if (file.size > 5 * 1024 * 1024) {
+                alert(`${file.name} exceeds 5MB limit`);
+                continue;
+            }
+            const reader = new FileReader();
+            const dataUrl = await new Promise((resolve) => {
+                reader.onload = () => resolve(reader.result);
+                reader.readAsDataURL(file);
+            });
+            setPendingFiles((prev) => [...prev, {
+                    fileName: file.name,
+                    fileUrl: dataUrl,
+                    fileSize: file.size,
+                    mimeType: file.type,
+                }]);
+        }
+        if (fileInputRef.current)
+            fileInputRef.current.value = '';
+    };
+    const handlePaste = async (e) => {
+        const items = Array.from(e.clipboardData.items);
+        for (const item of items) {
+            if (item.kind === 'file') {
+                e.preventDefault();
+                const file = item.getAsFile();
+                if (!file)
+                    continue;
+                if (file.size > 5 * 1024 * 1024) {
+                    alert(`${file.name || 'File'} exceeds 5MB limit`);
+                    continue;
+                }
+                const reader = new FileReader();
+                const dataUrl = await new Promise((resolve) => {
+                    reader.onload = () => resolve(reader.result);
+                    reader.readAsDataURL(file);
+                });
+                setPendingFiles((prev) => [...prev, {
+                        fileName: file.name || `pasted-${Date.now()}`,
+                        fileUrl: dataUrl,
+                        fileSize: file.size,
+                        mimeType: file.type,
+                    }]);
+            }
+        }
+    };
+    const positionStyle = pos === 'bottom-left'
+        ? { left: '20px', bottom: '20px' }
+        : { right: '20px', bottom: '20px' };
+    const chatPositionStyle = pos === 'bottom-left'
+        ? { left: '20px', bottom: '80px' }
+        : { right: '20px', bottom: '80px' };
+    return (jsxs(Fragment, { children: [jsx("button", { onClick: () => setOpen(!open), style: Object.assign(Object.assign({}, positionStyle), { position: 'fixed', width: '56px', height: '56px', borderRadius: '50%', backgroundColor: color, color: '#fff', border: 'none', cursor: 'pointer', boxShadow: `0 4px 16px ${color}44`, zIndex: 9999, display: 'flex', alignItems: 'center', justifyContent: 'center', transition: 'transform 0.2s, box-shadow 0.2s' }), onMouseEnter: (e) => {
+                    e.currentTarget.style.transform = 'scale(1.08)';
+                    e.currentTarget.style.boxShadow = `0 6px 24px ${color}66`;
+                }, onMouseLeave: (e) => {
+                    e.currentTarget.style.transform = 'scale(1)';
+                    e.currentTarget.style.boxShadow = `0 4px 16px ${color}44`;
+                }, "aria-label": "Open chat", children: open ? (jsx(CloseIcon, { size: 22 })) : (jsx("img", { src: logo, alt: name, style: { width: '28px', height: '28px', borderRadius: '6px', objectFit: 'cover' } })) }), open && (jsxs("div", { style: Object.assign(Object.assign({}, chatPositionStyle), { position: 'fixed', width: 'min(380px, calc(100vw - 32px))', height: 'min(520px, calc(100vh - 100px))', backgroundColor: '#fff', borderRadius: `${rad}px`, boxShadow: '0 12px 48px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08)', zIndex: 10000, display: 'flex', flexDirection: 'column', overflow: 'hidden', fontFamily: '-apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif' }), children: [jsxs("div", { style: {
+                            background: `linear-gradient(135deg, ${color} 0%, ${color}dd 100%)`,
+                            padding: '18px 20px 16px',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'space-between',
+                            position: 'relative',
+                        }, children: [jsxs("div", { style: { minWidth: 0, flex: 1 }, children: [jsx("div", { style: {
+                                            color: '#fff',
+                                            fontSize: '15px',
+                                            fontWeight: 700,
+                                            lineHeight: 1.2,
+                                            letterSpacing: '-0.01em',
+                                        }, children: name }), jsx("div", { style: {
+                                            color: 'rgba(255,255,255,0.85)',
+                                            fontSize: '12px',
+                                            marginTop: '3px',
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            gap: '6px',
+                                        }, children: !started ? ('Start a conversation') : agentsOnline ? (jsxs(Fragment, { children: [jsx("span", { style: {
+                                                        width: '7px',
+                                                        height: '7px',
+                                                        borderRadius: '50%',
+                                                        backgroundColor: '#4ade80',
+                                                        boxShadow: '0 0 6px rgba(74, 222, 128, 0.6)',
+                                                    } }), jsxs("span", { children: [agents.length, " agent", agents.length > 1 ? 's' : '', " online"] }), jsxs("span", { style: { display: 'flex', marginLeft: '4px' }, children: [agents.slice(0, 3).map((agent, i) => (jsx("span", { style: {
+                                                                width: '20px',
+                                                                height: '20px',
+                                                                borderRadius: '50%',
+                                                                backgroundColor: agent.avatarUrl ? 'transparent' : 'rgba(255,255,255,0.3)',
+                                                                border: '1.5px solid rgba(255,255,255,0.8)',
+                                                                marginLeft: i > 0 ? '-6px' : '0',
+                                                                display: 'flex',
+                                                                alignItems: 'center',
+                                                                justifyContent: 'center',
+                                                                fontSize: '8px',
+                                                                fontWeight: 600,
+                                                                color: '#fff',
+                                                                overflow: 'hidden',
+                                                            }, children: agent.avatarUrl ? (jsx("img", { src: agent.avatarUrl, alt: "", style: { width: '100%', height: '100%', objectFit: 'cover' } })) : (agent.name.charAt(0).toUpperCase()) }, agent.userId))), agents.length > 3 && (jsxs("span", { style: {
+                                                                width: '20px',
+                                                                height: '20px',
+                                                                borderRadius: '50%',
+                                                                backgroundColor: 'rgba(255,255,255,0.2)',
+                                                                border: '1.5px solid rgba(255,255,255,0.6)',
+                                                                marginLeft: '-6px',
+                                                                display: 'flex',
+                                                                alignItems: 'center',
+                                                                justifyContent: 'center',
+                                                                fontSize: '7px',
+                                                                fontWeight: 600,
+                                                                color: '#fff',
+                                                            }, children: ["+", agents.length - 3] }))] })] })) : (jsx("span", { style: { color: 'rgba(255,255,255,0.65)' }, children: "Leave a message - we'll respond via email" })) })] }), jsx("button", { onClick: () => setOpen(false), style: {
+                                    background: 'rgba(255,255,255,0.15)',
+                                    border: 'none',
+                                    borderRadius: '50%',
+                                    width: '32px',
+                                    height: '32px',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    cursor: 'pointer',
+                                    color: '#fff',
+                                    flexShrink: 0,
+                                    transition: 'background 0.15s',
+                                }, onMouseEnter: (e) => { e.currentTarget.style.background = 'rgba(255,255,255,0.28)'; }, onMouseLeave: (e) => { e.currentTarget.style.background = 'rgba(255,255,255,0.15)'; }, "aria-label": "Close chat", children: jsx(CloseIcon, { size: 16 }) })] }), jsx("div", { style: { flex: 1, overflowY: 'auto', backgroundColor: '#faf9f7' }, children: !started ? (
+                        /* Pre-chat form */
+                        jsxs("div", { style: { padding: '24px 20px 16px' }, children: [agentsOnline && agents.length > 0 && (jsxs("div", { style: {
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        gap: '10px',
+                                        marginBottom: '16px',
+                                        padding: '10px 12px',
+                                        backgroundColor: '#f0fdf4',
+                                        borderRadius: '8px',
+                                        border: '1px solid #bbf7d0',
+                                    }, children: [jsx("div", { style: { display: 'flex' }, children: agents.slice(0, 4).map((agent, i) => (jsx("span", { style: {
+                                                    width: '28px',
+                                                    height: '28px',
+                                                    borderRadius: '50%',
+                                                    backgroundColor: agent.avatarUrl ? 'transparent' : '#16a34a',
+                                                    border: '2px solid #fff',
+                                                    marginLeft: i > 0 ? '-8px' : '0',
+                                                    display: 'flex',
+                                                    alignItems: 'center',
+                                                    justifyContent: 'center',
+                                                    fontSize: '10px',
+                                                    fontWeight: 600,
+                                                    color: '#fff',
+                                                    overflow: 'hidden',
+                                                }, children: agent.avatarUrl ? (jsx("img", { src: agent.avatarUrl, alt: "", style: { width: '100%', height: '100%', objectFit: 'cover' } })) : (agent.name.charAt(0).toUpperCase()) }, agent.userId))) }), jsxs("div", { children: [jsx("p", { style: { margin: 0, fontSize: '12px', fontWeight: 600, color: '#16a34a' }, children: "Our team is online" }), jsxs("p", { style: { margin: 0, fontSize: '11px', color: '#15803d' }, children: [agents.length, " agent", agents.length > 1 ? 's' : '', " ready to help"] })] })] })), jsx("p", { style: {
+                                        margin: '0 0 6px',
+                                        color: '#1a1410',
+                                        fontSize: '14px',
+                                        fontWeight: 600,
+                                    }, children: "Start a conversation" }), jsx("p", { style: {
+                                        margin: '0 0 16px',
+                                        color: '#9c948a',
+                                        fontSize: '12px',
+                                        lineHeight: 1.4,
+                                    }, children: "Tell us a bit about yourself and we'll connect you with the right person." }), jsxs("div", { style: { position: 'relative', marginBottom: '10px' }, children: [jsx("div", { style: {
+                                                position: 'absolute',
+                                                left: '12px',
+                                                top: '50%',
+                                                transform: 'translateY(-50%)',
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                pointerEvents: 'none',
+                                            }, children: jsx(UserIcon, {}) }), jsx("input", { ref: nameInputRef, type: "text", placeholder: "Your name", value: visitorName, onChange: (e) => setVisitorName(e.target.value), onKeyDown: (e) => { var _a; return e.key === 'Enter' && ((_a = document.querySelector('[data-chat-email]')) === null || _a === void 0 ? void 0 : _a.focus()); }, style: {
+                                                width: '100%',
+                                                padding: '11px 12px 11px 38px',
+                                                border: '1px solid #e0dcd8',
+                                                borderRadius: `${inputBorderRadius}px`,
+                                                fontSize: '14px',
+                                                boxSizing: 'border-box',
+                                                outline: 'none',
+                                                backgroundColor: '#fff',
+                                                color: '#1a1410',
+                                                transition: 'border-color 0.15s',
+                                            }, onFocus: (e) => { e.currentTarget.style.borderColor = color; }, onBlur: (e) => { e.currentTarget.style.borderColor = '#e0dcd8'; } })] }), jsxs("div", { style: { position: 'relative', marginBottom: '6px' }, children: [jsx("div", { style: {
+                                                position: 'absolute',
+                                                left: '12px',
+                                                top: '50%',
+                                                transform: 'translateY(-50%)',
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                pointerEvents: 'none',
+                                            }, children: jsx(MailIcon, {}) }), jsx("input", { "data-chat-email": true, type: "email", placeholder: "Email address", value: visitorEmail, onChange: (e) => setVisitorEmail(e.target.value), onKeyDown: (e) => e.key === 'Enter' && startChat(), style: {
+                                                width: '100%',
+                                                padding: '11px 12px 11px 38px',
+                                                border: '1px solid #e0dcd8',
+                                                borderRadius: `${inputBorderRadius}px`,
+                                                fontSize: '14px',
+                                                boxSizing: 'border-box',
+                                                outline: 'none',
+                                                backgroundColor: '#fff',
+                                                color: '#1a1410',
+                                                transition: 'border-color 0.15s',
+                                            }, onFocus: (e) => { e.currentTarget.style.borderColor = color; }, onBlur: (e) => { e.currentTarget.style.borderColor = '#e0dcd8'; } })] }), jsx("p", { style: {
+                                        margin: '0 0 16px',
+                                        color: '#b0a89e',
+                                        fontSize: '11px',
+                                        lineHeight: 1.4,
+                                    }, children: "We'll use this to follow up if you leave." }), jsx("button", { onClick: startChat, disabled: !visitorName || !visitorEmail, style: {
+                                        width: '100%',
+                                        padding: '12px',
+                                        backgroundColor: color,
+                                        color: '#fff',
+                                        border: 'none',
+                                        borderRadius: `${inputBorderRadius}px`,
+                                        cursor: visitorName && visitorEmail ? 'pointer' : 'not-allowed',
+                                        fontWeight: 600,
+                                        fontSize: '14px',
+                                        opacity: visitorName && visitorEmail ? 1 : 0.5,
+                                        transition: 'opacity 0.15s',
+                                        letterSpacing: '0.01em',
+                                    }, children: "Start Chat" })] })) : (
+                        /* Messages */
+                        jsxs("div", { style: { padding: '16px 16px 8px' }, children: [messages.map((msg) => (jsxs("div", { style: {
+                                        marginBottom: '10px',
+                                        display: 'flex',
+                                        justifyContent: msg.senderType === 'visitor' ? 'flex-end' : 'flex-start',
+                                    }, children: [msg.senderType !== 'visitor' && (jsx("div", { style: {
+                                                width: '28px',
+                                                height: '28px',
+                                                borderRadius: '50%',
+                                                backgroundColor: msg.senderAvatar ? 'transparent' : color,
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                justifyContent: 'center',
+                                                marginRight: '8px',
+                                                flexShrink: 0,
+                                                marginTop: '2px',
+                                                overflow: 'hidden',
+                                            }, children: msg.senderAvatar ? (jsx("img", { src: msg.senderAvatar, alt: "", style: { width: '100%', height: '100%', objectFit: 'cover' } })) : (jsx(ChatIcon, { size: 13 })) })), jsxs("div", { style: {
+                                                maxWidth: '72%',
+                                                padding: '10px 14px',
+                                                borderRadius: msg.senderType === 'visitor'
+                                                    ? `${rad}px ${rad}px ${Math.max(rad - 8, 2)}px ${rad}px`
+                                                    : `${rad}px ${rad}px ${rad}px ${Math.max(rad - 8, 2)}px`,
+                                                backgroundColor: msg.senderType === 'visitor' ? color : '#fff',
+                                                color: msg.senderType === 'visitor' ? '#fff' : '#1a1410',
+                                                fontSize: '13px',
+                                                lineHeight: 1.5,
+                                                boxShadow: msg.senderType === 'visitor' ? 'none' : '0 1px 3px rgba(0,0,0,0.06)',
+                                                border: msg.senderType === 'visitor' ? 'none' : '1px solid #eee',
+                                            }, children: [msg.body, msg.attachments && msg.attachments.length > 0 && (jsx("div", { style: { marginTop: '6px' }, children: msg.attachments.map((att) => (jsx("div", { style: { fontSize: '11px', opacity: 0.8, marginTop: '2px' }, children: jsx("a", { href: att.fileUrl, target: "_blank", rel: "noopener noreferrer", style: { color: msg.senderType === 'visitor' ? '#fff' : color, textDecoration: 'underline' }, children: att.fileName }) }, att.id))) })), jsx("div", { style: {
+                                                        fontSize: '10px',
+                                                        marginTop: '4px',
+                                                        opacity: 0.5,
+                                                        textAlign: msg.senderType === 'visitor' ? 'right' : 'left',
+                                                    }, children: new Date(msg.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) })] })] }, msg.id))), jsx("div", { ref: messagesEnd })] })) }), started && (jsxs("div", { style: {
+                            padding: '12px 16px',
+                            borderTop: '1px solid #eee',
+                            backgroundColor: '#fff',
+                        }, children: [pendingFiles.length > 0 && (jsx("div", { style: { marginBottom: '8px', display: 'flex', flexWrap: 'wrap', gap: '4px' }, children: pendingFiles.map((f, i) => (jsxs("span", { style: {
+                                        fontSize: '11px',
+                                        padding: '3px 8px',
+                                        borderRadius: `${inputBorderRadius}px`,
+                                        backgroundColor: '#f5f3f0',
+                                        color: '#6b625a',
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        gap: '4px',
+                                    }, children: [f.fileName, jsx("button", { onClick: () => setPendingFiles((prev) => prev.filter((_, idx) => idx !== i)), style: { background: 'none', border: 'none', cursor: 'pointer', color: '#9c948a', padding: 0, fontSize: '12px' }, children: "\u00D7" })] }, i))) })), jsxs("div", { style: { display: 'flex', gap: '8px', alignItems: 'center' }, children: [jsx("input", { ref: fileInputRef, type: "file", multiple: true, onChange: handleFileSelect, style: { display: 'none' }, accept: "image/*,.pdf,.doc,.docx,.txt,.csv,.xlsx,.xls,.zip" }), jsx("button", { onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, style: {
+                                            padding: '8px',
+                                            backgroundColor: 'transparent',
+                                            border: 'none',
+                                            borderRadius: `${inputBorderRadius}px`,
+                                            cursor: 'pointer',
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            justifyContent: 'center',
+                                            flexShrink: 0,
+                                        }, title: "Attach file", children: jsx(PaperclipIcon, {}) }), jsx("input", { type: "text", value: input, onChange: (e) => setInput(e.target.value), onKeyDown: (e) => e.key === 'Enter' && sendMessage(), onPaste: handlePaste, placeholder: "Type a message...", disabled: sending, style: {
+                                            flex: 1,
+                                            padding: '9px 12px',
+                                            border: '1px solid #e0dcd8',
+                                            borderRadius: `${inputBorderRadius}px`,
+                                            fontSize: '13px',
+                                            outline: 'none',
+                                            backgroundColor: '#faf9f7',
+                                            color: '#1a1410',
+                                            transition: 'border-color 0.15s',
+                                        }, onFocus: (e) => { e.currentTarget.style.borderColor = color; }, onBlur: (e) => { e.currentTarget.style.borderColor = '#e0dcd8'; } }), jsx("button", { onClick: sendMessage, disabled: sending || (!input.trim() && pendingFiles.length === 0), style: {
+                                            width: '36px',
+                                            height: '36px',
+                                            backgroundColor: color,
+                                            color: '#fff',
+                                            border: 'none',
+                                            borderRadius: `${inputBorderRadius}px`,
+                                            cursor: sending || (!input.trim() && pendingFiles.length === 0) ? 'not-allowed' : 'pointer',
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            justifyContent: 'center',
+                                            flexShrink: 0,
+                                            opacity: sending || (!input.trim() && pendingFiles.length === 0) ? 0.5 : 1,
+                                            transition: 'opacity 0.15s',
+                                        }, children: jsx(SendIcon, {}) })] })] })), showPoweredBy && (jsxs("div", { style: {
+                            padding: '6px 16px',
+                            borderTop: '1px solid #f0eeeb',
+                            backgroundColor: '#faf9f7',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            gap: '5px',
+                        }, children: [jsx(ReechdeskLogo, {}), jsx("span", { style: {
+                                    fontSize: '10px',
+                                    color: '#b0a89e',
+                                    letterSpacing: '0.02em',
+                                }, children: "Powered by Reechdesk" })] }))] }))] }));
+}
+
+const STATUS_COLORS = {
+    OPEN: '#f26522',
+    IN_PROGRESS: '#2563eb',
+    PENDING: '#d97706',
+    ESCALATED: '#9333ea',
+    RESOLVED: '#16a34a',
+    CLOSED: '#9c948a',
+};
+function TicketStatus({ ticketNumber: initialTicket }) {
+    const { apiUrl, entityId, branding } = useHelpdesk();
+    const color = branding.primaryColor;
+    const [ticketNumber, setTicketNumber] = useState(initialTicket || '');
+    const [ticket, setTicket] = useState(null);
+    const [error, setError] = useState('');
+    const [loading, setLoading] = useState(false);
+    const fetchTicket = async () => {
+        var _a, _b;
+        if (!ticketNumber)
+            return;
+        setLoading(true);
+        setError('');
+        try {
+            const res = await fetch(`${apiUrl}/api/tickets?search=${ticketNumber}&entityId=${entityId}&limit=1`);
+            const data = await res.json();
+            if (((_a = data.data) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                const t = data.data[0];
+                setTicket({
+                    ticketNumber: t.ticketNumber,
+                    subject: t.subject,
+                    status: t.status,
+                    updatedAt: t.updatedAt,
+                    assignedTo: (_b = t.assignedTo) === null || _b === void 0 ? void 0 : _b.name,
+                });
+            }
+            else {
+                setError('Ticket not found');
+                setTicket(null);
+            }
+        }
+        catch (_c) {
+            setError('Failed to fetch ticket');
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    useEffect(() => {
+        if (initialTicket) {
+            setTicketNumber(initialTicket);
+        }
+    }, [initialTicket]);
+    return (jsxs("div", { style: {
+            padding: '16px',
+            border: '1px solid #e0dcd8',
+            borderRadius: '4px',
+            backgroundColor: '#fff',
+            fontFamily: '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif',
+        }, children: [!ticket && (jsxs("div", { style: { display: 'flex', gap: '8px', marginBottom: '12px' }, children: [jsx("input", { type: "text", value: ticketNumber, onChange: (e) => setTicketNumber(e.target.value), placeholder: "Enter ticket number (e.g. TKT-00001)", style: {
+                            flex: 1, padding: '8px 12px', border: '1px solid #e0dcd8',
+                            borderRadius: '4px', fontSize: '14px',
+                        } }), jsx("button", { onClick: fetchTicket, disabled: loading || !ticketNumber, style: {
+                            padding: '8px 16px', backgroundColor: color,
+                            color: '#fff', border: 'none', borderRadius: '4px',
+                            cursor: 'pointer', fontWeight: 600, fontSize: '14px',
+                        }, children: loading ? '...' : 'Check' })] })), error && jsx("p", { style: { color: '#dc2626', fontSize: '14px' }, children: error }), ticket && (jsxs("div", { children: [jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '8px' }, children: [jsx("span", { style: { fontFamily: 'monospace', color: '#6b625a', fontSize: '13px' }, children: ticket.ticketNumber }), jsx("span", { style: {
+                                    padding: '2px 8px',
+                                    borderRadius: '100px',
+                                    fontSize: '12px',
+                                    fontWeight: 600,
+                                    backgroundColor: (STATUS_COLORS[ticket.status] || '#9c948a') + '20',
+                                    color: STATUS_COLORS[ticket.status] || '#9c948a',
+                                }, children: ticket.status.replace('_', ' ') })] }), jsx("p", { style: { fontSize: '14px', color: '#1a1410', margin: '0 0 4px' }, children: ticket.subject }), jsxs("p", { style: { fontSize: '12px', color: '#9c948a', margin: 0 }, children: ["Last updated: ", new Date(ticket.updatedAt).toLocaleDateString(), ticket.assignedTo && ` • Assigned to: ${ticket.assignedTo}`] })] }))] }));
+}
+
+function KBSearch({ placeholder = 'Search help articles...', maxResults = 5, }) {
+    const { apiUrl, entityId } = useHelpdesk();
+    const [query, setQuery] = useState('');
+    const [results, setResults] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [open, setOpen] = useState(false);
+    const search = useCallback(async (q) => {
+        if (q.length < 2) {
+            setResults([]);
+            setOpen(false);
+            return;
+        }
+        setLoading(true);
+        try {
+            const res = await fetch(`${apiUrl}/api/kb/search?q=${encodeURIComponent(q)}&entityId=${entityId}`);
+            const data = await res.json();
+            setResults((Array.isArray(data) ? data : []).slice(0, maxResults));
+            setOpen(true);
+        }
+        catch (_a) {
+            // ignore
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [apiUrl, entityId, maxResults]);
+    return (jsxs("div", { style: { position: 'relative' }, children: [jsx("input", { type: "text", value: query, onChange: (e) => {
+                    setQuery(e.target.value);
+                    search(e.target.value);
+                }, onFocus: () => query.length >= 2 && setOpen(true), placeholder: placeholder, style: {
+                    width: '100%', padding: '8px 12px', border: '1px solid #e0dcd8',
+                    borderRadius: '4px', fontSize: '14px', boxSizing: 'border-box',
+                } }), open && results.length > 0 && (jsx("div", { style: {
+                    position: 'absolute', top: '100%', left: 0, right: 0,
+                    backgroundColor: '#fff', border: '1px solid #e0dcd8',
+                    borderRadius: '4px', boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
+                    zIndex: 100, maxHeight: '300px', overflowY: 'auto',
+                }, children: results.map((article) => (jsxs("a", { href: `${apiUrl}/knowledge-base/${article.slug}`, style: {
+                        display: 'block', padding: '10px 12px', textDecoration: 'none',
+                        borderBottom: '1px solid #f0f0f0',
+                    }, children: [jsx("div", { style: { fontSize: '13px', fontWeight: 600, color: '#1a1410' }, children: article.title }), jsx("div", { style: { fontSize: '12px', color: '#9c948a', marginTop: '2px' }, children: article.category.name }), article.excerpt && (jsxs("div", { style: { fontSize: '12px', color: '#6b625a', marginTop: '2px' }, children: [article.excerpt.slice(0, 80), "..."] }))] }, article.id))) })), open && query.length >= 2 && results.length === 0 && !loading && (jsx("div", { style: {
+                    position: 'absolute', top: '100%', left: 0, right: 0,
+                    backgroundColor: '#fff', border: '1px solid #e0dcd8',
+                    borderRadius: '4px', padding: '12px', textAlign: 'center',
+                    color: '#9c948a', fontSize: '13px', zIndex: 100,
+                }, children: "No articles found" }))] }));
+}
+
+export { ChatWidget, HelpdeskProvider, KBSearch, TicketStatus, useHelpdesk };
+//# sourceMappingURL=index.mjs.map