ajaxter-chat 3.0.6 → 3.0.7

package/dist/components/ChatScreen/index.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useState, useRef, useEffect, useCallback } from 'react';
 import { avatarColor, initials, formatTime, formatDate, generateTranscript, downloadText } from '../../utils/chat';
+import { shouldShowPrivacyNotice, dismissPrivacyNotice } from '../../utils/privacyConsent';
 import { EmojiPicker } from '../EmojiPicker';
 import { SlideNavMenu } from '../SlideNavMenu';
 export const ChatScreen = ({ activeUser, messages, config, isPaused, isReported, isBlocked, onSend, onBack, onClose, onTogglePause, onReport, onBlock, onStartCall, onNavAction, otherDevelopers = [], onTransferToDeveloper, }) => {
@@ -13,6 +14,7 @@ export const ChatScreen = ({ activeUser, messages, config, isPaused, isReported,
     const [isRecording, setIsRecording] = useState(false);
     const [recordSec, setRecordSec] = useState(0);
     const [showConfirm, setShowConfirm] = useState(null);
+    const [showPrivacy, setShowPrivacy] = useState(false);
     const endRef = useRef(null);
     const inputRef = useRef(null);
     const fileRef = useRef(null);
@@ -20,6 +22,24 @@ export const ChatScreen = ({ activeUser, messages, config, isPaused, isReported,
     const mediaRecorder = useRef(null);
     const recordChunks = useRef([]);
     useEffect(() => { var _a; (_a = endRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'smooth' }); }, [messages]);
+    const privacyEnabled = config.showPrivacyNotice !== false;
+    useEffect(() => {
+        if (!privacyEnabled)
+            return;
+        setShowPrivacy(shouldShowPrivacyNotice(config.id));
+    }, [config.id, privacyEnabled]);
+    useEffect(() => {
+        if (!privacyEnabled)
+            return;
+        const id = window.setInterval(() => {
+            setShowPrivacy(shouldShowPrivacyNotice(config.id));
+        }, 60000);
+        return () => window.clearInterval(id);
+    }, [config.id, privacyEnabled]);
+    const dismissPrivacy = useCallback(() => {
+        dismissPrivacyNotice(config.id);
+        setShowPrivacy(false);
+    }, [config.id]);
     const handleSend = useCallback(() => {
         var _a;
         if (!text.trim() || isPaused || isBlocked)
@@ -105,7 +125,30 @@ export const ChatScreen = ({ activeUser, messages, config, isPaused, isReported,
     return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', height: '100%', animation: 'cw-slideIn 0.22s ease', position: 'relative', overflow: 'hidden' }, children: [_jsx(SlideNavMenu, { open: slideMenuOpen, onClose: () => setSlideMenuOpen(false), primaryColor: config.primaryColor, chatType: config.chatType, viewerType: (_a = config.viewerType) !== null && _a !== void 0 ? _a : 'user', onSelect: onNavAction, onBackHome: onBack }), _jsxs("div", { style: {
                     background: `linear-gradient(135deg,${config.primaryColor},${config.primaryColor}cc)`,
                     padding: '10px 12px', display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0,
-                }, children: [_jsx("button", { type: "button", onClick: () => setSlideMenuOpen(true), style: hdrBtn, "aria-label": "Open menu", children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: [_jsx("line", { x1: "3", y1: "6", x2: "21", y2: "6", stroke: "#fff", strokeWidth: "2.2", strokeLinecap: "round" }), _jsx("line", { x1: "3", y1: "12", x2: "21", y2: "12", stroke: "#fff", strokeWidth: "2.2", strokeLinecap: "round" }), _jsx("line", { x1: "3", y1: "18", x2: "21", y2: "18", stroke: "#fff", strokeWidth: "2.2", strokeLinecap: "round" })] }) }), _jsxs("div", { style: { width: 36, height: 36, borderRadius: '50%', backgroundColor: peerAvatar, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontWeight: 700, fontSize: 13, flexShrink: 0, position: 'relative' }, children: [peerInit, _jsx("span", { style: { position: 'absolute', bottom: 0, right: 0, width: 9, height: 9, borderRadius: '50%', border: '2px solid', borderColor: 'transparent', backgroundColor: activeUser.status === 'online' ? '#22c55e' : activeUser.status === 'away' ? '#f59e0b' : '#9ca3af' } })] }), _jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [_jsx("div", { style: { fontWeight: 700, fontSize: 14, color: '#fff', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: activeUser.name }), _jsx("div", { style: { fontSize: 11, color: 'rgba(255,255,255,0.8)' }, children: activeUser.designation })] }), _jsx("span", { style: { fontSize: 13, fontWeight: 700, color: '#fff', opacity: 0.95, flexShrink: 0 }, children: headerRole }), config.allowWebCall && (_jsx("button", { type: "button", onClick: () => onStartCall(false), style: hdrBtn, title: "Voice Call", children: _jsx("svg", { width: "17", height: "17", 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" }) }) })), _jsx("button", { type: "button", onClick: () => setShowMenu(v => !v), style: Object.assign(Object.assign({}, hdrBtn), { background: 'rgba(255,255,255,0.2)' }), title: "More options", "aria-expanded": showMenu, children: _jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: [_jsx("circle", { cx: "12", cy: "5", r: "1.5", fill: "#fff" }), _jsx("circle", { cx: "12", cy: "12", r: "1.5", fill: "#fff" }), _jsx("circle", { cx: "12", cy: "19", r: "1.5", fill: "#fff" })] }) })] }), showMenu && (_jsxs("div", { style: { position: 'absolute', top: 52, right: 12, zIndex: 120, background: '#fff', borderRadius: 12, boxShadow: '0 8px 30px rgba(0,0,0,0.16)', padding: '6px', minWidth: 200, animation: 'cw-fadeUp 0.18s ease' }, children: [config.allowTranscriptDownload && (_jsx(MenuItem, { icon: "\uD83D\uDCE5", label: "Download Transcript", onClick: handleTranscript })), viewerIsDev && activeUser.type === 'user' && otherDevelopers.length > 0 && onTransferToDeveloper && (_jsx(MenuItem, { icon: "\uD83D\uDD00", label: "Transfer to developer", onClick: () => { setShowMenu(false); setTransferOpen(true); } })), _jsx(MenuItem, { icon: isPaused ? '▶️' : '⏸', label: isPaused ? 'Resume Chat' : 'Pause Chat', onClick: () => { setShowMenu(false); setShowConfirm('pause'); } }), config.allowReport && !isReported && (_jsx(MenuItem, { icon: "\u26A0\uFE0F", label: "Report Chat", onClick: () => { setShowMenu(false); setShowConfirm('report'); } })), config.allowBlock && activeUser.type === 'user' && !isBlocked && (_jsx(MenuItem, { icon: "\uD83D\uDEAB", label: "Block User", onClick: () => { setShowMenu(false); setShowConfirm('block'); }, danger: true })), _jsx("div", { style: { borderTop: '1px solid #f0f2f5', margin: '4px 0' } }), _jsx(MenuItem, { icon: "\u2715", label: "Close Chat", onClick: onClose })] })), isPaused && (_jsxs("div", { style: { background: '#fef3c7', padding: '8px 16px', fontSize: 12, fontWeight: 600, color: '#92400e', textAlign: 'center', flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }, children: ["\u23F8 Chat is paused \u2014 users cannot send messages", _jsx("button", { type: "button", onClick: onTogglePause, style: { background: '#92400e', color: '#fff', border: 'none', borderRadius: 6, padding: '2px 8px', fontSize: 11, cursor: 'pointer', marginLeft: 4 }, children: "Resume" })] })), isBlocked && (_jsx("div", { style: { background: '#fee2e2', padding: '8px 16px', fontSize: 12, fontWeight: 600, color: '#991b1b', textAlign: 'center', flexShrink: 0 }, children: "\uD83D\uDEAB This user is blocked" })), isReported && (_jsx("div", { style: { background: '#fef3c7', padding: '6px 16px', fontSize: 11, color: '#92400e', textAlign: 'center', flexShrink: 0 }, children: "\u26A0\uFE0F This chat has been reported" })), _jsxs("div", { style: { flex: 1, overflowY: 'auto', padding: '14px', display: 'flex', flexDirection: 'column', gap: 10, background: '#f8f9fc' }, className: "cw-scroll", children: [grouped.map(({ date, msgs }) => (_jsxs(React.Fragment, { children: [_jsx(DateDivider, { label: date }), msgs.map(msg => (_jsx(Bubble, { msg: msg, primaryColor: config.primaryColor }, msg.id)))] }, date))), messages.length === 0 && (_jsxs("div", { style: { margin: 'auto', textAlign: 'center', color: '#c4cad4', fontSize: 13 }, children: [_jsx("div", { style: { fontSize: 28, marginBottom: 8 }, children: "\uD83D\uDCAC" }), "Say hello to ", activeUser.name, "!"] })), _jsx("div", { ref: endRef })] }), _jsxs("div", { style: { borderTop: '1px solid #eef0f5', padding: '10px 12px 8px', background: '#fff', flexShrink: 0, position: 'relative' }, children: [showEmoji && config.allowEmoji && (_jsx(EmojiPicker, { primaryColor: config.primaryColor, onSelect: e => setText(t => t + e), onClose: () => setShowEmoji(false) })), isRecording && (_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8, padding: '8px 12px', background: '#fee2e2', borderRadius: 10 }, children: [_jsx("span", { style: { width: 8, height: 8, borderRadius: '50%', background: '#ef4444', display: 'inline-block', animation: 'cw-pulse 1s infinite' } }), _jsxs("span", { style: { fontSize: 13, color: '#991b1b', fontWeight: 600 }, children: ["Recording ", recordSec, "s"] }), _jsx("button", { type: "button", onClick: stopRecording, style: { marginLeft: 'auto', background: '#ef4444', color: '#fff', border: 'none', borderRadius: 6, padding: '4px 12px', fontSize: 12, cursor: 'pointer', fontWeight: 600 }, children: "Stop & send" })] })), _jsxs("div", { style: {
+                }, children: [_jsx("button", { type: "button", onClick: () => setSlideMenuOpen(true), style: hdrBtn, "aria-label": "Open menu", children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: [_jsx("line", { x1: "3", y1: "6", x2: "21", y2: "6", stroke: "#fff", strokeWidth: "2.2", strokeLinecap: "round" }), _jsx("line", { x1: "3", y1: "12", x2: "21", y2: "12", stroke: "#fff", strokeWidth: "2.2", strokeLinecap: "round" }), _jsx("line", { x1: "3", y1: "18", x2: "21", y2: "18", stroke: "#fff", strokeWidth: "2.2", strokeLinecap: "round" })] }) }), _jsxs("div", { style: { width: 36, height: 36, borderRadius: '50%', backgroundColor: peerAvatar, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontWeight: 700, fontSize: 13, flexShrink: 0, position: 'relative' }, children: [peerInit, _jsx("span", { style: { position: 'absolute', bottom: 0, right: 0, width: 9, height: 9, borderRadius: '50%', border: '2px solid', borderColor: 'transparent', backgroundColor: activeUser.status === 'online' ? '#22c55e' : activeUser.status === 'away' ? '#f59e0b' : '#9ca3af' } })] }), _jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [_jsx("div", { style: { fontWeight: 700, fontSize: 14, color: '#fff', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: activeUser.name }), _jsx("div", { style: { fontSize: 11, color: 'rgba(255,255,255,0.8)' }, children: activeUser.designation })] }), _jsx("span", { style: { fontSize: 13, fontWeight: 700, color: '#fff', opacity: 0.95, flexShrink: 0 }, children: headerRole }), config.allowWebCall && (_jsx("button", { type: "button", onClick: () => onStartCall(false), style: hdrBtn, title: "Voice Call", children: _jsx("svg", { width: "17", height: "17", 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" }) }) })), _jsx("button", { type: "button", onClick: () => setShowMenu(v => !v), style: Object.assign(Object.assign({}, hdrBtn), { background: 'rgba(255,255,255,0.2)' }), title: "More options", "aria-expanded": showMenu, children: _jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: [_jsx("circle", { cx: "12", cy: "5", r: "1.5", fill: "#fff" }), _jsx("circle", { cx: "12", cy: "12", r: "1.5", fill: "#fff" }), _jsx("circle", { cx: "12", cy: "19", r: "1.5", fill: "#fff" })] }) })] }), showMenu && (_jsxs("div", { style: { position: 'absolute', top: 52, right: 12, zIndex: 120, background: '#fff', borderRadius: 12, boxShadow: '0 8px 30px rgba(0,0,0,0.16)', padding: '6px', minWidth: 200, animation: 'cw-fadeUp 0.18s ease' }, children: [config.allowTranscriptDownload && (_jsx(MenuItem, { icon: "\uD83D\uDCE5", label: "Download Transcript", onClick: handleTranscript })), viewerIsDev && activeUser.type === 'user' && otherDevelopers.length > 0 && onTransferToDeveloper && (_jsx(MenuItem, { icon: "\uD83D\uDD00", label: "Transfer to developer", onClick: () => { setShowMenu(false); setTransferOpen(true); } })), _jsx(MenuItem, { icon: isPaused ? '▶️' : '⏸', label: isPaused ? 'Resume Chat' : 'Pause Chat', onClick: () => { setShowMenu(false); setShowConfirm('pause'); } }), config.allowReport && !isReported && (_jsx(MenuItem, { icon: "\u26A0\uFE0F", label: "Report Chat", onClick: () => { setShowMenu(false); setShowConfirm('report'); } })), config.allowBlock && activeUser.type === 'user' && !isBlocked && (_jsx(MenuItem, { icon: "\uD83D\uDEAB", label: "Block User", onClick: () => { setShowMenu(false); setShowConfirm('block'); }, danger: true })), _jsx("div", { style: { borderTop: '1px solid #f0f2f5', margin: '4px 0' } }), _jsx(MenuItem, { icon: "\u2715", label: "Close Chat", onClick: onClose })] })), isPaused && (_jsxs("div", { style: { background: '#fef3c7', padding: '8px 16px', fontSize: 12, fontWeight: 600, color: '#92400e', textAlign: 'center', flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }, children: ["\u23F8 Chat is paused \u2014 users cannot send messages", _jsx("button", { type: "button", onClick: onTogglePause, style: { background: '#92400e', color: '#fff', border: 'none', borderRadius: 6, padding: '2px 8px', fontSize: 11, cursor: 'pointer', marginLeft: 4 }, children: "Resume" })] })), isBlocked && (_jsx("div", { style: { background: '#fee2e2', padding: '8px 16px', fontSize: 12, fontWeight: 600, color: '#991b1b', textAlign: 'center', flexShrink: 0 }, children: "\uD83D\uDEAB This user is blocked" })), isReported && (_jsx("div", { style: { background: '#fef3c7', padding: '6px 16px', fontSize: 11, color: '#92400e', textAlign: 'center', flexShrink: 0 }, children: "\u26A0\uFE0F This chat has been reported" })), _jsxs("div", { style: { flex: 1, overflowY: 'auto', padding: '14px', display: 'flex', flexDirection: 'column', gap: 10, background: '#f8f9fc' }, className: "cw-scroll", children: [grouped.map(({ date, msgs }) => (_jsxs(React.Fragment, { children: [_jsx(DateDivider, { label: date }), msgs.map(msg => (_jsx(Bubble, { msg: msg, primaryColor: config.primaryColor }, msg.id)))] }, date))), messages.length === 0 && (_jsxs("div", { style: { margin: 'auto', textAlign: 'center', color: '#c4cad4', fontSize: 13 }, children: [_jsx("div", { style: { fontSize: 28, marginBottom: 8 }, children: "\uD83D\uDCAC" }), "Say hello to ", activeUser.name, "!"] })), _jsx("div", { ref: endRef })] }), _jsxs("div", { style: { borderTop: '1px solid #eef0f5', padding: '10px 12px 8px', background: '#fff', flexShrink: 0, position: 'relative' }, children: [privacyEnabled && showPrivacy && (_jsxs("div", { style: {
+                            position: 'relative',
+                            marginBottom: 10,
+                            padding: '12px 36px 12px 12px',
+                            borderRadius: 12,
+                            background: '#fff',
+                            border: '1px solid #e8ecf1',
+                            boxShadow: '0 1px 4px rgba(15,23,42,0.06)',
+                        }, children: [_jsx("button", { type: "button", "aria-label": "Dismiss privacy notice", onClick: dismissPrivacy, style: {
+                                    position: 'absolute',
+                                    top: 8,
+                                    right: 8,
+                                    width: 26,
+                                    height: 26,
+                                    borderRadius: '50%',
+                                    border: 'none',
+                                    background: '#f1f5f9',
+                                    cursor: 'pointer',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    padding: 0,
+                                    lineHeight: 1,
+                                }, children: _jsx("span", { style: { fontSize: 14, color: '#475569', fontWeight: 700 }, children: "\u00D7" }) }), _jsxs("p", { style: { margin: 0, fontSize: 12, color: '#64748b', lineHeight: 1.55 }, children: ["By chatting here, you agree we and authorized partners may process, monitor, and record this chat and your data in line with", ' ', config.privacyPolicyUrl ? (_jsx("a", { href: config.privacyPolicyUrl, target: "_blank", rel: "noopener noreferrer", style: { color: config.primaryColor, textDecoration: 'underline', fontWeight: 600 }, children: "Privacy Policy" })) : (_jsx("span", { style: { textDecoration: 'underline', fontWeight: 600 }, children: "Privacy Policy" })), "."] })] })), showEmoji && config.allowEmoji && (_jsx(EmojiPicker, { primaryColor: config.primaryColor, onSelect: e => setText(t => t + e), onClose: () => setShowEmoji(false) })), isRecording && (_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8, padding: '8px 12px', background: '#fee2e2', borderRadius: 10 }, children: [_jsx("span", { style: { width: 8, height: 8, borderRadius: '50%', background: '#ef4444', display: 'inline-block', animation: 'cw-pulse 1s infinite' } }), _jsxs("span", { style: { fontSize: 13, color: '#991b1b', fontWeight: 600 }, children: ["Recording ", recordSec, "s"] }), _jsx("button", { type: "button", onClick: stopRecording, style: { marginLeft: 'auto', background: '#ef4444', color: '#fff', border: 'none', borderRadius: 6, padding: '4px 12px', fontSize: 12, cursor: 'pointer', fontWeight: 600 }, children: "Stop & send" })] })), _jsxs("div", { style: {
                             border: `1.5px solid ${isPaused || isBlocked ? '#e5e7eb' : '#bfdbfe'}`,
                             borderRadius: 16,
                             padding: '10px 12px 8px',

package/dist/components/HomeScreen/index.js

@@ -1,13 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useState, useMemo } from 'react';
 import { SlideNavMenu } from '../SlideNavMenu';
+import { truncateWords } from '../../utils/chat';
 export const HomeScreen = ({ config, onNavigate, tickets }) => {
-    var _a;
+    var _a, _b, _c, _d;
     const [menuOpen, setMenuOpen] = useState(false);
     const showSupport = config.chatType === 'SUPPORT' || config.chatType === 'BOTH';
     const showChat = config.chatType === 'CHAT' || config.chatType === 'BOTH';
     const viewerIsDev = config.viewerType === 'developer';
-    const continueItems = tickets.slice(0, 2);
+    const pendingTickets = useMemo(() => tickets
+        .filter(t => t.status === 'open' || t.status === 'in-progress')
+        .sort((a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime())
+        .slice(0, 5), [tickets]);
+    const brand = ((_a = config.brandName) === null || _a === void 0 ? void 0 : _a.trim()) || 'Ajaxter';
+    const promotionLead = ((_b = config.promotionLead) === null || _b === void 0 ? void 0 : _b.trim()) ||
+        'Need specialized help? Our teams are ready to assist you with any questions.';
+    const tourUrl = (_c = config.websiteTourUrl) === null || _c === void 0 ? void 0 : _c.trim();
     const handleCallUs = () => {
         var _a;
         const raw = (_a = config.supportPhone) === null || _a === void 0 ? void 0 : _a.trim();
@@ -15,7 +23,7 @@ export const HomeScreen = ({ config, onNavigate, tickets }) => {
             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: {
+    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: (_d = config.viewerType) !== null && _d !== void 0 ? _d : 'user', onSelect: onNavigate }), _jsx("div", { style: {
                     flexShrink: 0,
                     padding: '14px 16px 10px',
                     display: 'flex',
@@ -43,7 +51,7 @@ export const HomeScreen = ({ config, onNavigate, tickets }) => {
                             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: {
+                        }, 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: pendingTickets.length > 0 ? (pendingTickets.map(t => (_jsxs("button", { type: "button", onClick: () => onNavigate('ticket'), style: {
                                 width: '100%',
                                 textAlign: 'left',
                                 padding: '14px 16px',
@@ -51,11 +59,9 @@ export const HomeScreen = ({ config, onNavigate, tickets }) => {
                                 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: {
+                            }, children: [_jsx("div", { style: { fontSize: 14, fontWeight: 700, color: '#0c4a6e', marginBottom: 6 }, children: t.title }), _jsx("div", { style: { fontSize: 12, fontWeight: 500, color: '#64748b', lineHeight: 1.45 }, children: truncateWords(t.description, 50) })] }, t.id)))) : (_jsxs(_Fragment, { children: [_jsx("div", { style: {
                                         padding: '14px 16px',
                                         borderRadius: 14,
                                         background: '#e0f2fe',
@@ -117,18 +123,31 @@ export const HomeScreen = ({ config, onNavigate, tickets }) => {
                             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"] })] })] })] }));
+                        }, 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 10px', fontSize: 15, fontWeight: 700, color: '#4c1d95', lineHeight: 1.45, position: 'relative' }, children: promotionLead }), _jsxs("p", { style: { margin: '0 0 16px', fontSize: 13, fontWeight: 500, color: '#5b21b6', lineHeight: 1.5, position: 'relative' }, children: [_jsx("strong", { style: { fontWeight: 800 }, children: brand }), " \u2014 embedded chat for your workspace.", ' ', _jsx("span", { style: { whiteSpace: 'nowrap' }, children: "Free for users." }), " 24\u00D77 availability. Dedicated workspace experience."] }), _jsxs("div", { style: { display: 'flex', flexWrap: 'wrap', gap: 10, position: 'relative' }, children: [tourUrl && (_jsx("a", { href: tourUrl, target: "_blank", rel: "noopener noreferrer", style: {
+                                            display: 'inline-flex',
+                                            alignItems: 'center',
+                                            justifyContent: 'center',
+                                            gap: 6,
+                                            padding: '10px 16px',
+                                            borderRadius: 12,
+                                            border: 'none',
+                                            background: '#fff',
+                                            color: '#5b21b6',
+                                            fontSize: 13,
+                                            fontWeight: 700,
+                                            textDecoration: 'none',
+                                            boxShadow: '0 2px 8px rgba(91,33,182,0.15)',
+                                        }, children: "Take a Website Tour" })), _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',
+                                        }, 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"] })] })] })] })] }));
 };

package/dist/index.d.ts

@@ -13,7 +13,8 @@ export { SlideNavMenu } from './components/SlideNavMenu';
 export { useChat } from './hooks/useChat';
 export { useWebRTC } from './hooks/useWebRTC';
 export { useRemoteConfig } from './hooks/useRemoteConfig';
+export { shouldShowPrivacyNotice, dismissPrivacyNotice, getPrivacyDismissedAt } from './utils/privacyConsent';
 export { loadLocalConfig, fetchRemoteChatData } from './config';
 export { mergeTheme, darken } from './utils/theme';
-export { avatarColor, initials, formatTime, formatDate, generateTranscript, downloadText } from './utils/chat';
+export { avatarColor, initials, formatTime, formatDate, generateTranscript, downloadText, truncateWords } from './utils/chat';
 export type { ChatWidgetProps, ChatWidgetTheme, WidgetConfig, RemoteChatData, ChatUser, ChatMessage, Ticket, RecentChat, CallSession, CallState, ChatStatus, ChatType, UserType, OnlineStatus, Screen, BottomTab, UserListContext, MessageType, LocalEnvConfig, } from './types';

package/dist/index.js

@@ -13,6 +13,7 @@ export { SlideNavMenu } from './components/SlideNavMenu';
 export { useChat } from './hooks/useChat';
 export { useWebRTC } from './hooks/useWebRTC';
 export { useRemoteConfig } from './hooks/useRemoteConfig';
+export { shouldShowPrivacyNotice, dismissPrivacyNotice, getPrivacyDismissedAt } from './utils/privacyConsent';
 export { loadLocalConfig, fetchRemoteChatData } from './config';
 export { mergeTheme, darken } from './utils/theme';
-export { avatarColor, initials, formatTime, formatDate, generateTranscript, downloadText } from './utils/chat';
+export { avatarColor, initials, formatTime, formatDate, generateTranscript, downloadText, truncateWords } from './utils/chat';

package/dist/types/index.d.ts

@@ -23,6 +23,16 @@ export interface WidgetConfig {
     viewerUid?: string;
     /** Display name for transfer notes (optional) */
     viewerName?: string;
+    /** Privacy Policy URL (linked from chat consent banner) */
+    privacyPolicyUrl?: string;
+    /** Set false to hide the consent note above the composer */
+    showPrivacyNotice?: boolean;
+    /** Product brand (e.g. Ajaxter) */
+    brandName?: string;
+    /** Home promotion: “Take a Website Tour” link */
+    websiteTourUrl?: string;
+    /** Optional override for the lead line in the promotion card */
+    promotionLead?: string;
     allowVoiceMessage: boolean;
     allowAttachment: boolean;
     allowEmoji: boolean;

package/dist/utils/chat.d.ts

@@ -9,5 +9,7 @@ export declare function formatTime(ts: string | Date): string;
 export declare function formatDate(ts: string | Date): string;
 /** Generate a plain-text transcript from messages */
 export declare function generateTranscript(messages: ChatMessage[], peer: ChatUser, myName?: string): string;
+/** Truncate to max words, append ellipsis (…) if shortened */
+export declare function truncateWords(text: string, maxWords: number): string;
 /** Trigger a file download in the browser */
 export declare function downloadText(content: string, filename: string): void;

package/dist/utils/chat.js

@@ -50,6 +50,15 @@ export function generateTranscript(messages, peer, myName = 'Me') {
     }).join('\n');
     return header + body;
 }
+/** Truncate to max words, append ellipsis (…) if shortened */
+export function truncateWords(text, maxWords) {
+    const w = text.trim().split(/\s+/).filter(Boolean);
+    if (w.length === 0)
+        return '';
+    if (w.length <= maxWords)
+        return w.join(' ');
+    return `${w.slice(0, maxWords).join(' ')}…`;
+}
 /** Trigger a file download in the browser */
 export function downloadText(content, filename) {
     const blob = new Blob([content], { type: 'text/plain' });

package/dist/utils/privacyConsent.d.ts

@@ -0,0 +1,4 @@
+export declare function getPrivacyDismissedAt(widgetId: string): number | null;
+/** After dismiss, banner stays hidden until one hour has passed */
+export declare function shouldShowPrivacyNotice(widgetId: string): boolean;
+export declare function dismissPrivacyNotice(widgetId: string): void;

package/dist/utils/privacyConsent.js

@@ -0,0 +1,33 @@
+const HOUR_MS = 60 * 60 * 1000;
+function key(widgetId) {
+    return `ajaxter_privacy_dismiss_${widgetId}`;
+}
+export function getPrivacyDismissedAt(widgetId) {
+    if (typeof window === 'undefined')
+        return null;
+    try {
+        const v = localStorage.getItem(key(widgetId));
+        if (v == null)
+            return null;
+        const n = parseInt(v, 10);
+        return Number.isFinite(n) ? n : null;
+    }
+    catch (_a) {
+        return null;
+    }
+}
+/** After dismiss, banner stays hidden until one hour has passed */
+export function shouldShowPrivacyNotice(widgetId) {
+    const at = getPrivacyDismissedAt(widgetId);
+    if (at == null)
+        return true;
+    return Date.now() - at >= HOUR_MS;
+}
+export function dismissPrivacyNotice(widgetId) {
+    try {
+        localStorage.setItem(key(widgetId), String(Date.now()));
+    }
+    catch (_a) {
+        /* ignore quota / private mode */
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ajaxter-chat",
-  "version": "3.0.6",
+  "version": "3.0.7",
   "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

@@ -15,6 +15,9 @@
     "branch": "Mumbai HQ",
     "footerPoweredBy": "Answers by",
     "supportPhone": "+919876543210",
+    "privacyPolicyUrl": "https://ajaxter.com/privacy",
+    "websiteTourUrl": "https://ajaxter.com",
+    "brandName": "Ajaxter",
     "allowVoiceMessage": true,
     "allowAttachment": true,
     "allowEmoji": true,
@@ -136,31 +139,61 @@
     {
       "id": "TKT-0001",
       "title": "Login page 500 error",
-      "description": "Getting a server error when logging in with valid credentials.",
-      "status": "resolved",
+      "description": "Getting a server error when logging in with valid credentials. Stack trace references timeout on auth service. Reproduced on Chrome and Safari. Need priority fix before release branch cut.",
+      "status": "open",
       "priority": "high",
       "createdAt": "2025-03-25T10:00:00Z",
-      "updatedAt": "2025-03-27T09:22:00Z",
+      "updatedAt": "2025-03-28T11:00:00Z",
       "assignedTo": "dev_001"
     },
     {
       "id": "TKT-0002",
       "title": "Export to CSV not working",
-      "description": "The export button on the reports page does nothing when clicked.",
+      "description": "The export button on the reports page does nothing when clicked. Browser console shows CORS blocked response. Works on staging but fails in production behind new CDN rules.",
       "status": "in-progress",
       "priority": "medium",
       "createdAt": "2025-03-26T14:30:00Z",
-      "updatedAt": "2025-03-27T08:00:00Z",
+      "updatedAt": "2025-03-28T10:30:00Z",
       "assignedTo": "dev_002"
     },
     {
       "id": "TKT-0003",
       "title": "Add dark mode support",
-      "description": "Feature request to add a dark mode toggle for the dashboard.",
+      "description": "Feature request to add a dark mode toggle for the dashboard and persist preference per user account across sessions and devices.",
       "status": "open",
       "priority": "low",
       "createdAt": "2025-03-27T07:00:00Z",
-      "updatedAt": "2025-03-27T07:00:00Z",
+      "updatedAt": "2025-03-28T09:15:00Z",
+      "assignedTo": null
+    },
+    {
+      "id": "TKT-0004",
+      "title": "Webhook retries failing",
+      "description": "Outbound webhooks to partner endpoints return 429 after deploy. Need backoff review and idempotency keys. Partner asked for ETA this week.",
+      "status": "open",
+      "priority": "high",
+      "createdAt": "2025-03-28T06:00:00Z",
+      "updatedAt": "2025-03-28T09:00:00Z",
+      "assignedTo": "dev_001"
+    },
+    {
+      "id": "TKT-0005",
+      "title": "Mobile layout overflow",
+      "description": "On small screens the chat drawer overlaps the footer actions. QA attached screenshots. Repro on iPhone 14 and Pixel 8.",
+      "status": "in-progress",
+      "priority": "medium",
+      "createdAt": "2025-03-27T16:00:00Z",
+      "updatedAt": "2025-03-28T08:45:00Z",
+      "assignedTo": "dev_002"
+    },
+    {
+      "id": "TKT-0006",
+      "title": "Audit log export",
+      "description": "Compliance needs CSV export of admin actions for last 90 days with filters by actor and resource type including soft-deleted records.",
+      "status": "open",
+      "priority": "low",
+      "createdAt": "2025-03-28T05:00:00Z",
+      "updatedAt": "2025-03-28T07:30:00Z",
       "assignedTo": null
     }
   ],

package/src/components/ChatScreen/index.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useRef, useEffect, useCallback } from 'react';
 import { ChatMessage, ChatUser, WidgetConfig, UserListContext } from '../../types';
 import { avatarColor, initials, formatTime, formatDate, generateTranscript, downloadText } from '../../utils/chat';
+import { shouldShowPrivacyNotice, dismissPrivacyNotice } from '../../utils/privacyConsent';
 import { EmojiPicker } from '../EmojiPicker';
 import { SlideNavMenu } from '../SlideNavMenu';
 
@@ -38,6 +39,7 @@ export const ChatScreen: React.FC<ChatScreenProps> = ({
   const [isRecording,   setIsRecording]  = useState(false);
   const [recordSec,     setRecordSec]    = useState(0);
   const [showConfirm,   setShowConfirm]  = useState<'report'|'block'|'pause'|null>(null);
+  const [showPrivacy,   setShowPrivacy]  = useState(false);
 
   const endRef        = useRef<HTMLDivElement>(null);
   const inputRef      = useRef<HTMLTextAreaElement>(null);
@@ -48,6 +50,25 @@ export const ChatScreen: React.FC<ChatScreenProps> = ({
 
   useEffect(() => { endRef.current?.scrollIntoView({ behavior:'smooth' }); }, [messages]);
 
+  const privacyEnabled = config.showPrivacyNotice !== false;
+  useEffect(() => {
+    if (!privacyEnabled) return;
+    setShowPrivacy(shouldShowPrivacyNotice(config.id));
+  }, [config.id, privacyEnabled]);
+
+  useEffect(() => {
+    if (!privacyEnabled) return;
+    const id = window.setInterval(() => {
+      setShowPrivacy(shouldShowPrivacyNotice(config.id));
+    }, 60_000);
+    return () => window.clearInterval(id);
+  }, [config.id, privacyEnabled]);
+
+  const dismissPrivacy = useCallback(() => {
+    dismissPrivacyNotice(config.id);
+    setShowPrivacy(false);
+  }, [config.id]);
+
   const handleSend = useCallback(() => {
     if (!text.trim() || isPaused || isBlocked) return;
     onSend(text.trim());
@@ -244,6 +265,60 @@ export const ChatScreen: React.FC<ChatScreenProps> = ({
       {/* Composer — reference layout */}
       <div style={{ borderTop:'1px solid #eef0f5', padding:'10px 12px 8px', background:'#fff', flexShrink:0, position:'relative' }}>
 
+        {privacyEnabled && showPrivacy && (
+          <div
+            style={{
+              position: 'relative',
+              marginBottom: 10,
+              padding: '12px 36px 12px 12px',
+              borderRadius: 12,
+              background: '#fff',
+              border: '1px solid #e8ecf1',
+              boxShadow: '0 1px 4px rgba(15,23,42,0.06)',
+            }}
+          >
+            <button
+              type="button"
+              aria-label="Dismiss privacy notice"
+              onClick={dismissPrivacy}
+              style={{
+                position: 'absolute',
+                top: 8,
+                right: 8,
+                width: 26,
+                height: 26,
+                borderRadius: '50%',
+                border: 'none',
+                background: '#f1f5f9',
+                cursor: 'pointer',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                padding: 0,
+                lineHeight: 1,
+              }}
+            >
+              <span style={{ fontSize: 14, color: '#475569', fontWeight: 700 }}>×</span>
+            </button>
+            <p style={{ margin: 0, fontSize: 12, color: '#64748b', lineHeight: 1.55 }}>
+              By chatting here, you agree we and authorized partners may process, monitor, and record this chat and your data in line with{' '}
+              {config.privacyPolicyUrl ? (
+                <a
+                  href={config.privacyPolicyUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  style={{ color: config.primaryColor, textDecoration: 'underline', fontWeight: 600 }}
+                >
+                  Privacy Policy
+                </a>
+              ) : (
+                <span style={{ textDecoration: 'underline', fontWeight: 600 }}>Privacy Policy</span>
+              )}
+              .
+            </p>
+          </div>
+        )}
+
         {showEmoji && config.allowEmoji && (
           <EmojiPicker
             primaryColor={config.primaryColor}

package/src/components/HomeScreen/index.tsx

@@ -1,6 +1,7 @@
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 import { WidgetConfig, UserListContext, Ticket } from '../../types';
 import { SlideNavMenu } from '../SlideNavMenu';
+import { truncateWords } from '../../utils/chat';
 
 interface HomeScreenProps {
   config: WidgetConfig;
@@ -14,7 +15,20 @@ export const HomeScreen: React.FC<HomeScreenProps> = ({ config, onNavigate, tick
   const showChat = config.chatType === 'CHAT' || config.chatType === 'BOTH';
   const viewerIsDev = config.viewerType === 'developer';
 
-  const continueItems = tickets.slice(0, 2);
+  const pendingTickets = useMemo(
+    () =>
+      tickets
+        .filter(t => t.status === 'open' || t.status === 'in-progress')
+        .sort((a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime())
+        .slice(0, 5),
+    [tickets]
+  );
+
+  const brand = config.brandName?.trim() || 'Ajaxter';
+  const promotionLead =
+    config.promotionLead?.trim() ||
+    'Need specialized help? Our teams are ready to assist you with any questions.';
+  const tourUrl = config.websiteTourUrl?.trim();
 
   const handleCallUs = () => {
     const raw = config.supportPhone?.trim();
@@ -91,8 +105,8 @@ export const HomeScreen: React.FC<HomeScreenProps> = ({ config, onNavigate, tick
         {/* Continue Conversations */}
         <h2 style={{ margin: '0 0 12px', fontSize: 15, fontWeight: 800, color: '#0f172a' }}>Continue Conversations</h2>
         <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 28 }}>
-          {continueItems.length > 0 ? (
-            continueItems.map(t => (
+          {pendingTickets.length > 0 ? (
+            pendingTickets.map(t => (
               <button
                 key={t.id}
                 type="button"
@@ -105,13 +119,14 @@ export const HomeScreen: React.FC<HomeScreenProps> = ({ config, onNavigate, tick
                   border: 'none',
                   background: '#e0f2fe',
                   color: '#0369a1',
-                  fontSize: 14,
-                  fontWeight: 600,
                   cursor: 'pointer',
                   boxShadow: '0 1px 3px rgba(0,0,0,0.06)',
                 }}
               >
-                {t.title}
+                <div style={{ fontSize: 14, fontWeight: 700, color: '#0c4a6e', marginBottom: 6 }}>{t.title}</div>
+                <div style={{ fontSize: 12, fontWeight: 500, color: '#64748b', lineHeight: 1.45 }}>
+                  {truncateWords(t.description, 50)}
+                </div>
               </button>
             ))
           ) : (
@@ -233,36 +248,65 @@ export const HomeScreen: React.FC<HomeScreenProps> = ({ config, onNavigate, tick
           }}
         >
           <div style={{ position: 'absolute', top: -20, right: -20, width: 100, height: 100, borderRadius: '50%', background: 'rgba(255,255,255,0.35)' }} />
-          <p style={{ margin: '0 0 16px', fontSize: 15, fontWeight: 700, color: '#4c1d95', lineHeight: 1.45, position: 'relative' }}>
-            Need specialized help? Our teams are ready to assist you with any questions.
+          <p style={{ margin: '0 0 10px', fontSize: 15, fontWeight: 700, color: '#4c1d95', lineHeight: 1.45, position: 'relative' }}>
+            {promotionLead}
           </p>
-          <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',
-            }}
-          >
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
-              <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"
-              />
-            </svg>
-            Call Us
-          </button>
+          <p style={{ margin: '0 0 16px', fontSize: 13, fontWeight: 500, color: '#5b21b6', lineHeight: 1.5, position: 'relative' }}>
+            <strong style={{ fontWeight: 800 }}>{brand}</strong> — embedded chat for your workspace.{' '}
+            <span style={{ whiteSpace: 'nowrap' }}>Free for users.</span> 24×7 availability. Dedicated workspace experience.
+          </p>
+          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, position: 'relative' }}>
+            {tourUrl && (
+              <a
+                href={tourUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                style={{
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  gap: 6,
+                  padding: '10px 16px',
+                  borderRadius: 12,
+                  border: 'none',
+                  background: '#fff',
+                  color: '#5b21b6',
+                  fontSize: 13,
+                  fontWeight: 700,
+                  textDecoration: 'none',
+                  boxShadow: '0 2px 8px rgba(91,33,182,0.15)',
+                }}
+              >
+                Take a Website Tour
+              </a>
+            )}
+            <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',
+              }}
+            >
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
+                <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"
+                />
+              </svg>
+              Call Us
+            </button>
+          </div>
         </div>
       </div>
     </div>

package/src/index.ts

@@ -15,9 +15,10 @@ export { useChat }            from './hooks/useChat';
 export { useWebRTC }          from './hooks/useWebRTC';
 export { useRemoteConfig }    from './hooks/useRemoteConfig';
 
+export { shouldShowPrivacyNotice, dismissPrivacyNotice, getPrivacyDismissedAt } from './utils/privacyConsent';
 export { loadLocalConfig, fetchRemoteChatData } from './config';
 export { mergeTheme, darken }                   from './utils/theme';
-export { avatarColor, initials, formatTime, formatDate, generateTranscript, downloadText } from './utils/chat';
+export { avatarColor, initials, formatTime, formatDate, generateTranscript, downloadText, truncateWords } from './utils/chat';
 
 export type {
   ChatWidgetProps, ChatWidgetTheme,

package/src/types/index.ts

@@ -24,6 +24,16 @@ export interface WidgetConfig {
   viewerUid?: string;
   /** Display name for transfer notes (optional) */
   viewerName?: string;
+  /** Privacy Policy URL (linked from chat consent banner) */
+  privacyPolicyUrl?: string;
+  /** Set false to hide the consent note above the composer */
+  showPrivacyNotice?: boolean;
+  /** Product brand (e.g. Ajaxter) */
+  brandName?: string;
+  /** Home promotion: “Take a Website Tour” link */
+  websiteTourUrl?: string;
+  /** Optional override for the lead line in the promotion card */
+  promotionLead?: string;
   allowVoiceMessage: boolean;
   allowAttachment: boolean;
   allowEmoji: boolean;

package/src/utils/chat.ts

@@ -58,6 +58,14 @@ export function generateTranscript(
   return header + body;
 }
 
+/** Truncate to max words, append ellipsis (…) if shortened */
+export function truncateWords(text: string, maxWords: number): string {
+  const w = text.trim().split(/\s+/).filter(Boolean);
+  if (w.length === 0) return '';
+  if (w.length <= maxWords) return w.join(' ');
+  return `${w.slice(0, maxWords).join(' ')}…`;
+}
+
 /** Trigger a file download in the browser */
 export function downloadText(content: string, filename: string) {
   const blob = new Blob([content], { type: 'text/plain' });

package/src/utils/privacyConsent.ts

@@ -0,0 +1,32 @@
+const HOUR_MS = 60 * 60 * 1000;
+
+function key(widgetId: string): string {
+  return `ajaxter_privacy_dismiss_${widgetId}`;
+}
+
+export function getPrivacyDismissedAt(widgetId: string): number | null {
+  if (typeof window === 'undefined') return null;
+  try {
+    const v = localStorage.getItem(key(widgetId));
+    if (v == null) return null;
+    const n = parseInt(v, 10);
+    return Number.isFinite(n) ? n : null;
+  } catch {
+    return null;
+  }
+}
+
+/** After dismiss, banner stays hidden until one hour has passed */
+export function shouldShowPrivacyNotice(widgetId: string): boolean {
+  const at = getPrivacyDismissedAt(widgetId);
+  if (at == null) return true;
+  return Date.now() - at >= HOUR_MS;
+}
+
+export function dismissPrivacyNotice(widgetId: string): void {
+  try {
+    localStorage.setItem(key(widgetId), String(Date.now()));
+  } catch {
+    /* ignore quota / private mode */
+  }
+}