/* global React */
const { useState, useEffect } = React;
/* ============================================================
Reusable widget pieces — used across all states & variants
============================================================ */
const I = {
Chat: () => ,
Send: () => ,
Mic: () => ,
Clip: () => ,
Smile: () => ,
X: () => ,
Min: () => ,
More: () => ,
Stop: () => ,
};
/* === Header === */
function Head({ name="Praatbox", agentName="AI Assistant", status="online", variant="default" }) {
const isEd = variant === "editorial";
return (
{isEd ? P : "P"}
{isEd ? <>{agentName.split(" ")[0]} {agentName.split(" ").slice(1).join(" ")} : agentName}
{status === "online" && "Online · replies in seconds"}
{status === "waiting" && "Connecting to agent…"}
{status === "live" && "Sara · Live agent"}
{status === "offline" && "Offline · we'll email you back"}
);
}
/* === Footer === */
function Foot({ show=true }) {
if (!show) return null;
return POWERED BY praatbox
;
}
/* === Bubble === */
function Bubble({ unread = 0 }) {
return (
{unread > 0 && {unread}}
);
}
/* === Proactive popup === */
function Proactive() {
return (
<>
P
Looking for shipping info?
I read every doc — ask me anything.
);
}
/* === A standard message === */
function Msg({ role, children, time }) {
return (
{children}
{time && role !== "system" &&
{time}}
);
}
/* === Typing indicator === */
function Typing() {
return
;
}
/* === Suggested reply chips === */
function Chips({ items, onPick }) {
return (
{items.map((c) => )}
);
}
/* === Input row === */
function Input({ value="", placeholder="Type your message…", onSend, recording=false, transcribing=false }) {
return (
);
}
/* === Voice recording overlay === */
function VoiceRecording() {
return (
{Array.from({length: 14}, (_, i) =>
)}
0:08
Listening — speak in any language.
);
}
/* === Pre-chat form === */
function PreChat() {
return (
);
}
/* === Handoff banner === */
function Handoff() {
return (
Connecting you with Sara
Support specialist · usually replies in < 2 min
);
}
/* === CSAT === */
function CSAT() {
const [rating, setRating] = useState(4);
return (
How did we do?
Sara just resolved your conversation — rate the experience.
{[1,2,3,4,5].map((n) => (
))}
);
}
/* === Offline / email capture === */
function Offline() {
return (
<>
);
}
/* === SETTINGS panel === */
function Settings() {
return (
Settings
Tune the conversation to your liking.
);
}
/* === starter questions empty-state === */
function Starters({ items, intro }) {
return (
{intro &&
{intro}
}
{items.map((q) =>
)}