/* global React, window */
// First-visit onboarding tour. 7 steps with:
// - spotlight on the specific UI element being explained (cut a hole
// in the dim backdrop so the target stays bright + pulses);
// - plain-language explanations (no ROAS/HOOK/CTR jargon unless
// defined inline; no algorithm formulas in the body — those live
// in the column ? popovers for users who want to go deeper);
// - structured visual content (grade cards, action table, row map)
// instead of run-on text.
// Auto-opens once (localStorage). Re-openable from the «Guide» button
// in the top bar.
const { useState, useEffect, useRef } = React;
// Bumped to v2 for round 4 (Raya step added). Users who completed the v1
// tour will see the new tour once, then the v2 key gets set.
const ONBOARDING_KEY = "atria-proto-onboarded-v2";
// Spotlight padding around the target rect.
const SPOT_PAD = 8;
// Modal width.
const MODAL_W = 640;
// Modal estimated height for placement.
const MODAL_H_EST = 420;
function getSpotRect(selector) {
if (!selector) return null;
const el = document.querySelector(selector);
if (!el) return null;
const r = el.getBoundingClientRect();
if (r.width === 0 && r.height === 0) return null;
return {
x: Math.max(0, r.left - SPOT_PAD),
y: Math.max(0, r.top - SPOT_PAD),
w: r.width + SPOT_PAD * 2,
h: r.height + SPOT_PAD * 2,
};
}
// Decide where to place the modal so it doesn't cover the spotlight.
// Returns { left, top, arrow: "up"|"down"|"left"|"right"|null }.
function placeModal(spot) {
const vw = window.innerWidth;
const vh = window.innerHeight;
if (!spot) {
return {
left: Math.max(20, (vw - MODAL_W) / 2),
top: Math.max(20, (vh - MODAL_H_EST) / 2),
arrow: null,
};
}
const gap = 18;
const below = spot.y + spot.h + gap + MODAL_H_EST <= vh - 20;
const above = spot.y - gap - MODAL_H_EST >= 20;
const right = spot.x + spot.w + gap + MODAL_W <= vw - 20;
const left = spot.x - gap - MODAL_W >= 20;
// Prefer below, then right, then above, then left, then center as fallback.
if (below) {
const cx = spot.x + spot.w / 2;
return {
left: Math.min(Math.max(20, cx - MODAL_W / 2), vw - MODAL_W - 20),
top: spot.y + spot.h + gap,
arrow: "up",
arrowAt: cx,
};
}
if (right) {
const cy = spot.y + spot.h / 2;
return {
left: spot.x + spot.w + gap,
top: Math.min(Math.max(20, cy - MODAL_H_EST / 2), vh - MODAL_H_EST - 20),
arrow: "left",
arrowAt: cy,
};
}
if (above) {
const cx = spot.x + spot.w / 2;
return {
left: Math.min(Math.max(20, cx - MODAL_W / 2), vw - MODAL_W - 20),
top: spot.y - gap - MODAL_H_EST,
arrow: "down",
arrowAt: cx,
};
}
if (left) {
const cy = spot.y + spot.h / 2;
return {
left: spot.x - gap - MODAL_W,
top: Math.min(Math.max(20, cy - MODAL_H_EST / 2), vh - MODAL_H_EST - 20),
arrow: "right",
arrowAt: cy,
};
}
return {
left: Math.max(20, (vw - MODAL_W) / 2),
top: Math.max(20, (vh - MODAL_H_EST) / 2),
arrow: null,
};
}
// ===== Structured-content building blocks =====
function GradeCard({ letter, color, label, doIt, bg }) {
return (
{letter}
{label}
{doIt}
);
}
function BucketCard({ glyph, name, meaning, color }) {
return (
{glyph && {glyph}}
{name}
{meaning}
);
}
function ActionRow({ verb, meaning, behavior, color }) {
return (
{verb}
{meaning}
{behavior}
);
}
// Visual map of a Radar row: 5 labeled blocks left-to-right, with
// a numbered callout for each so the body text can reference them.
function RowMap({ t }) {
const blocks = [
{ n: 1, name: t("Creative", "创意"), sub: t("thumbnail + title + format", "缩略图 + 标题 + 形式"), flex: 2.4 },
{ n: 2, name: t("Diagnosis", "诊断"), sub: t("one-line problem / strength", "一句话:问题或优势"), flex: 2.6 },
{ n: 3, name: t("Grade", "评级"), sub: t("A · B · C · D", "A · B · C · D"), flex: 1 },
{ n: 4, name: t("Money", "钱"), sub: t("spend · ROAS", "花费 · 投资回报率"), flex: 1.4 },
{ n: 5, name: t("Action", "动作"), sub: t("button: what to do", "按钮:该做什么"), flex: 1.6 },
];
return (
{blocks.map((b, i) => (
{b.n}{b.name}
{b.sub}
))}
);
}
// Simple horizontal step flow (3 nodes + arrows).
// Sidebar tour row — used in Step 07 to describe each sidebar entry.
function SidebarTourRow({ kind, name, body, current, hot }) {
const groupColor = kind === "creation" ? "#7A4D9E" : "var(--accent)";
return (
{name}
{current && (
YOU ARE HERE
)}
{hot && (
HOT
)}
{body}
);
}
function FlowSteps({ steps }) {
return (
{steps.map((s, i) => (
{i + 1}{s.title}
{s.body}
{i < steps.length - 1 && (
→
)}
))}
);
}
// ===== Step content =====
// Each step: eyebrow, title, target (CSS selector, optional), body (JSX).
function buildSteps(t) {
return [
{
eyebrow: t("Welcome", "欢迎"),
title: t("30 seconds to learn the product.", "花 30 秒认识一下这个产品。"),
target: null,
body: (
<>
{t(
"Atria helps you manage your ads. You give it a bunch of ads that are currently running; it tells you which ones are doing well (keep them), which ones aren't (fix them), and ships your fixes straight back to the ad platform.",
"Atria 帮你管你正在投放的广告。你把现在跑着的广告交给它,它告诉你哪些表现好(继续投)、哪些不好(改一下)、改完直接送回投放平台。"
)}
{t(
"The next 6 steps walk you through this screen — what each part is, and how to actually use it.",
"接下来 6 步,带你看一遍这个屏幕 —— 每一块是干什么的、怎么用。"
)}
{t(
"Tip: ← → keys or buttons below to walk through. Esc skips. Reopen any time from the «Guide» button (top right).",
"提示:按 ← → 或下方按钮翻页。Esc 跳过。想再看一次?点顶栏右上角的「新手引导」按钮。"
)}
{t(
"The tabs at the top of the table split every ad into one of these four groups. Click a tab to see only that group. The number on each tab is how many ads are in that bucket right now.",
"表格上方的 tab 把每条广告分到下面 4 个组里。点一个 tab,只看那一组。tab 上的数字 = 当前这组里有几条广告。"
)}
),
},
{
eyebrow: t("Step 02 · Reading a row", "第 2 步 · 一行怎么读"),
title: t("Each row = one ad. Five blocks of info, left to right.", "每一行 = 一条广告。从左到右 5 块信息。"),
target: 'table.radar tbody tr:first-child',
body: (
<>
1 {t("Creative", "创意")}. {t("Which ad this row is. Thumbnail, headline, and whether it's an image or video.", "告诉你这一行是哪条广告。缩略图、标题、是图片还是视频。")}
2 {t("Diagnosis", "诊断")}. {t("A plain-English line — e.g. «Headline isn't hooking people», «Conversion dropped».", "一句白话 —— 比如「标题钩不住人」「转化掉了」。")}
3 {t("Grade", "评级")}. {t("One letter, A to D. (Next step explains.)", "一个字母,A 到 D。(下一步会讲。)")}
4 {t("Money", "钱")}. {t("How much this ad has spent, and how much revenue it brought back per $1 (ROAS = revenue ÷ spend).", "这条广告花了多少钱;每 1 元能挣回多少(ROAS = 营收 ÷ 花费)。")}
5 {t("Action", "动作")}. {t("A button that says what Atria recommends doing next. (Step 4 covers the verbs.)", "一个按钮,写着 Atria 建议你下一步做什么。(第 4 步会讲所有动词。)")}
),
},
{
eyebrow: t("Step 03 · The grade", "第 3 步 · 评级"),
title: t("Every ad gets one letter — A, B, C, or D.", "每条广告都打一个字母 —— A、B、C 或 D。"),
target: '[data-tour="grade-col"]',
body: (
<>
{t(
"The letter answers one question: «Compared to your other ads in the same vertical, how is this one doing?» A = top, D = bottom. It's relative — not an absolute pass/fail line.",
"字母只回答一个问题:「跟你账号下同类目的其他广告比,这条排第几?」A = 排前面,D = 排后面。是相对位置,不是绝对的合格线。"
)}
{t(
"Want to see the exact formula? Click the small «?» next to the «Grade» column header — it spells out the algorithm and which industry benchmarks (Meta, Google, etc.) inspired it.",
"想看具体公式?点表头「评级」旁边的小「?」 —— 里面写了完整算法,以及参照的行业标准(Meta、Google 等)。"
)}
),
},
{
eyebrow: t("Step 04 · The action button", "第 4 步 · 右边的动作按钮"),
title: t("The rightmost column tells you exactly what to do.", "最右边那列写着「该做什么」。"),
target: '[data-tour="action-col"]',
body: (
<>
{t(
"Five possible verbs. Light ones confirm right inside the row (2 seconds). Heavy ones open a detail page because they need AI to think.",
"一共 5 个动词。轻的(只需要在投放平台改个开关)在行内秒确认。重的(需要 AI 思考)会打开详情页。"
)}
{t("Button", "按钮")}
{t("What it means", "什么意思")}
{t("Click → what happens", "点了之后")}
{t(
"Every row also has a «Why?» link. Click it to open the detail page on the «Performance» tab — read first, act after.",
"每一行还有一个「为什么?」链接。点它会打开详情页并直接落到「投放表现」tab —— 先看懂,再动手。"
)}
),
},
{
eyebrow: t("Step 05 · Create new ads with Raya", "第 5 步 · 用 Raya 创建新广告"),
title: t("«+ Create ad creative» talks to Raya — Atria's AI agent.", "「+ 创建广告创意」会带你去跟 Raya 对话 —— Atria 的 AI 代理。"),
target: '[data-tour="create-ad-btn"]',
body: (
<>
{t(
"See the «+ Create ad creative» button at the top right? Click it and pick «Talk to Raya». You type ONE sentence — «3 variants of my top coffee ad for Gen-Z, urgency tone, ship by Friday» — and Raya pulls your data, generates the variants, and pushes the winner back to Meta.",
"看到右上角的「+ 创建广告创意」了吗?点它,选「跟 Raya 对话」。你打 1 句话 —— 比如「把我最强的咖啡广告出 3 个 Gen-Z 改版,紧迫感语气,周五前上线」 —— Raya 会自己调数据、出变体、把最好的那个推回 Meta。"
)}
{t(
"Look for the «HOT» badge on «AI Playground · Raya» in the left sidebar — that's where the conversation panel lives. You can also open it directly from there.",
"左边栏「AI 实验场 · Raya」上有一个「HOT」徽标 —— 对话面板就在那里。也可以从那里直接打开。"
)}
),
},
{
eyebrow: t("Step 06 · AI Playground — your sandbox", "第 6 步 · AI 实验场 —— 你的沙盒"),
title: t("Explore without a brief. Talk to Raya, or pick from saved demos.", "没有 brief 也能先探索。跟 Raya 对话,或者从样例库挑一个。"),
target: '[data-tour="nav-playground"]',
body: (
<>
{t(
"Radar = data-grounded — every iteration starts from a specific ad's performance numbers. AI Playground = exploration — try a brand voice, an audience, a visual style you don't have an ad for yet. Output stays here unless you push it.",
"Radar 是「数据驱动」 —— 每次迭代都从某条广告的具体数据出发。AI 实验场是「自由探索」 —— 试一种品牌语气、一群受众、一种你还没真投过的视觉风格。产出留在这里,除非你主动推上去。"
)}
{t("Raya · conversational", "Raya · 对话式")}
HOT
{t("One sentence in, 4 variants out. Best for fast «what if we tried…».", "一句话进,4 个变体出。适合「要不要试试……」这种快速实验。")}
{t("Saved demos · curated", "样例库 · 团队精选")}
{t("Six prompt × variant presets the team's been iterating on. See what «good» looks like first.", "团队这阵子在迭代的 6 组 prompt 预设。先看「好的产出」长什么样。")}
{t(
"Variants you like → click «Push to platform» → goes live as a new ad in Meta + shows up at the top of Radar with a «just created» glow. Closes the loop visibly.",
"看上的变体 → 点「推到投放平台」 → 作为新广告上线 Meta + 在 Radar 顶部出现「刚刚创建」高光。闭环肉眼可见。"
)}
),
},
{
eyebrow: t("Step 07 · The rest of the sidebar", "第 7 步 · 左边栏其他模块"),
title: t("Five more things the sidebar gets you to.", "左边栏还有 5 个模块,看一下分别管什么。"),
target: '[data-tour="nav-overview"]',
body: (
<>
{t(
"The sidebar is grouped into «Analytics» (where the data lives) and «Creation» (where new ads come from). Here's what each entry does:",
"左边栏分两组:「数据分析」(看数据)和「创意生成」(做新广告)。每一项干什么:"
)}
{t(
"«Brands» (at the very bottom) lets you switch between brands you manage — same UI, different ad inventory. Top-left brand chip also switches.",
"「品牌」(最下面)在你管理的多个品牌之间切换 —— 同一套界面,不同的广告库。左上角的品牌 chip 也能切。"
)}
),
},
{
eyebrow: t("Step 08 · What happens after you iterate", "第 8 步 · 迭代之后"),
title: t("Click «Iterate» → AI does 3 things, you stay in the loop.", "点了「迭代」之后,AI 帮你做 3 件事。"),
target: '[data-tour="nav-iterations"]',
body: (
<>
{t(
"Every iteration is logged. The full chain — original ad → what you changed → which variant shipped → how it performs live — lives in the «Iteration history» sidebar entry (highlighted on the left).",
"每一次迭代都有完整记录。整条链:原广告 → 改了什么 → 哪个改版上线了 → 上线后的表现,都在左侧「迭代历史」里(高亮的那个)。"
)}
),
},
{
eyebrow: t("Step 09 · Help is everywhere", "第 9 步 · 哪里找帮助"),
title: t("Stuck? Three places to look.", "看不懂?去这 3 个地方。"),
target: '[data-tour="guide-btn"]',
body: (
<>
?
{t("The little «?» circles", "小「?」圆圈")}
{t("On any column header with a non-obvious meaning. Click to see what the score is and how it's calculated.", "出现在含义不太直白的列头旁边。点开看那个分数是什么、怎么算出来的。")}
EN | 中
{t("Top bar buttons", "顶栏按钮")}
{t("EN | 中 switches language anywhere. «Design rationale» (why we built it this way). «Docs» (full external documentation).", "EN | 中 随时切语言。「设计思路」看「为什么这么改」。「文档」打开完整外部文档。")}
?
{t("«Guide» button — top right", "「新手引导」按钮 —— 在顶栏右上角")}
{t("Reopens this whole tour any time. Lost? Forgot something? Click it.", "随时重开整段引导。看忘了?再点一次就行。")}
),
},
];
}
// ===== Main component =====
function Onboarding({ onClose }) {
const t = window.useT();
const { Icon } = window;
const [step, setStep] = useState(0);
const [tick, setTick] = useState(0); // forces spot recompute on resize / step
const steps = buildSteps(t);
const cur = steps[step];
const last = step === steps.length - 1;
const first = step === 0;
const [spot, setSpot] = useState(() => getSpotRect(cur.target));
// Recompute spot when step changes or window resizes. Multiple
// delayed measurements catch layout shifts from images loading,
// language toggle, etc.
useEffect(() => {
function recompute() {
setSpot(getSpotRect(cur.target));
}
recompute();
const ids = [setTimeout(recompute, 80), setTimeout(recompute, 280)];
window.addEventListener("resize", recompute);
window.addEventListener("scroll", recompute, true);
return () => {
ids.forEach(clearTimeout);
window.removeEventListener("resize", recompute);
window.removeEventListener("scroll", recompute, true);
};
}, [step, tick, cur.target]);
useEffect(() => {
const onKey = (e) => {
if (e.key === "Escape") { finish(); }
else if (e.key === "ArrowRight") { if (last) finish(); else setStep(s => s + 1); }
else if (e.key === "ArrowLeft" && !first) { setStep(s => s - 1); }
};
window.addEventListener("keydown", onKey);
return () => window.removeEventListener("keydown", onKey);
}, [step, last, first]);
function finish() {
try { localStorage.setItem(ONBOARDING_KEY, "1"); } catch {}
onClose && onClose();
}
const pos = placeModal(spot);
const dim = "rgba(20, 16, 12, 0.55)"; // darker so the spotlight reads as "lit"
return (