);
}
// Live "what we're building" pane — reflects cfg.onboarding.capturedData as
// each phase's CAPTURE marker lands, so the owner watches the agent take
// shape instead of seeing one static summary only at the very end.
function ArchitectBuildPane({ capturedData }) {
const d = capturedData || {};
const rows = [];
if (d.brief?.name || d.brief?.industry) {
rows.push({ label: "Business", value: [d.brief?.name, d.brief?.industry].filter(Boolean).join(" · ") });
}
if (d.brief?.description) rows.push({ label: "What they do", value: d.brief.description });
if (d.brief?.languages?.length) rows.push({ label: "Languages", value: d.brief.languages.join(", ") });
if (d.customerProfile?.topUseCases?.length) rows.push({ label: "Top use cases", value: d.customerProfile.topUseCases.join(", ") });
if (d.agentName) rows.push({ label: "Agent name", value: d.agentName + (d.voice ? ` · ${d.voice}` : "") });
if (d.knowledgeReady) rows.push({ label: "Knowledge base", value: "Uploaded" });
if (d.escalation?.contactName) rows.push({ label: "Escalates to", value: d.escalation.contactName });
if (d.launchState) rows.push({ label: "WhatsApp", value: d.launchState === "pending_channel" ? "Connecting…" : d.launchState });
return (
Building your agent
{rows.length === 0 ? (
This fills in as we talk — nothing to show yet.
) : (
{rows.map((r) => (
{r.label}{r.value}
))}
)}
);
}
// One-time welcome moment shown before the phase-1 conversation starts.
// Shown only when the tenant is genuinely fresh (needs:true, inProgress:
// false — no message has been sent yet, since cfg.onboarding.phase is only
// created on the first /api/onboarding/chat/stream call). Once a message is
// sent, inProgress flips true and this is skipped on every future visit —
// no new persistence needed, this reuses the existing needs/inProgress
// signals from GET /onboarding/status.
function ArchitectSplash({ ownerName, onStart, onDefer }) {
return (
Citrus
Welcome to Citrus{ownerName ? `, ${ownerName}` : ""}
Setting up your workspace happens through a natural conversation. Citrus Architect will guide
you through your business, your customers, and how you want your agent to sound — producing
a tailored agent in about 15 minutes.
CITRUS ARCHITECT
Hi! I'm here to help you configure your first agent. What does your business do, and who are your customers?
You can pause and come back anytime.
🛡 Enterprise-grade security🔒 End-to-end encrypted
);
}
function ConversationalOnboarding({ initialStatus, onComplete }) {
const initPhase = (initialStatus?.phase) || 1;
const [phase, setPhase] = React.useState(initPhase);
const [capturedData, setCapturedData] = React.useState(initialStatus?.capturedData || {});
const [messages, setMessages] = React.useState(() => {
const greeting = initPhase > 1
? `Welcome back! You're on phase ${initPhase}. Let's continue from where we left off.`
: "Hi, I'm Citrus Architect. Let's set up your AI agent fleet in 6 easy steps. First — tell me about your business. What do you do, and who are your customers?";
return [{ from: "citrus", text: greeting, kind: "answer" }];
});
const [draft, setDraft] = React.useState("");
const [streaming, setStreaming] = React.useState(false);
const [channelConfirmed, setChannelConfirmed] = React.useState(false);
const [showPhone, setShowPhone] = React.useState(phase === 6);
const streamRef = React.useRef(null);
const inputRef = React.useRef(null);
const uploadInputRef = React.useRef(null);
const msgCounterRef = React.useRef(0);
const [uploadingFile, setUploadingFile] = React.useState(false);
const _OB_BINARY = new Set(["pdf", "docx", "doc", "xlsx", "xls"]);
const _obKind = (n) => { const e = n.toLowerCase().split(".").pop(); return e === "pdf" ? "pdf" : e === "csv" ? "csv" : ["xlsx","xls"].includes(e) ? "sheet" : "doc"; };
const handleFileUpload = async (file) => {
if (!file) return;
setUploadingFile(true);
let textContent = null;
let isBinaryFile = false;
try {
const isBinary = _OB_BINARY.has(file.name.toLowerCase().split(".").pop());
isBinaryFile = isBinary;
const content = await new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onerror = reject;
if (isBinary) { reader.onload = (e) => resolve(e.target.result.split(",")[1]); reader.readAsDataURL(file); }
else { reader.onload = (e) => { textContent = e.target.result; resolve(e.target.result); }; reader.readAsText(file); }
});
const r = await fetch(`${citrusApiBase()}/knowledge`, {
method: "POST", credentials: "include",
headers: { "content-type": "application/json" },
body: JSON.stringify({ name: file.name, kind: _obKind(file.name), content, contentType: file.type || "text/plain", encoding: isBinary ? "base64" : undefined }),
});
const doc = r.ok ? await r.json() : null;
// For binary files (PDF/DOCX), the server extracts text — use it immediately
if (isBinaryFile && doc?.extractedText) textContent = doc.extractedText;
await handleKnowledgeDone([{ name: file.name, id: doc?.id || doc?._id || file.name }], textContent, isBinaryFile);
} catch {
await handleKnowledgeDone([{ name: file.name, id: file.name }], textContent, isBinaryFile);
} finally {
setUploadingFile(false);
if (uploadInputRef.current) uploadInputRef.current.value = "";
}
};
React.useEffect(() => {
const handler = () => {
setChannelConfirmed(true);
setTimeout(() => onComplete && onComplete(), 1800);
};
window.addEventListener("citrus-onboarding-channel-ready", handler);
return () => window.removeEventListener("citrus-onboarding-channel-ready", handler);
}, [onComplete]);
React.useEffect(() => {
if (streamRef.current) streamRef.current.scrollTop = streamRef.current.scrollHeight;
}, [messages]);
React.useEffect(() => {
setShowPhone(phase === 6);
}, [phase]);
const addMsg = (msg) => {
const id = ++msgCounterRef.current;
setMessages((prev) => [...prev, { ...msg, _id: id }]);
return id;
};
const updateMsg = (id, patch) => {
setMessages((prev) => prev.map((m) => m._id === id ? { ...m, ...patch } : m));
};
const removeMsg = (id) => {
setMessages((prev) => prev.filter((m) => m._id !== id));
};
const sendToApi = async (userText, extraContext) => {
setStreaming(true);
const apiMessages = [
...messages
.filter((m) => m.from === "citrus" || m.from === "you")
.map((m) => ({ role: m.from === "citrus" ? "assistant" : "user", content: m.text || "" })),
{ role: "user", content: userText + (extraContext ? `\n[${extraContext}]` : "") },
];
const placeholderId = addMsg({ from: "citrus", text: "", kind: "streaming" });
try {
const base = citrusApiBase();
const r = await fetch(`${base}/api/onboarding/chat/stream`, {
method: "POST",
credentials: "include",
headers: { "content-type": "application/json" },
body: JSON.stringify({ messages: apiMessages }),
});
if (!r.ok) throw new Error(`${r.status}`);
const reader = r.body.getReader();
const decoder = new TextDecoder();
let accumulated = "";
let doneData = null;
while (true) {
const { done, value } = await reader.read();
if (done) break;
const chunk = decoder.decode(value, { stream: true });
for (const line of chunk.split("\n")) {
if (line.startsWith("0:")) {
try { accumulated += JSON.parse(line.slice(2)); } catch {}
updateMsg(placeholderId, { text: accumulated.replace(/<>/g, "").replace(/\n{3,}/g, "\n\n").trimEnd() });
} else if (line.startsWith("d:")) {
try { doneData = JSON.parse(line.slice(2)); } catch {}
}
}
}
const cleanText = accumulated.replace(/<>/g, "").replace(/\n{3,}/g, "\n\n").trim();
updateMsg(placeholderId, { kind: "answer", text: cleanText });
if (doneData) {
if (doneData.phaseAdvanced && doneData.phase) setPhase(doneData.phase);
if (doneData.capturedData) setCapturedData(doneData.capturedData);
}
} catch {
removeMsg(placeholderId);
addMsg({ from: "citrus", text: "Something went wrong — please try again.", kind: "error" });
} finally {
setStreaming(false);
inputRef.current?.focus();
}
};
const send = async () => {
const text = draft.trim();
if (!text || streaming) return;
setDraft("");
addMsg({ from: "you", text });
await sendToApi(text);
};
const handleKnowledgeDone = async (uploadedFiles, textContent, isBinary) => {
if (!uploadedFiles.length) return;
const docName = uploadedFiles[0].name;
let context;
if (textContent) {
context = `User uploaded a document named "${docName}". Full content for context:\n---\n${textContent.slice(0, 4000)}\n---\nExtract anything relevant to the current phase from this content and incorporate it naturally.`;
} else {
context = `User uploaded a ${isBinary ? "binary (PDF/DOCX)" : ""} document named "${docName}" — it has been saved to the knowledge base. Acknowledge it specifically and ask what it covers or if there is anything they want to highlight from it.`;
}
addMsg({ from: "you", text: `Uploaded: ${docName}` });
await sendToApi(`I've uploaded a document: ${docName}`, context);
};
const handlePhoneSubmitted = async () => {
setShowPhone(false);
addMsg({ from: "you", text: "I've connected my WhatsApp number." });
await sendToApi("I've submitted my WhatsApp credentials. Please proceed.");
};
return (
);
}
// ---- morning briefing (replaces CitrusMorningCards on the home screen) ----
function CitrusMorningBriefing({ briefing, onPillClick }) {
if (!briefing) return null;
return (
Good morning{briefing.name ? `, ${briefing.name}` : ""}. {briefing.dateStr}