ajaxter-chat 1.0.3 → 2.0.1

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

@@ -1,10 +0,0 @@
-import React from 'react';
-import { BottomNavTab } from '../../types';
-interface BottomNavProps {
-    active: BottomNavTab;
-    onChange: (tab: BottomNavTab) => void;
-    primaryColor: string;
-    fontFamily: string;
-}
-export declare const BottomNav: React.FC<BottomNavProps>;
-export {};

package/dist/components/BottomNav/index.js

@@ -1,32 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const BottomNav = ({ active, onChange, primaryColor, fontFamily, }) => {
-    const item = (tab, label, icon) => {
-        const isOn = active === tab;
-        return (_jsxs("button", { type: "button", onClick: () => onChange(tab), style: {
-                flex: 1,
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-                justifyContent: 'center',
-                gap: '4px',
-                padding: '10px 8px',
-                border: 'none',
-                background: 'transparent',
-                cursor: 'pointer',
-                fontFamily,
-                color: isOn ? primaryColor : '#b0b0b0',
-                transition: 'color 0.2s',
-            }, children: [_jsx("span", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: icon }), _jsx("span", { style: { fontSize: '11px', fontWeight: isOn ? 600 : 500 }, children: label })] }));
-    };
-    return (_jsxs("nav", { style: {
-            flexShrink: 0,
-            display: 'flex',
-            alignItems: 'stretch',
-            backgroundColor: '#fff',
-            borderTop: '1px solid #eee',
-            paddingBottom: 'env(safe-area-inset-bottom, 0)',
-        }, "aria-label": "Widget sections", children: [item('home', 'Home', _jsx(HomeIcon, { active: active === 'home', color: primaryColor, muted: "#b0b0b0" })), item('chats', 'Chat', _jsx(ChatBubbleIcon, { active: active === 'chats', color: primaryColor, muted: "#b0b0b0" })), item('tickets', 'Tickets', _jsx(TicketIcon, { active: active === 'tickets', color: primaryColor, muted: "#b0b0b0" }))] }));
-};
-const HomeIcon = ({ active, color, muted, }) => (_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "aria-hidden": true, children: _jsx("path", { d: "M3 9.5L12 3l9 6.5V20a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1V9.5z", stroke: active ? color : muted, strokeWidth: "2", strokeLinejoin: "round" }) }));
-const ChatBubbleIcon = ({ active, color, muted, }) => (_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "aria-hidden": true, 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", stroke: active ? color : muted, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
-const TicketIcon = ({ active, color, muted, }) => (_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "aria-hidden": true, children: _jsx("path", { d: "M4 4h16v4H4V4zm0 6h10v10H4V10zm12 0h4v10h-4V10z", stroke: active ? color : muted, strokeWidth: "2", strokeLinejoin: "round" }) }));

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

@@ -1,15 +0,0 @@
-import React from 'react';
-import { ChatMessage, ChatUser } from '../../types';
-export interface ChatBoxProps {
-    activeUser: ChatUser | null;
-    messages: ChatMessage[];
-    onSendMessage: (text: string) => void;
-    primaryColor: string;
-    fontFamily: string;
-    /** Minimal: teal bar with back/close, footer with extra actions (reference UI). */
-    variant?: 'default' | 'minimal';
-    onBack?: () => void;
-    onClose?: () => void;
-    headerTitle?: string;
-}
-export declare const ChatBox: React.FC<ChatBoxProps>;

package/dist/components/ChatBox/index.js

@@ -1,228 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useRef, useEffect } from 'react';
-export const ChatBox = ({ activeUser, messages, onSendMessage, primaryColor, fontFamily, variant = 'default', onBack, onClose, headerTitle, }) => {
-    const [inputText, setInputText] = useState('');
-    const messagesEndRef = useRef(null);
-    const inputRef = useRef(null);
-    useEffect(() => {
-        var _a;
-        (_a = messagesEndRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'smooth' });
-    }, [messages]);
-    const handleSend = () => {
-        var _a;
-        if (!inputText.trim())
-            return;
-        onSendMessage(inputText);
-        setInputText('');
-        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    };
-    const handleKeyDown = (e) => {
-        if (e.key === 'Enter' && !e.shiftKey) {
-            e.preventDefault();
-            handleSend();
-        }
-    };
-    if (variant === 'minimal') {
-        return (_jsxs("div", { style: {
-                flex: 1,
-                display: 'flex',
-                flexDirection: 'column',
-                fontFamily,
-                overflow: 'hidden',
-                backgroundColor: '#fff',
-            }, children: [_jsxs("div", { style: {
-                        flexShrink: 0,
-                        padding: '14px 16px',
-                        backgroundColor: primaryColor,
-                        color: '#fff',
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'space-between',
-                    }, children: [_jsx("button", { type: "button", onClick: onBack, "aria-label": "Back", style: {
-                                background: 'transparent',
-                                border: 'none',
-                                color: '#fff',
-                                cursor: 'pointer',
-                                padding: '4px',
-                                display: 'flex',
-                                alignItems: 'center',
-                            }, 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: 600, fontSize: '15px', flex: 1, textAlign: 'center' }, children: headerTitle !== null && headerTitle !== void 0 ? headerTitle : (activeUser ? activeUser.name : 'Chat') }), _jsx("button", { type: "button", onClick: onClose, "aria-label": "Close", style: {
-                                background: 'transparent',
-                                border: 'none',
-                                color: '#fff',
-                                cursor: 'pointer',
-                                padding: '4px',
-                                display: 'flex',
-                            }, 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: {
-                        flex: 1,
-                        overflowY: 'auto',
-                        padding: '16px',
-                        backgroundColor: '#fff',
-                    }, children: [!activeUser ? (_jsx("div", { style: { textAlign: 'center', color: '#bbb', fontSize: '14px', marginTop: '32px' }, children: "Select someone to chat" })) : messages.length === 0 ? (_jsxs("div", { style: { textAlign: 'center', color: '#ccc', fontSize: '13px', marginTop: '32px' }, children: ["Say hello to ", activeUser.name, "! \uD83D\uDC4B"] })) : (messages.map((msg) => (_jsx(MessageBubble, { message: msg, primaryColor: primaryColor }, msg.id)))), _jsx("div", { ref: messagesEndRef })] }), _jsxs("div", { style: {
-                        borderTop: '1px solid #eee',
-                        backgroundColor: '#fff',
-                        padding: '10px 12px',
-                        display: 'flex',
-                        alignItems: 'center',
-                        gap: '8px',
-                    }, children: [_jsx("textarea", { ref: inputRef, value: inputText, onChange: (e) => setInputText(e.target.value), onKeyDown: handleKeyDown, placeholder: "Type and press [enter]..", rows: 1, disabled: !activeUser, style: {
-                                flex: 1,
-                                resize: 'none',
-                                border: 'none',
-                                outline: 'none',
-                                fontFamily,
-                                fontSize: '14px',
-                                color: '#1a1a2e',
-                                maxHeight: '80px',
-                                lineHeight: 1.45,
-                            } }), _jsx(IconButton, { label: "Like", disabled: !activeUser, children: _jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "#888", strokeWidth: "1.8", children: _jsx("path", { d: "M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3" }) }) }), _jsx(IconButton, { label: "Attach", disabled: !activeUser, children: _jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "#888", strokeWidth: "1.8", children: _jsx("path", { d: "M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" }) }) }), _jsx(IconButton, { label: "Emoji", disabled: !activeUser, children: _jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "#888", strokeWidth: "1.8", children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("path", { d: "M8 14s1.5 2 4 2 4-2 4-2M9 9h.01M15 9h.01" })] }) })] })] }));
-    }
-    if (!activeUser) {
-        return (_jsxs("div", { style: {
-                flex: 1,
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-                justifyContent: 'center',
-                fontFamily,
-                gap: '16px',
-                padding: '24px',
-                textAlign: 'center',
-            }, children: [_jsx("div", { style: {
-                        width: '80px',
-                        height: '80px',
-                        borderRadius: '50%',
-                        backgroundColor: `${primaryColor}12`,
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                    }, children: _jsx("svg", { width: "36", height: "36", viewBox: "0 0 24 24", fill: "none", 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", stroke: primaryColor, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", fill: `${primaryColor}15` }) }) }), _jsxs("div", { children: [_jsx("p", { style: {
-                                margin: '0 0 6px',
-                                fontWeight: 700,
-                                fontSize: '16px',
-                                color: '#1a1a2e',
-                                letterSpacing: '-0.02em',
-                            }, children: "Select a conversation" }), _jsx("p", { style: { margin: 0, fontSize: '13px', color: '#aaa', lineHeight: 1.6 }, children: "Choose someone from the list to start chatting" })] })] }));
-    }
-    const initials = activeUser.name
-        .split(' ')
-        .map((n) => n[0])
-        .join('')
-        .toUpperCase()
-        .slice(0, 2);
-    return (_jsxs("div", { style: {
-            flex: 1,
-            display: 'flex',
-            flexDirection: 'column',
-            fontFamily,
-            overflow: 'hidden',
-        }, children: [_jsxs("div", { style: {
-                    padding: '14px 20px',
-                    borderBottom: '1px solid #f0f0f5',
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: '12px',
-                    background: '#fafafa',
-                }, children: [_jsx("div", { style: {
-                            width: '38px',
-                            height: '38px',
-                            borderRadius: '50%',
-                            backgroundColor: primaryColor,
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            color: '#fff',
-                            fontSize: '13px',
-                            fontWeight: 700,
-                        }, children: initials }), _jsxs("div", { children: [_jsx("div", { style: { fontWeight: 700, fontSize: '14px', color: '#1a1a2e' }, children: activeUser.name }), _jsxs("div", { style: { fontSize: '12px', color: '#aaa', display: 'flex', alignItems: 'center', gap: '5px' }, children: [_jsx("span", { style: {
-                                            width: '6px',
-                                            height: '6px',
-                                            borderRadius: '50%',
-                                            backgroundColor: '#4caf50',
-                                            display: 'inline-block',
-                                        } }), "Online"] })] })] }), _jsxs("div", { style: {
-                    flex: 1,
-                    overflowY: 'auto',
-                    padding: '20px 16px',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    gap: '10px',
-                    backgroundColor: '#f8f8fc',
-                }, children: [messages.length === 0 ? (_jsxs("div", { style: {
-                            textAlign: 'center',
-                            color: '#ccc',
-                            fontSize: '13px',
-                            marginTop: 'auto',
-                            marginBottom: 'auto',
-                        }, children: ["Say hello to ", activeUser.name, "! \uD83D\uDC4B"] })) : (messages.map((msg) => (_jsx(MessageBubble, { message: msg, primaryColor: primaryColor }, msg.id)))), _jsx("div", { ref: messagesEndRef })] }), _jsxs("div", { style: {
-                    padding: '12px 16px',
-                    borderTop: '1px solid #f0f0f5',
-                    backgroundColor: '#fff',
-                    display: 'flex',
-                    alignItems: 'flex-end',
-                    gap: '10px',
-                }, children: [_jsx("textarea", { ref: inputRef, value: inputText, onChange: (e) => setInputText(e.target.value), onKeyDown: handleKeyDown, placeholder: "Type a message... (Enter to send)", rows: 1, style: {
-                            flex: 1,
-                            resize: 'none',
-                            border: '1.5px solid #eee',
-                            borderRadius: '12px',
-                            padding: '10px 14px',
-                            fontFamily,
-                            fontSize: '14px',
-                            outline: 'none',
-                            lineHeight: '1.5',
-                            maxHeight: '90px',
-                            overflowY: 'auto',
-                            transition: 'border-color 0.2s',
-                            color: '#1a1a2e',
-                        }, onFocus: (e) => {
-                            e.target.style.borderColor = primaryColor;
-                        }, onBlur: (e) => {
-                            e.target.style.borderColor = '#eee';
-                        } }), _jsx("button", { onClick: handleSend, disabled: !inputText.trim(), "aria-label": "Send message", style: {
-                            width: '42px',
-                            height: '42px',
-                            borderRadius: '50%',
-                            backgroundColor: inputText.trim() ? primaryColor : '#eee',
-                            border: 'none',
-                            cursor: inputText.trim() ? 'pointer' : 'not-allowed',
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            flexShrink: 0,
-                            transition: 'all 0.2s ease',
-                        }, children: _jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M22 2L11 13M22 2L15 22L11 13L2 9L22 2Z", stroke: inputText.trim() ? '#fff' : '#bbb', strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] })] }));
-};
-const IconButton = ({ label, disabled, children }) => (_jsx("button", { type: "button", "aria-label": label, disabled: disabled, style: {
-        background: 'transparent',
-        border: 'none',
-        padding: '6px',
-        cursor: disabled ? 'not-allowed' : 'pointer',
-        opacity: disabled ? 0.45 : 1,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-    }, children: children }));
-const MessageBubble = ({ message, primaryColor }) => {
-    const isMe = message.senderId === 'me';
-    const time = new Date(message.timestamp).toLocaleTimeString([], {
-        hour: '2-digit',
-        minute: '2-digit',
-    });
-    return (_jsxs("div", { style: {
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: isMe ? 'flex-end' : 'flex-start',
-            gap: '3px',
-        }, children: [_jsx("div", { style: {
-                    maxWidth: '78%',
-                    padding: '10px 14px',
-                    borderRadius: isMe ? '18px 18px 4px 18px' : '18px 18px 18px 4px',
-                    backgroundColor: isMe ? primaryColor : '#fff',
-                    color: isMe ? '#fff' : '#1a1a2e',
-                    fontSize: '14px',
-                    lineHeight: '1.5',
-                    boxShadow: '0 1px 3px rgba(0,0,0,0.08)',
-                    wordBreak: 'break-word',
-                }, children: message.text }), _jsx("span", { style: { fontSize: '11px', color: '#bbb', paddingLeft: '4px', paddingRight: '4px' }, children: time })] }));
-};

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

@@ -1,9 +0,0 @@
-import React from 'react';
-import { ChatWidgetTheme } from '../../types';
-interface ChatButtonProps {
-    isOpen: boolean;
-    onClick: () => void;
-    theme?: ChatWidgetTheme;
-}
-export declare const ChatButton: React.FC<ChatButtonProps>;
-export {};

package/dist/components/ChatButton/index.js

@@ -1,17 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { mergeTheme } from '../../utils/theme';
-export const ChatButton = ({ isOpen, onClick, theme, }) => {
-    const t = mergeTheme(theme);
-    const positionStyle = t.buttonPosition === 'bottom-left'
-        ? { left: '24px', right: 'auto' }
-        : { right: '24px', left: 'auto' };
-    return (_jsx("button", { onClick: onClick, "aria-label": isOpen ? 'Close chat' : t.buttonLabel, style: Object.assign(Object.assign({ position: 'fixed', bottom: '24px' }, positionStyle), { zIndex: 9999, display: 'flex', alignItems: 'center', gap: '10px', padding: isOpen ? '14px' : '14px 22px', backgroundColor: t.buttonColor, color: t.buttonTextColor, border: 'none', borderRadius: '50px', cursor: 'pointer', fontFamily: t.fontFamily, fontSize: '15px', fontWeight: 600, boxShadow: `0 8px 32px ${t.buttonColor}55`, transition: 'all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)', transform: isOpen ? 'scale(0.95)' : 'scale(1)', letterSpacing: '0.01em', minWidth: isOpen ? '52px' : 'auto', justifyContent: 'center' }), onMouseEnter: (e) => {
-            e.currentTarget.style.transform = 'scale(1.06) translateY(-2px)';
-            e.currentTarget.style.boxShadow = `0 12px 40px ${t.buttonColor}77`;
-        }, onMouseLeave: (e) => {
-            e.currentTarget.style.transform = isOpen ? 'scale(0.95)' : 'scale(1)';
-            e.currentTarget.style.boxShadow = `0 8px 32px ${t.buttonColor}55`;
-        }, children: isOpen ? (_jsx(CloseIcon, { color: t.buttonTextColor })) : (_jsxs(_Fragment, { children: [_jsx(ChatIcon, { color: t.buttonTextColor }), _jsx("span", { children: t.buttonLabel })] })) }));
-};
-const ChatIcon = ({ color }) => (_jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", 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", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }) }));
-const CloseIcon = ({ color }) => (_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: color, strokeWidth: "2.5", strokeLinecap: "round" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18", stroke: color, strokeWidth: "2.5", strokeLinecap: "round" })] }));

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

@@ -1,10 +0,0 @@
-import React from 'react';
-import { ChatConfig, ChatWidgetTheme } from '../../types';
-interface ChatWindowProps {
-    config: ChatConfig;
-    theme?: ChatWidgetTheme;
-    buttonPosition: 'bottom-right' | 'bottom-left';
-    onClose: () => void;
-}
-export declare const ChatWindow: React.FC<ChatWindowProps>;
-export {};

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 })] }))] }));
-};