// ConversationCard and its sub-components (used by Hero)
/* inject typing-dot keyframe + niche button hover once */
(function() {
if (document.getElementById('_typing-kf')) return;
const s = document.createElement('style');
s.id = '_typing-kf';
s.textContent = `
@keyframes typingDot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.niche-btn:not([aria-pressed="true"]):hover{background:rgba(94,34,48,0.07)!important;color:var(--wine)!important;}
.niche-btn:not([aria-pressed="true"]):hover span{color:var(--wine)!important;}
`;
document.head.appendChild(s);
})();
/* animation timing — delay = read(prev) + type(curr), same-direction skips read */
const READ_AGENT = 32, TYPE_AGENT = 65, MIN_AGENT = 2000, MAX_AGENT = 8000;
const READ_USER = 22, TYPE_USER = 52, MIN_USER = 900, MAX_USER = 3800;
const INITIAL_TYPING = 2400, SYSTEM_GAP = 380, READ_RECEIPT_LEAD = 700, BOOKING_GAP = 7000, BOOKING_READ_LEAD = 3500;
const RESTART_PAUSE = 4000;
const NICHE_ORDER = ['kitchen', 'flooring', 'wellness', 'landscaping', 'roofing'];
const COUNTDOWN_SECS = 5;
/* --------------------------- CONVERSATION CARD --------------------------- */
function ConversationCard({ niche, onSetNiche }) {
const isMobile = window.useIsMobile();
const isTabletOrBelow = window.useIsMobile(1280);
const { t, lang } = window.useI18n();
const data = CHAT_CASES[niche] || CHAT_CASES.kitchen;
const nlMessages = (window.TRANSLATIONS?.[lang]?.chatMessages || {})[niche];
const messages = Array.isArray(nlMessages) ? nlMessages : data.messages;
const [visible, setVisible] = React.useState([]);
const [readReceipts, setReadReceipts] = React.useState(new Set());
const [initTyping, setInitTyping] = React.useState(true);
const [followMode, setFollowMode] = React.useState(true);
const [autoAdvancing, setAutoAdvancing] = React.useState(false);
const [cdSecsLeft, setCdSecsLeft] = React.useState(COUNTDOWN_SECS);
const scrollRef = React.useRef(null);
const timeoutsRef = React.useRef([]);
const followRef = React.useRef(true);
const programmaticRef = React.useRef(false);
const countdownRef = React.useRef(null);
const nicheRef = React.useRef(niche);
React.useEffect(() => { nicheRef.current = niche; }, [niche]);
React.useEffect(() => { followRef.current = followMode; }, [followMode]);
const scrollToBottom = React.useCallback(() => {
const el = scrollRef.current;
if (!el) return;
programmaticRef.current = true;
el.scrollTo({ top: el.scrollHeight, behavior: 'smooth' });
setTimeout(() => { programmaticRef.current = false; }, 600);
}, []);
React.useEffect(() => {
if (followMode) scrollToBottom();
}, [visible, initTyping, followMode, scrollToBottom]);
const cancelCountdown = React.useCallback(() => {
if (countdownRef.current) {
clearInterval(countdownRef.current);
countdownRef.current = null;
}
setAutoAdvancing(false);
setCdSecsLeft(COUNTDOWN_SECS);
}, []);
const handleScroll = React.useCallback(() => {
if (programmaticRef.current) return;
if (countdownRef.current) cancelCountdown();
const el = scrollRef.current;
if (!el) return;
const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 60;
setFollowMode(atBottom);
}, [cancelCountdown]);
/* main animation loop — auto-advance when niche changes */
React.useEffect(() => {
timeoutsRef.current.forEach(clearTimeout);
timeoutsRef.current = [];
if (countdownRef.current) { clearInterval(countdownRef.current); countdownRef.current = null; }
setAutoAdvancing(false);
setCdSecsLeft(COUNTDOWN_SECS);
setVisible([]);
setReadReceipts(new Set());
setInitTyping(true);
setFollowMode(true);
followRef.current = true;
if (scrollRef.current) scrollRef.current.scrollTop = 0;
/* compute absolute arrival time — delay = read(prev) + type(curr) */
let acc = 0;
const times = messages.map((msg, i) => {
if (i === 0) { acc = INITIAL_TYPING; return acc; }
if (msg.type === 'system') { acc += msg.wine ? BOOKING_GAP : SYSTEM_GAP; return acc; }
const prev = messages[i - 1];
const prevLen = prev?.content?.length ?? 0;
const currLen = msg.content.length;
const sameDir = prev?.type === msg.type;
if (msg.type === 'agent') {
const read = sameDir ? 0 : prevLen * READ_AGENT;
const type = currLen * TYPE_AGENT;
acc += Math.min(Math.max(read + type, MIN_AGENT), MAX_AGENT);
} else {
const read = sameDir ? 0 : prevLen * READ_USER;
const type = currLen * TYPE_USER;
acc += Math.min(Math.max(read + type, MIN_USER), MAX_USER);
}
return acc;
});
/* clear initial typing indicator at first message */
timeoutsRef.current.push(setTimeout(() => setInitTyping(false), INITIAL_TYPING));
messages.forEach((msg, i) => {
timeoutsRef.current.push(setTimeout(() => {
setVisible(prev => [...prev, i]);
}, times[i]));
if (msg.type === 'user') {
for (let j = i - 1; j >= 0; j--) {
if (messages[j].type === 'agent') {
const rrTime = Math.max(times[j] + 500, times[i] - READ_RECEIPT_LEAD);
timeoutsRef.current.push(setTimeout(() => {
setReadReceipts(prev => new Set([...prev, j]));
}, rrTime));
} else if (messages[j].type === 'user') {
break;
}
}
}
if (msg.type === 'system' && msg.wine) {
for (let j = i - 1; j >= 0; j--) {
if (messages[j].type === 'agent') {
const rrTime = Math.max(times[j] + 800, times[i] - BOOKING_READ_LEAD);
timeoutsRef.current.push(setTimeout(() => {
setReadReceipts(prev => new Set([...prev, j]));
}, rrTime));
break;
} else if (messages[j].type === 'user') {
break;
}
}
}
});
const lastTime = times[times.length - 1] ?? INITIAL_TYPING;
timeoutsRef.current.push(setTimeout(() => {
let secs = COUNTDOWN_SECS;
setCdSecsLeft(secs);
setAutoAdvancing(true);
countdownRef.current = setInterval(() => {
secs -= 1;
setCdSecsLeft(secs);
if (secs <= 0) {
clearInterval(countdownRef.current);
countdownRef.current = null;
setAutoAdvancing(false);
setCdSecsLeft(COUNTDOWN_SECS);
const idx = NICHE_ORDER.indexOf(nicheRef.current);
onSetNiche(NICHE_ORDER[(idx + 1) % NICHE_ORDER.length]);
}
}, 1000);
}, lastTime + RESTART_PAUSE));
return () => {
timeoutsRef.current.forEach(clearTimeout);
if (countdownRef.current) { clearInterval(countdownRef.current); countdownRef.current = null; }
};
}, [niche]);
const visibleCount = visible.length;
const nextMsgType = messages[visibleCount]?.type;
const showTyping = initTyping || (
visibleCount > 0 && visibleCount < messages.length && nextMsgType !== 'system'
);
const typingDir = initTyping
? (messages[0]?.type === 'user' ? 'user' : 'agent')
: nextMsgType;
return (
{/* Header */}
{data.avatar}
{data.leadName}
{data.project}
{t('hero.conv_enquired')} {data.ago.split(' ')[0]} {t('convUI.months_ago')}
{/* Scrollable message area */}
{visible.map(i => {
const msg = messages[i];
if (!msg) return null;
if (msg.type === 'system') {
return (
);
}
return (
{msg.content}
);
})}
{showTyping &&
}
{/* Follow-mode re-engage button */}
{!followMode && (
)}
{/* Countdown bar */}
{autoAdvancing && (() => {
const nextIdx = (NICHE_ORDER.indexOf(niche) + 1) % NICHE_ORDER.length;
const nextLabel = CHAT_CASES[NICHE_ORDER[nextIdx]]?.label;
return (
{t('hero.conv_next')} {nextLabel}
{cdSecsLeft}s
);
})()}
{children}
);
}
function TypingBubble({ dir }) {
const isFirm = dir === 'agent';
return (
{[0, 1, 2].map(i => (
))}
);
}
function CheckCheckIcon() {
return (
);
}
function NicheSwitcher({ value, onChange }) {
const { t } = window.useI18n();
const items = Object.keys(CHAT_CASES).map(k => ({ k, label: t('convUI.niche_' + k) || CHAT_CASES[k].label, icon: NICHE_ICONS[k] }));
return (
{items.map((it) => {
const on = it.k === value;
return (
);
})}
);
}
const NICHE_ICONS = {
kitchen: ,
flooring: ,
wellness: ,
landscaping: ,
roofing:
};
function Msg({ from, time, readReceipt, children }) {
const isFirm = from === "firm";
return (
{children}
{time}
{isFirm && readReceipt && }
);
}
function Divider({ label, tone }) {
const isWine = tone === "wine";
return (
{label}
);
}
function FloatNote() {
return (
Editor's note
Every message is drafted in your business's voice, reviewed, then sent under your domain.
);
}