ajaxter-chat 1.0.3 → 3.0.1

package/dist/components/ChatWindow/index.js

@@ -1,286 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useMemo, useCallback } from 'react';
-import { UserList } from '../UserList';
-import { ChatBox } from '../ChatBox';
-import { MaintenanceView } from '../MaintenanceView';
-import { HomeView } from '../HomeView';
-import { BottomNav } from '../BottomNav';
-import { useUsers } from '../../hooks/useUsers';
-import { useChat } from '../../hooks/useChat';
-import { buildUserListUrl } from '../../config';
-import { mergeTheme } from '../../utils/theme';
-export const ChatWindow = ({ config, theme, buttonPosition, onClose, }) => {
-    var _a, _b, _c, _d, _e, _f;
-    const t = mergeTheme(Object.assign(Object.assign({}, theme), { widgetMinWidth: (_a = theme === null || theme === void 0 ? void 0 : theme.widgetMinWidth) !== null && _a !== void 0 ? _a : config.widgetMinWidth, widgetMaxWidth: (_b = theme === null || theme === void 0 ? void 0 : theme.widgetMaxWidth) !== null && _b !== void 0 ? _b : config.widgetMaxWidth, widgetMinHeight: (_c = theme === null || theme === void 0 ? void 0 : theme.widgetMinHeight) !== null && _c !== void 0 ? _c : config.widgetMinHeight, widgetMaxHeight: (_d = theme === null || theme === void 0 ? void 0 : theme.widgetMaxHeight) !== null && _d !== void 0 ? _d : config.widgetMaxHeight, widgetDefaultSize: (_e = theme === null || theme === void 0 ? void 0 : theme.widgetDefaultSize) !== null && _e !== void 0 ? _e : config.widgetDefaultSize }));
-    const minW = Math.min(t.widgetMinWidth, t.widgetMaxWidth);
-    const maxW = Math.max(t.widgetMinWidth, t.widgetMaxWidth);
-    const minH = Math.min(t.widgetMinHeight, t.widgetMaxHeight);
-    const maxH = Math.max(t.widgetMinHeight, t.widgetMaxHeight);
-    const [sizeRatio, setSizeRatio] = useState(t.widgetDefaultSize);
-    const widthPx = minW + (maxW - minW) * sizeRatio;
-    const heightPx = minH + (maxH - minH) * sizeRatio;
-    const [bottomTab, setBottomTab] = useState('home');
-    const [homeFlow, setHomeFlow] = useState('home');
-    const [pickUserMode, setPickUserMode] = useState(null);
-    const [tickets, setTickets] = useState([]);
-    const [ticketSubject, setTicketSubject] = useState('');
-    const [ticketBody, setTicketBody] = useState('');
-    const userListUrl = buildUserListUrl(config);
-    const filterType = pickUserMode === 'support'
-        ? 'developer'
-        : pickUserMode === 'conversation'
-            ? 'user'
-            : config.chatType === 'SUPPORT'
-                ? 'developer'
-                : config.chatType === 'CHAT'
-                    ? 'user'
-                    : 'developer';
-    const { users, loading, error } = useUsers({
-        url: userListUrl,
-        filterType,
-        enabled: config.status === 'ACTIVE' && homeFlow === 'pickUser',
-    });
-    const { messages, activeUser, recentChats, selectUser, sendMessage, openRecent, } = useChat();
-    const positionStyle = buttonPosition === 'bottom-left'
-        ? { left: '24px', right: 'auto' }
-        : { right: '24px', left: 'auto' };
-    const goHomeCards = useCallback(() => {
-        setHomeFlow('home');
-        setPickUserMode(null);
-    }, []);
-    const handleBackFromChat = useCallback(() => {
-        if (pickUserMode) {
-            setHomeFlow('pickUser');
-            return;
-        }
-        setBottomTab('chats');
-        setHomeFlow('home');
-    }, [pickUserMode]);
-    const handleBottomTab = useCallback((tab) => {
-        setBottomTab(tab);
-        goHomeCards();
-    }, [goHomeCards]);
-    const startSupport = useCallback(() => {
-        setPickUserMode('support');
-        setHomeFlow('pickUser');
-    }, []);
-    const startConversation = useCallback(() => {
-        setPickUserMode('conversation');
-        setHomeFlow('pickUser');
-    }, []);
-    const startRaiseTicket = useCallback(() => {
-        setHomeFlow('raiseTicket');
-        setTicketSubject('');
-        setTicketBody('');
-    }, []);
-    const submitTicket = useCallback(() => {
-        if (!ticketSubject.trim())
-            return;
-        const id = `tkt_${Date.now()}`;
-        setTickets((prev) => [
-            {
-                id,
-                subject: ticketSubject.trim(),
-                body: ticketBody.trim(),
-                createdAt: new Date(),
-                status: 'open',
-            },
-            ...prev,
-        ]);
-        setHomeFlow('home');
-        setBottomTab('tickets');
-    }, [ticketSubject, ticketBody]);
-    const pickUserHeader = useMemo(() => {
-        if (pickUserMode === 'support')
-            return 'Support';
-        if (pickUserMode === 'conversation')
-            return 'New conversation';
-        return 'People';
-    }, [pickUserMode]);
-    return (_jsxs("div", { style: Object.assign(Object.assign({ position: 'fixed', bottom: '90px' }, positionStyle), { zIndex: 9998, width: `${widthPx}px`, maxWidth: 'calc(100vw - 32px)', height: `${heightPx}px`, maxHeight: 'calc(100vh - 120px)', backgroundColor: t.backgroundColor, borderRadius: t.borderRadius, boxShadow: '0 24px 80px rgba(0,0,0,0.18), 0 8px 24px rgba(0,0,0,0.08)', display: 'flex', flexDirection: 'column', overflow: 'hidden', fontFamily: t.fontFamily, animation: 'cw-slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)' }), children: [_jsx("style", { children: `
-        @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');
-        @keyframes cw-slideUp {
-          from { opacity: 0; transform: translateY(20px) scale(0.97); }
-          to   { opacity: 1; transform: translateY(0)   scale(1);    }
-        }
-        @keyframes cw-slideFromRight {
-          from { opacity: 0; transform: translateX(24px); }
-          to   { opacity: 1; transform: translateX(0); }
-        }
-        @keyframes shimmer {
-          0%   { background-position: 200% 0; }
-          100% { background-position: -200% 0; }
-        }
-        ::-webkit-scrollbar { width: 4px; }
-        ::-webkit-scrollbar-track { background: transparent; }
-        ::-webkit-scrollbar-thumb { background: #e0e0e0; border-radius: 4px; }
-      ` }), config.status === 'MAINTENANCE' ? (_jsx(MaintenanceView, { fontFamily: t.fontFamily, primaryColor: t.primaryColor })) : (_jsxs(_Fragment, { children: [_jsxs("div", { style: { flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0, overflow: 'hidden' }, children: [bottomTab === 'home' && homeFlow === 'home' && (_jsx(HomeView, { primaryColor: t.primaryColor, fontFamily: t.fontFamily, showNeedSupport: config.showNeedSupport, showNewConversation: config.showNewConversation, onNeedSupport: startSupport, onNewConversation: startConversation, onRaiseTicket: startRaiseTicket, onClose: onClose })), bottomTab === 'home' && homeFlow === 'pickUser' && (_jsxs("div", { style: {
-                                    flex: 1,
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    minHeight: 0,
-                                    backgroundColor: '#fff',
-                                    animation: 'cw-slideFromRight 0.28s ease-out',
-                                }, children: [_jsxs("div", { style: {
-                                            flexShrink: 0,
-                                            padding: '14px 16px',
-                                            backgroundColor: t.primaryColor,
-                                            color: '#fff',
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            gap: '12px',
-                                        }, children: [_jsx("button", { type: "button", onClick: goHomeCards, "aria-label": "Back", style: {
-                                                    background: 'transparent',
-                                                    border: 'none',
-                                                    color: '#fff',
-                                                    cursor: 'pointer',
-                                                    padding: '4px',
-                                                }, children: _jsx("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M15 18L9 12L15 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }), _jsx("div", { style: { fontWeight: 700, fontSize: '16px' }, children: pickUserHeader })] }), _jsxs("div", { style: { flex: 1, overflow: 'hidden', display: 'flex', flexDirection: 'column' }, children: [_jsx("div", { style: {
-                                                    padding: '10px 16px',
-                                                    fontSize: '11px',
-                                                    fontWeight: 700,
-                                                    color: '#bbb',
-                                                    textTransform: 'uppercase',
-                                                    letterSpacing: '0.08em',
-                                                    borderBottom: '1px solid #f0f0f0',
-                                                }, children: "Select a contact" }), _jsx(UserList, { users: users, loading: loading, error: error, activeUserId: (_f = activeUser === null || activeUser === void 0 ? void 0 : activeUser.uid) !== null && _f !== void 0 ? _f : null, onSelectUser: (u) => {
-                                                    selectUser(u);
-                                                    setHomeFlow('chat');
-                                                }, primaryColor: t.primaryColor, fontFamily: t.fontFamily })] })] })), bottomTab === 'home' && homeFlow === 'chat' && (_jsx("div", { style: {
-                                    flex: 1,
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    minHeight: 0,
-                                    animation: 'cw-slideFromRight 0.28s ease-out',
-                                }, children: _jsx(ChatBox, { activeUser: activeUser, messages: messages, onSendMessage: sendMessage, primaryColor: t.primaryColor, fontFamily: t.fontFamily, variant: "minimal", onBack: handleBackFromChat, onClose: onClose, headerTitle: activeUser === null || activeUser === void 0 ? void 0 : activeUser.name }) })), bottomTab === 'home' && homeFlow === 'raiseTicket' && (_jsxs("div", { style: {
-                                    flex: 1,
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    minHeight: 0,
-                                    backgroundColor: '#fff',
-                                    animation: 'cw-slideFromRight 0.28s ease-out',
-                                }, children: [_jsxs("div", { style: {
-                                            flexShrink: 0,
-                                            padding: '14px 16px',
-                                            backgroundColor: t.primaryColor,
-                                            color: '#fff',
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            justifyContent: 'space-between',
-                                        }, children: [_jsx("button", { type: "button", onClick: goHomeCards, "aria-label": "Back", style: {
-                                                    background: 'transparent',
-                                                    border: 'none',
-                                                    color: '#fff',
-                                                    cursor: 'pointer',
-                                                    padding: '4px',
-                                                }, children: _jsx("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M15 18L9 12L15 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }), _jsx("span", { style: { fontWeight: 700, fontSize: '16px' }, children: "Raise ticket" }), _jsx("button", { type: "button", onClick: onClose, "aria-label": "Close", style: {
-                                                    background: 'transparent',
-                                                    border: 'none',
-                                                    color: '#fff',
-                                                    cursor: 'pointer',
-                                                    padding: '4px',
-                                                }, children: _jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })] }) })] }), _jsxs("div", { style: { padding: '20px', flex: 1, overflowY: 'auto' }, children: [_jsx("label", { style: { display: 'block', fontSize: '12px', fontWeight: 600, color: '#666', marginBottom: '6px' }, children: "Subject" }), _jsx("input", { value: ticketSubject, onChange: (e) => setTicketSubject(e.target.value), placeholder: "Brief summary", style: {
-                                                    width: '100%',
-                                                    boxSizing: 'border-box',
-                                                    padding: '10px 12px',
-                                                    borderRadius: '10px',
-                                                    border: '1px solid #e5e5e5',
-                                                    fontFamily: t.fontFamily,
-                                                    fontSize: '14px',
-                                                    marginBottom: '16px',
-                                                } }), _jsx("label", { style: { display: 'block', fontSize: '12px', fontWeight: 600, color: '#666', marginBottom: '6px' }, children: "Description" }), _jsx("textarea", { value: ticketBody, onChange: (e) => setTicketBody(e.target.value), placeholder: "Describe the issue or change\u2026", rows: 5, style: {
-                                                    width: '100%',
-                                                    boxSizing: 'border-box',
-                                                    padding: '10px 12px',
-                                                    borderRadius: '10px',
-                                                    border: '1px solid #e5e5e5',
-                                                    fontFamily: t.fontFamily,
-                                                    fontSize: '14px',
-                                                    resize: 'vertical',
-                                                } }), _jsx("button", { type: "button", onClick: submitTicket, style: {
-                                                    marginTop: '18px',
-                                                    width: '100%',
-                                                    padding: '12px',
-                                                    borderRadius: '10px',
-                                                    border: 'none',
-                                                    backgroundColor: t.primaryColor,
-                                                    color: '#fff',
-                                                    fontWeight: 700,
-                                                    fontFamily: t.fontFamily,
-                                                    cursor: 'pointer',
-                                                    fontSize: '15px',
-                                                }, children: "Submit ticket" })] })] })), bottomTab === 'chats' && (_jsxs("div", { style: {
-                                    flex: 1,
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    minHeight: 0,
-                                    backgroundColor: '#fff',
-                                }, children: [_jsxs("div", { style: {
-                                            padding: '16px 20px',
-                                            backgroundColor: t.primaryColor,
-                                            color: '#fff',
-                                            fontWeight: 700,
-                                            fontSize: '17px',
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            justifyContent: 'space-between',
-                                        }, children: ["Recent chats", _jsx("button", { type: "button", onClick: onClose, "aria-label": "Close", style: {
-                                                    background: 'transparent',
-                                                    border: 'none',
-                                                    color: '#fff',
-                                                    cursor: 'pointer',
-                                                }, children: _jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })] }) })] }), _jsx("div", { style: { flex: 1, overflowY: 'auto' }, children: recentChats.length === 0 ? (_jsx("p", { style: { padding: '24px', textAlign: 'center', color: '#aaa', fontSize: '14px', margin: 0 }, children: "No recent chats yet" })) : (recentChats.map((r) => (_jsxs("button", { type: "button", onClick: () => {
-                                                openRecent(r.user);
-                                                setBottomTab('home');
-                                                setHomeFlow('chat');
-                                                setPickUserMode(null);
-                                            }, style: {
-                                                width: '100%',
-                                                padding: '14px 18px',
-                                                border: 'none',
-                                                borderBottom: '1px solid #f0f0f0',
-                                                background: '#fff',
-                                                textAlign: 'left',
-                                                cursor: 'pointer',
-                                                fontFamily: t.fontFamily,
-                                            }, children: [_jsx("div", { style: { fontWeight: 600, color: '#1a1a2e' }, children: r.user.name }), _jsx("div", { style: { fontSize: '13px', color: '#888', marginTop: '4px' }, children: r.lastMessage }), _jsx("div", { style: { fontSize: '11px', color: '#bbb', marginTop: '6px' }, children: r.updatedAt.toLocaleString() })] }, r.user.uid)))) })] })), bottomTab === 'tickets' && (_jsxs("div", { style: {
-                                    flex: 1,
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    minHeight: 0,
-                                    backgroundColor: '#fff',
-                                }, children: [_jsxs("div", { style: {
-                                            padding: '16px 20px',
-                                            backgroundColor: t.primaryColor,
-                                            color: '#fff',
-                                            fontWeight: 700,
-                                            fontSize: '17px',
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            justifyContent: 'space-between',
-                                        }, children: ["Tickets", _jsx("button", { type: "button", onClick: onClose, "aria-label": "Close", style: {
-                                                    background: 'transparent',
-                                                    border: 'none',
-                                                    color: '#fff',
-                                                    cursor: 'pointer',
-                                                }, children: _jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })] }) })] }), _jsx("div", { style: { flex: 1, overflowY: 'auto' }, children: tickets.length === 0 ? (_jsx("p", { style: { padding: '24px', textAlign: 'center', color: '#aaa', fontSize: '14px', margin: 0 }, children: "No tickets yet. Use Home \u2192 Raise Ticket." })) : (tickets.map((tk) => (_jsxs("div", { style: {
-                                                padding: '14px 18px',
-                                                borderBottom: '1px solid #f0f0f0',
-                                                fontFamily: t.fontFamily,
-                                            }, children: [_jsx("div", { style: { fontWeight: 600, color: '#1a1a2e' }, children: tk.subject }), tk.body ? (_jsx("div", { style: { fontSize: '13px', color: '#666', marginTop: '6px', lineHeight: 1.45 }, children: tk.body })) : null, _jsxs("div", { style: { fontSize: '11px', color: '#bbb', marginTop: '8px' }, children: [tk.createdAt.toLocaleString(), " \u00B7 ", tk.status] })] }, tk.id)))) })] }))] }), _jsx("div", { style: {
-                            padding: '8px 14px 6px',
-                            borderTop: '1px solid #eee',
-                            backgroundColor: '#fafafa',
-                            flexShrink: 0,
-                        }, children: _jsxs("div", { style: {
-                                display: 'flex',
-                                alignItems: 'center',
-                                gap: '10px',
-                                fontSize: '11px',
-                                color: '#888',
-                                fontFamily: t.fontFamily,
-                            }, children: [_jsx("span", { style: { flexShrink: 0 }, children: "Size" }), _jsx("input", { type: "range", min: 0, max: 1, step: 0.02, value: sizeRatio, onChange: (e) => setSizeRatio(parseFloat(e.target.value)), "aria-label": "Widget size", style: {
-                                        flex: 1,
-                                        accentColor: t.primaryColor,
-                                    } })] }) }), _jsx(BottomNav, { active: bottomTab, onChange: handleBottomTab, primaryColor: t.primaryColor, fontFamily: t.fontFamily })] }))] }));
-};

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

@@ -1,12 +0,0 @@
-import React from 'react';
-export interface HomeViewProps {
-    primaryColor: string;
-    fontFamily: string;
-    showNeedSupport: boolean;
-    showNewConversation: boolean;
-    onNeedSupport: () => void;
-    onNewConversation: () => void;
-    onRaiseTicket: () => void;
-    onClose: () => void;
-}
-export declare const HomeView: React.FC<HomeViewProps>;

package/dist/components/HomeView/index.js

@@ -1,51 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const SendIcon = ({ color }) => (_jsx("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", "aria-hidden": true, children: _jsx("path", { d: "M22 2L11 13M22 2L15 22L11 13L2 9L22 2Z", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
-export const HomeView = ({ primaryColor, fontFamily, showNeedSupport, showNewConversation, onNeedSupport, onNewConversation, onRaiseTicket, onClose, }) => {
-    const cardStyle = {
-        width: '100%',
-        backgroundColor: '#fff',
-        borderRadius: '12px',
-        padding: '16px 18px',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        gap: '12px',
-        border: 'none',
-        cursor: 'pointer',
-        textAlign: 'left',
-        fontFamily,
-        boxShadow: '0 2px 12px rgba(0,0,0,0.06)',
-        transition: 'transform 0.15s ease, box-shadow 0.15s ease',
-    };
-    return (_jsxs("div", { style: {
-            flex: 1,
-            display: 'flex',
-            flexDirection: 'column',
-            backgroundColor: primaryColor,
-            fontFamily,
-            minHeight: 0,
-        }, children: [_jsx("div", { style: {
-                    padding: '20px 20px 8px',
-                    display: 'flex',
-                    justifyContent: 'flex-end',
-                }, children: _jsx("button", { type: "button", onClick: onClose, "aria-label": "Close", style: {
-                        background: 'transparent',
-                        border: 'none',
-                        color: '#fff',
-                        cursor: 'pointer',
-                        padding: '4px',
-                    }, children: _jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })] }) }) }), _jsxs("div", { style: { padding: '0 24px 20px', flexShrink: 0 }, children: [_jsx("h1", { style: {
-                            margin: 0,
-                            color: '#fff',
-                            fontSize: '26px',
-                            fontWeight: 700,
-                            letterSpacing: '-0.02em',
-                        }, children: "Hi there \uD83D\uDC4B" }), _jsx("p", { style: { margin: '10px 0 0', color: 'rgba(255,255,255,0.92)', fontSize: '14px', lineHeight: 1.5 }, children: "Need help? start a conversation:" })] }), _jsxs("div", { style: {
-                    flex: 1,
-                    padding: '0 20px 16px',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    gap: '12px',
-                    overflowY: 'auto',
-                }, children: [showNeedSupport && (_jsxs("button", { type: "button", onClick: onNeedSupport, style: cardStyle, children: [_jsxs("div", { children: [_jsx("div", { style: { fontWeight: 700, fontSize: '15px', color: '#1a1a2e' }, children: "Need Support" }), _jsx("div", { style: { fontSize: '13px', color: '#888', marginTop: '4px' }, children: "We typically reply in a few minutes" })] }), _jsx(SendIcon, { color: primaryColor })] })), showNewConversation && (_jsxs("button", { type: "button", onClick: onNewConversation, style: cardStyle, children: [_jsxs("div", { children: [_jsx("div", { style: { fontWeight: 700, fontSize: '15px', color: '#1a1a2e' }, children: "New Conversation" }), _jsx("div", { style: { fontSize: '13px', color: '#888', marginTop: '4px' }, children: "With your colleague" })] }), _jsx(SendIcon, { color: primaryColor })] })), _jsxs("button", { type: "button", onClick: onRaiseTicket, style: cardStyle, children: [_jsxs("div", { children: [_jsx("div", { style: { fontWeight: 700, fontSize: '15px', color: '#1a1a2e' }, children: "Raise Ticket" }), _jsx("div", { style: { fontSize: '13px', color: '#888', marginTop: '4px' }, children: "For major changes" })] }), _jsx(SendIcon, { color: primaryColor })] })] })] }));
-};

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

@@ -1,13 +0,0 @@
-import React from 'react';
-import { ChatUser } from '../../types';
-interface UserListProps {
-    users: ChatUser[];
-    loading: boolean;
-    error: string | null;
-    activeUserId: string | null;
-    onSelectUser: (user: ChatUser) => void;
-    primaryColor: string;
-    fontFamily: string;
-}
-export declare const UserList: React.FC<UserListProps>;
-export {};

package/dist/components/UserList/index.js

@@ -1,136 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const UserList = ({ users, loading, error, activeUserId, onSelectUser, primaryColor, fontFamily, }) => {
-    if (loading) {
-        return (_jsx("div", { style: { padding: '16px', fontFamily }, children: [1, 2, 3, 4].map((i) => (_jsx(SkeletonUser, {}, i))) }));
-    }
-    if (error) {
-        return (_jsxs("div", { style: {
-                padding: '32px 20px',
-                textAlign: 'center',
-                fontFamily,
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-                gap: '10px',
-            }, children: [_jsxs("svg", { width: "36", height: "36", viewBox: "0 0 24 24", fill: "none", children: [_jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "#ff6b6b", strokeWidth: "2" }), _jsx("line", { x1: "12", y1: "8", x2: "12", y2: "12", stroke: "#ff6b6b", strokeWidth: "2", strokeLinecap: "round" }), _jsx("line", { x1: "12", y1: "16", x2: "12.01", y2: "16", stroke: "#ff6b6b", strokeWidth: "2", strokeLinecap: "round" })] }), _jsx("p", { style: { margin: 0, fontSize: '13px', color: '#ff6b6b', fontWeight: 600 }, children: "Failed to load users" }), _jsx("p", { style: { margin: 0, fontSize: '12px', color: '#999', lineHeight: 1.5 }, children: error })] }));
-    }
-    if (users.length === 0) {
-        return (_jsxs("div", { style: {
-                padding: '40px 20px',
-                textAlign: 'center',
-                fontFamily,
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-                gap: '10px',
-            }, children: [_jsxs("svg", { width: "40", height: "40", viewBox: "0 0 24 24", fill: "none", children: [_jsx("path", { d: "M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2", stroke: "#ccc", strokeWidth: "2", strokeLinecap: "round" }), _jsx("circle", { cx: "9", cy: "7", r: "4", stroke: "#ccc", strokeWidth: "2" }), _jsx("path", { d: "M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75", stroke: "#ccc", strokeWidth: "2", strokeLinecap: "round" })] }), _jsx("p", { style: { margin: 0, fontSize: '13px', color: '#bbb', fontWeight: 600 }, children: "No users available" }), _jsx("p", { style: { margin: 0, fontSize: '12px', color: '#ccc' }, children: "Check back later" })] }));
-    }
-    return (_jsx("div", { style: { overflowY: 'auto', flex: 1, fontFamily }, children: users.map((user) => {
-            const isActive = user.uid === activeUserId;
-            const initials = user.name
-                .split(' ')
-                .map((n) => n[0])
-                .join('')
-                .toUpperCase()
-                .slice(0, 2);
-            return (_jsxs("button", { onClick: () => onSelectUser(user), style: {
-                    width: '100%',
-                    padding: '12px 16px',
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: '12px',
-                    background: isActive ? `${primaryColor}12` : 'transparent',
-                    border: 'none',
-                    borderLeft: isActive ? `3px solid ${primaryColor}` : '3px solid transparent',
-                    cursor: 'pointer',
-                    textAlign: 'left',
-                    transition: 'all 0.18s ease',
-                    borderRadius: '0',
-                }, onMouseEnter: (e) => {
-                    if (!isActive) {
-                        e.currentTarget.style.backgroundColor = '#f8f8ff';
-                    }
-                }, onMouseLeave: (e) => {
-                    if (!isActive) {
-                        e.currentTarget.style.backgroundColor = 'transparent';
-                    }
-                }, children: [_jsx("div", { style: {
-                            width: '40px',
-                            height: '40px',
-                            borderRadius: '50%',
-                            backgroundColor: isActive ? primaryColor : stringToColor(user.name),
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            color: '#fff',
-                            fontSize: '13px',
-                            fontWeight: 700,
-                            flexShrink: 0,
-                            transition: 'background 0.2s',
-                        }, children: initials }), _jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [_jsx("div", { style: {
-                                    fontSize: '14px',
-                                    fontWeight: 600,
-                                    color: isActive ? primaryColor : '#1a1a2e',
-                                    whiteSpace: 'nowrap',
-                                    overflow: 'hidden',
-                                    textOverflow: 'ellipsis',
-                                }, children: user.name }), _jsx("div", { style: {
-                                    fontSize: '12px',
-                                    color: '#999',
-                                    whiteSpace: 'nowrap',
-                                    overflow: 'hidden',
-                                    textOverflow: 'ellipsis',
-                                }, children: user.project || user.email })] }), _jsx("span", { style: {
-                            fontSize: '10px',
-                            fontWeight: 700,
-                            padding: '3px 8px',
-                            borderRadius: '20px',
-                            textTransform: 'uppercase',
-                            letterSpacing: '0.05em',
-                            flexShrink: 0,
-                            backgroundColor: user.type === 'developer' ? '#e8f5e9' : '#e3f2fd',
-                            color: user.type === 'developer' ? '#2e7d32' : '#1565c0',
-                        }, children: user.type === 'developer' ? 'Dev' : 'User' })] }, user.uid));
-        }) }));
-};
-const SkeletonUser = () => (_jsxs("div", { style: {
-        display: 'flex',
-        alignItems: 'center',
-        gap: '12px',
-        padding: '12px 16px',
-    }, children: [_jsx("div", { style: {
-                width: '40px',
-                height: '40px',
-                borderRadius: '50%',
-                background: 'linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%)',
-                backgroundSize: '200% 100%',
-                animation: 'shimmer 1.5s infinite',
-                flexShrink: 0,
-            } }), _jsxs("div", { style: { flex: 1 }, children: [_jsx("div", { style: {
-                        height: '12px',
-                        width: '60%',
-                        borderRadius: '6px',
-                        background: 'linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%)',
-                        backgroundSize: '200% 100%',
-                        animation: 'shimmer 1.5s infinite',
-                        marginBottom: '8px',
-                    } }), _jsx("div", { style: {
-                        height: '10px',
-                        width: '40%',
-                        borderRadius: '6px',
-                        background: 'linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%)',
-                        backgroundSize: '200% 100%',
-                        animation: 'shimmer 1.5s infinite',
-                    } })] })] }));
-// Generate consistent color from name string
-function stringToColor(str) {
-    let hash = 0;
-    for (let i = 0; i < str.length; i++) {
-        hash = str.charCodeAt(i) + ((hash << 5) - hash);
-    }
-    const colors = [
-        '#7C3AED', '#2563EB', '#059669', '#D97706',
-        '#DC2626', '#7C2D12', '#0E7490', '#4F46E5',
-    ];
-    return colors[Math.abs(hash) % colors.length];
-}

package/dist/hooks/useUsers.d.ts

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

package/dist/hooks/useUsers.js

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

package/dist/services/userService.d.ts

@@ -1,7 +0,0 @@
-import { ChatUser } from '../types';
-export interface FetchUsersResult {
-    data: ChatUser[] | null;
-    error: string | null;
-    loading: boolean;
-}
-export declare function fetchUsers(url: string): Promise<ChatUser[]>;

package/dist/services/userService.js

@@ -1,18 +0,0 @@
-export async function fetchUsers(url) {
-    const sameOriginPath = url.startsWith('/');
-    const response = await fetch(url, {
-        method: 'GET',
-        headers: {
-            'Content-Type': 'application/json',
-        },
-        credentials: sameOriginPath ? 'same-origin' : 'omit',
-    });
-    if (!response.ok) {
-        throw new Error(`[ChatWidget] Failed to fetch users: ${response.status} ${response.statusText}`);
-    }
-    const data = await response.json();
-    if (!Array.isArray(data)) {
-        throw new Error('[ChatWidget] User list API did not return an array.');
-    }
-    return data;
-}