{!playing
? "Call paused"
: isAgent ? "Aria is speaking…"
: isGuest ? "Listening to caller…"
: "Standing by…"}
);
}
/* ────────────────────────── transcript ────────────────────────── */
function Transcript({ time }) {
const visibleLines = CALL.map((u, i) => {
if (time < u.t) return { u, i, words: [], state: "future" };
const words = u.text.split(" ");
const elapsed = time - u.t;
const frac = Math.min(1, elapsed / u.dur);
const n = Math.ceil(frac * words.length);
const state = time < u.t + u.dur ? "current" : "past";
return { u, i, words: words.slice(0, n), totalWords: words, state };
}).filter(l => l.state !== "future");
/* Reverse for column-reverse layout: newest bubble is rendered first in DOM
and pinned to the BOTTOM of the container, so the actively-spoken turn is
always visible. Older bubbles overflow at the TOP and the mask fades them. */
const last3 = visibleLines.slice(-4).slice().reverse();
return (
);
}
/* ────────────────────────── main ────────────────────────── */
function VoiceHeroAria() {
const { buffers, audioCtxRef, ensure } = useAudioBuffers();
const [soundOn, setSoundOn] = useState(false);
const [hasInteracted, setHasInteracted] = useState(false);
const { time, setTime, playing, setPlaying, replay } = usePlayback({
audioCtxRef, buffers, soundOn,
});
const cur = currentSpeaker(time);
const speakerKind = cur ? cur.utter.spk : "idle";
const amp = cur ? 1 : 0.15;
/* First user gesture anywhere on the demo enables sound by default.
Subsequent clicks on the sound pill toggle mute. */
function arm() {
if (!hasInteracted) {
setHasInteracted(true);
ensure();
setSoundOn(true);
return true;
}
return false;
}
function handlePauseToggle() {
arm();
setPlaying(p => !p);
}
function handleReplay() {
arm();
replay();
}
function handleScrubSeek(t) {
arm();
setTime(t);
}
function handleSoundToggle() {
/* If this is the first interaction, the click just enables sound (the
button was labelled "Play with sound"). After that it's a mute toggle. */
if (arm()) return;
setSoundOn(prev => !prev);
}
return (
{/* keyframes */}
{/* soft pink ambient */}
{/* HEADER */}
Voice Agent
The voice in front of every call.{" "}
Fluent, available, everywhere.
A true concierge agent that handles the calls your team can't,
answering questions, recommending properties, checking real
availability and generating bookings.
{/* MAIN GRID */}
{/* LEFT */}
Agent reasoning{ACTIONS.filter(a => time >= a.t).length}/{ACTIONS.length}