/* global React, Head, Foot, Bubble, Proactive, Msg, Typing, Chips, Input, VoiceRecording, PreChat, Handoff, CSAT, Offline, Settings, DesignCanvas, DCSection, DCArtboard */
const { useState } = React;
/* ============================================================
STATE COMPOSERS β full panel for each state
============================================================ */
function StateClosed({ variant, badgeCount=2 }) {
return (
);
}
function StateProactive({ variant }) {
return (
);
}
function StateStarters({ variant }) {
return (
);
}
function StatePreChat({ variant }) {
return (
);
}
function StateConversation({ variant }) {
return (
);
}
function StateTyping({ variant }) {
return (
);
}
function StateVoice({ variant }) {
return (
);
}
function StateHandoff({ variant }) {
return (
);
}
function StateCSAT({ variant }) {
return (
);
}
function StateOffline({ variant }) {
return (
);
}
function StateSettings({ variant }) {
return (
);
}
/* ============================================================
LAYOUT β DesignCanvas: one section per variant, 10 artboards each
============================================================ */
const STATES = [
{ id: "closed", label: "01 β Closed bubble", w: 460, h: 220, Cmp: StateClosed },
{ id: "proactive", label: "02 β Proactive popup", w: 460, h: 280, Cmp: StateProactive },
{ id: "starters", label: "03 β Starter questions", w: 460, h: 700, Cmp: StateStarters },
{ id: "pre-chat", label: "04 β Pre-chat form", w: 460, h: 700, Cmp: StatePreChat },
{ id: "conversation", label: "05 β Open conversation", w: 460, h: 700, Cmp: StateConversation },
{ id: "typing", label: "06 β AI is typing", w: 460, h: 700, Cmp: StateTyping },
{ id: "voice", label: "07 β Voice recording", w: 460, h: 700, Cmp: StateVoice },
{ id: "handoff", label: "08 β Live agent handoff", w: 460, h: 700, Cmp: StateHandoff },
{ id: "csat", label: "09 β Conversation rated", w: 460, h: 700, Cmp: StateCSAT },
{ id: "offline", label: "10 β Offline / email capture", w: 460, h: 700, Cmp: StateOffline },
{ id: "settings", label: "11 β Settings", w: 460, h: 700, Cmp: StateSettings },
];
const VARIANTS = [
{ id: "default", title: "Default β paper, rounded", subtitle: "Closest to the existing widget. Soft cream surface, generous radii, friendly green primary.", bg: "linear-gradient(135deg, #f0e8d6 0%, #faf6ec 100%)" },
{ id: "minimal", title: "Minimal β sharp, mono", subtitle: "No rounded corners, ink-black header, mono accents. For confident, technical brands.", bg: "linear-gradient(135deg, #ebe7df 0%, #f6f3ec 100%)" },
{ id: "dark", title: "Dark mode", subtitle: "Warm dark β paper recessed to ink. Same shape language as Default, just inverted.", bg: "linear-gradient(135deg, #1a1815 0%, #2a2622 100%)" },
{ id: "glass", title: "Glass β frosted, layered", subtitle: "Sits on a colorful host page. Backdrop blur + inset highlight, no hard background.", bg: "radial-gradient(60% 60% at 30% 20%, #f9c5b0, transparent 60%), radial-gradient(50% 50% at 80% 80%, #b3d9c4, transparent 60%), linear-gradient(135deg, #faf6ec, #f0e8d6)" },
{ id: "editorial", title: "Editorial β serif heads", subtitle: "Praatbox brand voice baked into the widget. Serif greetings, mono-cased chips, paper-cream.", bg: "linear-gradient(135deg, #f3eee2 0%, #faf7f0 100%)" },
];
function App() {
return (
{VARIANTS.map((v) => (
{STATES.map((s) => {
const C = s.Cmp;
return (
);
})}
))}
);
}
ReactDOM.createRoot(document.getElementById("root")).render();