// Agentic Title — shared page shell for chat-style nav pages.
// Loads after home-parts.jsx (uses window.Sidebar + window.TopBar).
// Each page renders: ...thread...
function AgenticAvatar() {
return (
);
}
// Athena — the intelligence native to the platform, not a bolted-on chatbot.
// Her mark sits on the same warm paper as the page (no dark widget bubble),
// rests static, and animates only while she is thinking.
function AthenaAvatar({ thinking = false, size = 34 }) {
return (
{thinking ? (
);
}
// Agent message bubble (white card). Pass `tone="cognac"` for the dark-red emphasis bubble.
function AgenticMessage({ tone = 'plain', label, noAvatar = false, indent = false, children, style = {} }) {
const cognac = tone === 'cognac';
return (
{!noAvatar &&
{label &&
{label}
}
{children}
);
}
// Intro block: avatar + eyebrow label, big serif-italic headline, optional orange subline.
function AgenticIntro({ label, headline, subline, style = {} }) {
return (
{label}
{headline}
{subline && {subline}
}
);
}
// ---- Conversation state ----------------------------------------------------
// Reads ONLY from window.AT_ANSWERS (answers.js). Chips + composer call ask().
// No free generation: an unmatched question returns the human-handoff fallback.
function useATChat() {
const [messages, setMessages] = React.useState([]);
const [pending, setPending] = React.useState(false);
const ask = React.useCallback((text) => {
const q = (text || '').trim();
if (!q) return;
setMessages((m) => [...m, { from: 'user', text: q }]);
setPending(true);
setTimeout(() => {
const item = (window.ATLookup && window.ATLookup(q)) || null;
const reply = item
? { from: 'agent', text: item.a, draft: item.status !== 'approved', disclaimer: true, action: item.action }
: { from: 'agent', text: window.AT_ANSWERS.fallback, handoff: true };
setMessages((m) => [...m, reply]);
setPending(false);
}, 750);
}, []);
const say = React.useCallback((text, opts) => {
if (!text) return;
setMessages((m) => [...m, { from: 'agent', text, draft: !!(opts && opts.draft) }]);
}, []);
const reset = React.useCallback(() => { setMessages([]); setPending(false); }, []);
// "New Conversation" (sidebar) clears the thread on whatever page is showing.
React.useEffect(() => {
const onNew = () => reset();
window.addEventListener('at-new-conversation', onNew);
return () => window.removeEventListener('at-new-conversation', onNew);
}, [reset]);
return { messages, pending, ask, say, reset };
}
// User message bubble (ink, right-aligned).
function ATUserBubble({ text }) {
return (
);
}
// Agent answer bubble. Draft answers get an amber ribbon + dashed border so
// unreviewed copy can never ship silently.
function ATAnswerBubble({ text, draft, handoff, disclaimer, action }) {
return (
{draft && (
)}
{text}
{action === 'order' && (
window.ATOpenOrder()} style={{
marginTop: 16, cursor: 'pointer', border: 'none', background: 'var(--at-hermes)', color: '#1c0d04',
borderRadius: 'var(--radius-md)', padding: '12px 20px', fontFamily: 'var(--font-mono)', fontWeight: 500,
fontSize: 12, letterSpacing: '0.12em', textTransform: 'uppercase',
}}>Open an Order →
)}
{(disclaimer || handoff) && (
{window.AT_ANSWERS.disclaimer}
)}
);
}
// Renders the appended conversation + a typing indicator; auto-scrolls its thread.
function ATMessages({ messages, pending }) {
const anchor = React.useRef(null);
React.useEffect(() => {
if (!messages.length && !pending) return;
const a = anchor.current;
if (!a) return;
const thread = a.closest('.at-thread');
if (thread) thread.scrollTop = thread.scrollHeight;
}, [messages.length, pending]);
if (!messages.length && !pending) return
;
return (
{messages.map((m, i) => m.from === 'user'
?
);
}
// Chip row — each chip asks its question.
function ATChipRow({ chips = [], onAsk }) {
if (!chips.length) return null;
return (
{chips.map((c) => (
onAsk(c)} style={{
cursor: 'pointer', background: '#FBFAF8', border: '1px solid var(--border-default)',
borderRadius: 'var(--radius-pill)', padding: '12px 20px',
fontFamily: 'var(--font-mono)', fontSize: 13, letterSpacing: '0.03em', color: 'var(--at-hermes)',
transition: 'background var(--dur-fast)',
}}
onMouseEnter={(e) => e.currentTarget.style.background = '#FFFFFF'}
onMouseLeave={(e) => e.currentTarget.style.background = '#FBFAF8'}>{c}
))}
);
}
function PageComposer({ onAsk }) {
const [val, setVal] = React.useState('');
const has = val.trim().length > 0;
const submit = (e) => { e.preventDefault(); if (!has) return; if (onAsk) onAsk(val.trim()); setVal(''); };
return (
);
}
function AgenticPage({ title, subtitle, active, chips = [], children }) {
const [act, setAct] = React.useState(active);
const chat = useATChat();
return (
{/* Athena is part of the surface itself, not a widget on top of it. */}
);
}
Object.assign(window, { AgenticAvatar, AthenaAvatar, AgenticMessage, AgenticIntro, PageComposer, AgenticPage, useATChat, ATMessages, ATChipRow, ATUserBubble, ATAnswerBubble });
)}