ajaxter-chat 3.0.4 → 3.0.6

package/dist/components/HomeScreen/index.js

@@ -1,55 +1,134 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const HomeScreen = ({ config, onNavigate }) => {
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { SlideNavMenu } from '../SlideNavMenu';
+export const HomeScreen = ({ config, onNavigate, tickets }) => {
+    var _a;
+    const [menuOpen, setMenuOpen] = useState(false);
     const showSupport = config.chatType === 'SUPPORT' || config.chatType === 'BOTH';
     const showChat = config.chatType === 'CHAT' || config.chatType === 'BOTH';
-    const cards = [
-        showSupport && {
-            key: 'support',
-            icon: '🛠',
-            title: 'Need Support',
-            subtitle: 'We typically reply in a few minutes',
-            onClick: () => onNavigate('support'),
-        },
-        showChat && {
-            key: 'conversation',
-            icon: '💬',
-            title: 'New Conversation',
-            subtitle: 'With your colleague',
-            onClick: () => onNavigate('conversation'),
-        },
-        {
-            key: 'ticket',
-            icon: '🎫',
-            title: 'Raise Ticket',
-            subtitle: 'For major changes',
-            onClick: () => onNavigate('ticket'),
-        },
-    ].filter(Boolean);
-    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', height: '100%' }, children: [_jsxs("div", { style: {
-                    background: `linear-gradient(145deg, ${config.primaryColor}, ${config.primaryColor}dd)`,
-                    padding: '36px 24px 52px',
+    const viewerIsDev = config.viewerType === 'developer';
+    const continueItems = tickets.slice(0, 2);
+    const handleCallUs = () => {
+        var _a;
+        const raw = (_a = config.supportPhone) === null || _a === void 0 ? void 0 : _a.trim();
+        if (!raw)
+            return;
+        window.location.href = `tel:${raw.replace(/\s/g, '')}`;
+    };
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', height: '100%', position: 'relative', overflow: 'hidden', background: '#fafbfc' }, children: [_jsx(SlideNavMenu, { open: menuOpen, onClose: () => setMenuOpen(false), primaryColor: config.primaryColor, chatType: config.chatType, viewerType: (_a = config.viewerType) !== null && _a !== void 0 ? _a : 'user', onSelect: onNavigate }), _jsx("div", { style: {
                     flexShrink: 0,
-                    position: 'relative',
-                    overflow: 'hidden',
-                }, children: [_jsx("div", { style: { position: 'absolute', top: -40, right: -40, width: 140, height: 140, borderRadius: '50%', background: 'rgba(255,255,255,0.07)' } }), _jsx("div", { style: { position: 'absolute', bottom: -20, left: -20, width: 90, height: 90, borderRadius: '50%', background: 'rgba(255,255,255,0.05)' } }), _jsx("h1", { style: { margin: '0 0 8px', fontSize: 26, fontWeight: 800, color: '#fff', letterSpacing: '-0.03em' }, children: config.welcomeTitle }), _jsx("p", { style: { margin: 0, fontSize: 14, color: 'rgba(255,255,255,0.85)', lineHeight: 1.6 }, children: config.welcomeSubtitle })] }), _jsx("div", { style: { flex: 1, overflowY: 'auto', padding: '0 16px 20px', marginTop: -28, display: 'flex', flexDirection: 'column', gap: 10 }, children: cards.map((card, i) => (_jsxs("button", { onClick: card.onClick, style: {
-                        width: '100%', background: '#fff', border: 'none', borderRadius: 14,
-                        padding: '18px 20px', display: 'flex', alignItems: 'center',
-                        justifyContent: 'space-between', cursor: 'pointer', textAlign: 'left',
-                        boxShadow: '0 2px 14px rgba(0,0,0,0.10)',
-                        animation: `cw-fadeUp 0.35s ease both`,
-                        animationDelay: `${i * 0.08}s`,
-                        transition: 'transform 0.15s, box-shadow 0.15s',
-                    }, onMouseEnter: e => {
-                        e.currentTarget.style.transform = 'translateY(-2px)';
-                        e.currentTarget.style.boxShadow = '0 8px 24px rgba(0,0,0,0.14)';
-                    }, onMouseLeave: e => {
-                        e.currentTarget.style.transform = 'translateY(0)';
-                        e.currentTarget.style.boxShadow = '0 2px 14px rgba(0,0,0,0.10)';
-                    }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 14 }, children: [_jsx("div", { style: {
-                                        width: 44, height: 44, borderRadius: 12,
-                                        backgroundColor: `${config.primaryColor}14`,
-                                        display: 'flex', alignItems: 'center', justifyContent: 'center',
-                                        fontSize: 20, flexShrink: 0,
-                                    }, children: card.icon }), _jsxs("div", { children: [_jsx("div", { style: { fontWeight: 700, fontSize: 15, color: '#1a2332', marginBottom: 2 }, children: card.title }), _jsx("div", { style: { fontSize: 12, color: '#7b8fa1' }, children: card.subtitle })] })] }), _jsx(SendArrow, { color: config.primaryColor })] }, card.key))) })] }));
+                    padding: '14px 16px 10px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 12,
+                    background: '#fff',
+                    borderBottom: '1px solid #eef0f5',
+                }, children: _jsxs("button", { type: "button", "aria-label": "Open menu", onClick: () => setMenuOpen(true), style: {
+                        width: 40,
+                        height: 40,
+                        borderRadius: 10,
+                        border: 'none',
+                        background: '#f1f5f9',
+                        cursor: 'pointer',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        gap: 5,
+                        flexShrink: 0,
+                    }, children: [_jsx("span", { style: { width: 18, height: 2, background: '#334155', borderRadius: 1 } }), _jsx("span", { style: { width: 18, height: 2, background: '#334155', borderRadius: 1 } }), _jsx("span", { style: { width: 18, height: 2, background: '#334155', borderRadius: 1 } })] }) }), _jsxs("div", { className: "cw-scroll", style: { flex: 1, overflowY: 'auto', padding: '20px 18px 28px' }, children: [_jsx("h1", { style: {
+                            margin: '0 0 8px',
+                            fontSize: 24,
+                            fontWeight: 800,
+                            color: '#0f172a',
+                            letterSpacing: '-0.03em',
+                            lineHeight: 1.2,
+                        }, children: config.welcomeTitle }), _jsx("p", { style: { margin: '0 0 28px', fontSize: 14, color: '#64748b', lineHeight: 1.55 }, children: config.welcomeSubtitle }), _jsx("h2", { style: { margin: '0 0 12px', fontSize: 15, fontWeight: 800, color: '#0f172a' }, children: "Continue Conversations" }), _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 28 }, children: continueItems.length > 0 ? (continueItems.map(t => (_jsx("button", { type: "button", onClick: () => onNavigate('ticket'), style: {
+                                width: '100%',
+                                textAlign: 'left',
+                                padding: '14px 16px',
+                                borderRadius: 14,
+                                border: 'none',
+                                background: '#e0f2fe',
+                                color: '#0369a1',
+                                fontSize: 14,
+                                fontWeight: 600,
+                                cursor: 'pointer',
+                                boxShadow: '0 1px 3px rgba(0,0,0,0.06)',
+                            }, children: t.title }, t.id)))) : (_jsxs(_Fragment, { children: [_jsx("div", { style: {
+                                        padding: '14px 16px',
+                                        borderRadius: 14,
+                                        background: '#e0f2fe',
+                                        color: '#64748b',
+                                        fontSize: 14,
+                                        fontWeight: 500,
+                                    }, children: "No open tickets yet" }), _jsx("div", { style: {
+                                        padding: '14px 16px',
+                                        borderRadius: 14,
+                                        background: '#e0f2fe',
+                                        color: '#64748b',
+                                        fontSize: 14,
+                                        fontWeight: 500,
+                                    }, children: "Start via Raise ticket below" })] })) }), _jsx("h2", { style: { margin: '0 0 12px', fontSize: 15, fontWeight: 800, color: '#0f172a' }, children: viewerIsDev ? 'Support tools' : 'Talk to our experts' }), showSupport && (_jsxs("button", { type: "button", onClick: () => onNavigate('support'), style: {
+                            width: '100%',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            gap: 10,
+                            padding: '14px 18px',
+                            marginBottom: showChat ? 10 : 14,
+                            borderRadius: 14,
+                            border: 'none',
+                            background: '#ede9fe',
+                            color: '#5b21b6',
+                            fontSize: 15,
+                            fontWeight: 700,
+                            cursor: 'pointer',
+                            boxShadow: '0 2px 8px rgba(91,33,182,0.12)',
+                        }, children: [_jsx("span", { style: { fontSize: 18 }, children: "\uD83D\uDC64" }), viewerIsDev ? 'Provide Support' : 'Support'] })), showChat && showSupport && (_jsx("button", { type: "button", onClick: () => onNavigate('conversation'), style: {
+                            width: '100%',
+                            padding: '12px 16px',
+                            marginBottom: 14,
+                            borderRadius: 12,
+                            border: '1.5px solid #e9d5ff',
+                            background: '#fff',
+                            color: '#6d28d9',
+                            fontSize: 14,
+                            fontWeight: 600,
+                            cursor: 'pointer',
+                        }, children: viewerIsDev ? 'Chat with a developer' : 'New Conversation' })), showChat && !showSupport && (_jsxs("button", { type: "button", onClick: () => onNavigate('conversation'), style: {
+                            width: '100%',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            gap: 10,
+                            padding: '14px 18px',
+                            marginBottom: 14,
+                            borderRadius: 14,
+                            border: 'none',
+                            background: '#ede9fe',
+                            color: '#5b21b6',
+                            fontSize: 15,
+                            fontWeight: 700,
+                            cursor: 'pointer',
+                        }, children: [_jsx("span", { style: { fontSize: 18 }, children: "\uD83D\uDCAC" }), "New Conversation"] })), _jsxs("div", { style: {
+                            borderRadius: 18,
+                            padding: '22px 20px 20px',
+                            background: 'linear-gradient(145deg, #fce7f3 0%, #e9d5ff 45%, #ddd6fe 100%)',
+                            position: 'relative',
+                            overflow: 'hidden',
+                        }, children: [_jsx("div", { style: { position: 'absolute', top: -20, right: -20, width: 100, height: 100, borderRadius: '50%', background: 'rgba(255,255,255,0.35)' } }), _jsx("p", { style: { margin: '0 0 16px', fontSize: 15, fontWeight: 700, color: '#4c1d95', lineHeight: 1.45, position: 'relative' }, children: "Need specialized help? Our teams are ready to assist you with any questions." }), _jsxs("button", { type: "button", onClick: handleCallUs, disabled: !config.supportPhone, style: {
+                                    display: 'inline-flex',
+                                    alignItems: 'center',
+                                    gap: 8,
+                                    padding: '10px 18px',
+                                    borderRadius: 12,
+                                    border: 'none',
+                                    background: config.supportPhone ? config.primaryColor : '#94a3b8',
+                                    color: '#fff',
+                                    fontSize: 14,
+                                    fontWeight: 700,
+                                    cursor: config.supportPhone ? 'pointer' : 'not-allowed',
+                                    position: 'relative',
+                                }, children: [_jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 10.8a19.79 19.79 0 01-3.07-8.68A2 2 0 012 0h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.09 7.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 14.92v2z", fill: "#fff" }) }), "Call Us"] })] })] })] }));
 };
-const SendArrow = ({ color }) => (_jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: _jsx("path", { d: "M5 12h14M12 5l7 7-7 7", stroke: color, strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round" }) }));

package/dist/components/SlideNavMenu.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ChatType, UserListContext } from '../types';
+export interface SlideNavMenuProps {
+    open: boolean;
+    onClose: () => void;
+    primaryColor: string;
+    chatType: ChatType;
+    /** When `developer`, relabels the first two entries for staff */
+    viewerType?: 'user' | 'developer';
+    onSelect: (ctx: UserListContext | 'ticket') => void;
+    /** When set, shows “Back to home” at the bottom (e.g. chat screen) */
+    onBackHome?: () => void;
+}
+export declare const SlideNavMenu: React.FC<SlideNavMenuProps>;

package/dist/components/SlideNavMenu.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export const SlideNavMenu = ({ open, onClose, primaryColor, chatType, viewerType = 'user', onSelect, onBackHome, }) => {
+    const showSupport = chatType === 'SUPPORT' || chatType === 'BOTH';
+    const showChat = chatType === 'CHAT' || chatType === 'BOTH';
+    const isStaff = viewerType === 'developer';
+    const items = [
+        showSupport ? { key: 'support', icon: '🛠', title: isStaff ? 'Provide Support' : 'Need Support' } : null,
+        showChat ? { key: 'conversation', icon: '💬', title: isStaff ? 'Chat with developer' : 'New Conversation' } : null,
+        { key: 'ticket', icon: '🎫', title: 'Raise ticket' },
+    ];
+    if (!open)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", "aria-label": "Close menu", onClick: onClose, style: {
+                    position: 'absolute',
+                    inset: 0,
+                    zIndex: 200,
+                    background: 'rgba(15,23,42,0.45)',
+                    border: 'none',
+                    cursor: 'pointer',
+                    animation: 'cw-fadeIn 0.2s ease',
+                } }), _jsx("style", { children: `@keyframes cw-fadeIn { from { opacity: 0; } to { opacity: 1; } }` }), _jsxs("nav", { style: {
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    bottom: 0,
+                    width: 'min(300px, 88%)',
+                    zIndex: 210,
+                    background: '#fff',
+                    boxShadow: '8px 0 32px rgba(0,0,0,0.12)',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    padding: '20px 0 16px',
+                    animation: 'cw-slideNavIn 0.28s cubic-bezier(0.22, 1, 0.36, 1)',
+                }, children: [_jsx("style", { children: `@keyframes cw-slideNavIn { from { transform: translateX(-100%); } to { transform: translateX(0); } }` }), _jsx("div", { style: { padding: '0 20px 16px', borderBottom: '1px solid #eef0f5' }, children: _jsx("p", { style: { margin: 0, fontSize: 13, fontWeight: 700, color: '#64748b', letterSpacing: '0.04em' }, children: "Menu" }) }), _jsx("div", { style: { flex: 1, overflowY: 'auto', padding: '12px 12px' }, children: items.filter(Boolean).map(item => {
+                            const it = item;
+                            return (_jsxs("button", { type: "button", onClick: () => {
+                                    onSelect(it.key);
+                                    onClose();
+                                }, style: {
+                                    width: '100%',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    gap: 12,
+                                    padding: '14px 14px',
+                                    marginBottom: 6,
+                                    border: 'none',
+                                    borderRadius: 12,
+                                    background: '#f8fafc',
+                                    cursor: 'pointer',
+                                    textAlign: 'left',
+                                    fontSize: 15,
+                                    fontWeight: 600,
+                                    color: '#1e293b',
+                                    transition: 'background 0.15s',
+                                }, onMouseEnter: e => {
+                                    e.currentTarget.style.background = `${primaryColor}12`;
+                                }, onMouseLeave: e => {
+                                    e.currentTarget.style.background = '#f8fafc';
+                                }, children: [_jsx("span", { style: { fontSize: 20 }, children: it.icon }), it.title] }, it.key));
+                        }) }), onBackHome && (_jsx("div", { style: { padding: '0 12px', borderTop: '1px solid #eef0f5', paddingTop: 12 }, children: _jsx("button", { type: "button", onClick: () => {
+                                onBackHome();
+                                onClose();
+                            }, style: {
+                                width: '100%',
+                                padding: '12px 14px',
+                                border: '1.5px solid #e2e8f0',
+                                borderRadius: 12,
+                                background: '#fff',
+                                fontSize: 14,
+                                fontWeight: 600,
+                                color: '#475569',
+                                cursor: 'pointer',
+                            }, children: "\u2190 Back to home" }) }))] })] }));
+};

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

@@ -4,6 +4,8 @@ interface UserListScreenProps {
     context: UserListContext;
     users: ChatUser[];
     primaryColor: string;
+    /** `developer` = staff using the widget (lists customers vs teammates) */
+    viewerType?: 'user' | 'developer';
     onBack: () => void;
     onSelectUser: (user: ChatUser) => void;
 }

package/dist/components/UserListScreen/index.js

@@ -1,8 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { avatarColor, initials } from '../../utils/chat';
-export const UserListScreen = ({ context, users, primaryColor, onBack, onSelectUser, }) => {
-    const title = context === 'support' ? 'Need Support' : 'New Conversation';
-    const subtitle = context === 'support' ? 'Choose a support agent' : 'Choose a colleague';
+export const UserListScreen = ({ context, users, primaryColor, viewerType = 'user', onBack, onSelectUser, }) => {
+    const isStaff = viewerType === 'developer';
+    const title = context === 'support'
+        ? (isStaff ? 'Provide Support' : 'Need Support')
+        : (isStaff ? 'Developers' : 'New Conversation');
+    const subtitle = context === 'support'
+        ? (isStaff ? 'All chat users — choose who to help' : 'Choose a support agent')
+        : (isStaff ? 'Chat with another developer or coordinate handoff' : 'Choose a colleague');
     return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', height: '100%', animation: 'cw-slideIn 0.22s ease' }, children: [_jsxs("div", { style: { background: `linear-gradient(135deg,${primaryColor},${primaryColor}cc)`, padding: '14px 18px', display: 'flex', alignItems: 'center', gap: 12, flexShrink: 0 }, children: [_jsx(BackBtn, { onClick: onBack }), _jsxs("div", { children: [_jsx("div", { style: { fontWeight: 700, fontSize: 16, color: '#fff' }, children: title }), _jsx("div", { style: { fontSize: 12, color: 'rgba(255,255,255,0.8)' }, children: subtitle })] })] }), _jsx("div", { style: { flex: 1, overflowY: 'auto' }, children: users.length === 0 ? (_jsx(Empty, {})) : users.map((u, i) => (_jsxs("button", { onClick: () => onSelectUser(u), style: {
                         width: '100%', padding: '13px 18px', display: 'flex',
                         alignItems: 'center', gap: 13, background: 'transparent',

package/dist/index.d.ts

@@ -9,6 +9,7 @@ export { CallScreen } from './components/CallScreen';
 export { MaintenanceView } from './components/MaintenanceView';
 export { BottomTabs } from './components/Tabs/BottomTabs';
 export { EmojiPicker } from './components/EmojiPicker';
+export { SlideNavMenu } from './components/SlideNavMenu';
 export { useChat } from './hooks/useChat';
 export { useWebRTC } from './hooks/useWebRTC';
 export { useRemoteConfig } from './hooks/useRemoteConfig';

package/dist/index.js

@@ -9,6 +9,7 @@ export { CallScreen } from './components/CallScreen';
 export { MaintenanceView } from './components/MaintenanceView';
 export { BottomTabs } from './components/Tabs/BottomTabs';
 export { EmojiPicker } from './components/EmojiPicker';
+export { SlideNavMenu } from './components/SlideNavMenu';
 export { useChat } from './hooks/useChat';
 export { useWebRTC } from './hooks/useWebRTC';
 export { useRemoteConfig } from './hooks/useRemoteConfig';

package/dist/types/index.d.ts

@@ -8,6 +8,21 @@ export interface WidgetConfig {
     buttonPosition: 'bottom-right' | 'bottom-left';
     welcomeTitle: string;
     welcomeSubtitle: string;
+    /** Shown in footer (e.g. branch / location name) */
+    branch?: string;
+    /** Optional label above branch (e.g. "Answers by") */
+    footerPoweredBy?: string;
+    /** Shown on home “Call Us” (tel: link) */
+    supportPhone?: string;
+    /**
+     * Who is using the widget. `developer` = support staff: “Need Support” becomes “Provide Support”
+     * and lists customers; “New Conversation” lists other developers (excl. viewerUid).
+     */
+    viewerType?: 'user' | 'developer';
+    /** Current user id when viewerType is developer — excluded from developer pick lists */
+    viewerUid?: string;
+    /** Display name for transfer notes (optional) */
+    viewerName?: string;
     allowVoiceMessage: boolean;
     allowAttachment: boolean;
     allowEmoji: boolean;
@@ -54,7 +69,11 @@ export interface ChatMessage {
     status: 'sent' | 'delivered' | 'read';
     attachmentName?: string;
     attachmentSize?: string;
+    /** Blob URL for attachment download (local send) */
+    attachmentUrl?: string;
     voiceDuration?: number;
+    /** Blob URL for in-bubble audio playback (local recording) */
+    voiceUrl?: string;
 }
 export interface Ticket {
     id: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ajaxter-chat",
-  "version": "3.0.4",
+  "version": "3.0.6",
   "description": "Drawer-based chat widget with support chat, tickets, WebRTC calling, voice messages, block list, and transcript download.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/public/chatData.json

@@ -9,6 +9,12 @@
     "buttonPosition": "bottom-right",
     "welcomeTitle": "Hi there 👋",
     "welcomeSubtitle": "Need help? Start a conversation:",
+    "viewerType": "user",
+    "viewerUid": "",
+    "viewerName": "",
+    "branch": "Mumbai HQ",
+    "footerPoweredBy": "Answers by",
+    "supportPhone": "+919876543210",
     "allowVoiceMessage": true,
     "allowAttachment": true,
     "allowEmoji": true,