ajaxter-chat 1.0.3 → 2.0.1

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