Get Started – Step 3: Train ConversionIQ AI

Route

Path: /get-started (step 3)
Parent: stepper.md

Historical design reference

This Figma link is kept for legacy context only. If it differs from the onboarding docs or the shipped overlay, follow the docs and current implementation.

Figma: Get started – Step 3 (draft)

Purpose (business goal)

Create or configure the workspace knowledge base so AI-driven experiences (Comment Responder, Chatti Live) can respond consistently with brand voice and compliance.

User roles & permissions

Workspace Admin
Permission: kb.edit, kb.publish (TBD)

Reference: Roles & Permissions Model

Layout structure

Fullscreen overlay wrapper (see stepper.md)
Top-right controls (in overlay header):
- Chatti Live pill (optional; opens assistant panel)
- Close icon (dismiss overlay)
Step header: horizontal 3-step indicator (interactive; see stepper.md)
Title + subtitle explaining “Train AI platform” (copy is UI-level)
Step 3 card (see §Step 3 card structure below)
Footer actions (outside the card):
- Previous
- Primary completion CTA: Complete (ends onboarding when Step 3 requirements are met; disabled until validateKbDraft(draft).isComplete === true)

Step 3 card structure

The main content area below the title/subtitle is a single card. Nothing else sits between the subtitle and the footer buttons.

Card wrapper — Tailwind tokens: rounded-[20px] border border-[#e5e5e5] bg-white px-6 py-2 shadow-[0px_1px_2px_0px_rgba(0,0,0,0.05)]

Card header row (inside the card, above the accordion):

Left: database icon (material-symbols-outlined manage_search or equivalent) + knowledge base name (defaults to "My Knowledge Base" — see DEFAULT_KB_NAME in src/types/kb-draft.ts)
Right: status badge — Incomplete (amber/muted) when validateKbDraft(draft).isComplete === false; Complete (green) when true
The header row is rendered by the parent (Step3TrainAi), not by KbSettingsAccordion
Full-width divider requirement: the border-b on the card header row must span the full width of the card, matching the accordion item dividers. Because the card has px-6, a border-b placed on a normally-positioned inner div would be inset by 24 px on each side. To achieve full-bleed, apply the same pattern used by AccordionSectionRow in kb-settings-accordion.tsx: wrap the header row in a div with -mx-6 (negative horizontal margin to cancel the card padding) and border-b border-[#e5e5e5], then place the inner content (icon + name + badge) in a child div with px-6 so text and icons remain aligned with the accordion content. Example:
```
{/* Full-bleed divider — -mx-6 cancels card px-6 so border spans edge-to-edge */}
<div className="-mx-6 border-b border-[#e5e5e5]">
  <div className="flex items-center justify-between px-6 py-3">
    <div className="flex items-center gap-2">
      <span className="material-symbols-outlined text-[20px]">manage_search</span>
      <span className="text-[14px] font-medium text-[#333]">{DEFAULT_KB_NAME}</span>
    </div>
    <StatusBadge complete={isComplete} />
  </div>
</div>
```

Card body — accordion only:

<KbSettingsAccordion value={draft} onChange={setDraft} /> renders directly inside the card wrapper, below the header row
All accordion sections are closed by default (user expands sections as needed)
Sections: Brand personality → Custom objectives (12 sections total; see Component Spec: KbSettingsAccordion §3)
The used-by section is hidden on Step 3 (usedBy prop omitted); it is only shown on the KB detail/editor page

Components used

Knowledge Base Card: Component: Knowledge Base Card
Knowledge Base Mapping: Component: Knowledge Base Mapping

States

Empty: no KB exists (MVP expectation is that a default KB exists; see Business logic)
Loading: fetch KB drafts/published versions
Error: validation errors / publish conflicts
Complete: KB published and active

Business logic (high-level)

Completion gate: Step 3 completion is gated only by the required Brand personality fields (see BRAND_PERSONALITY_REQUIRED in src/lib/kb-validation.ts). The Complete button is disabled until validateKbDraft(draft).isComplete === true, which checks only Brand personality fields.
Publish boundary enables auditability and stability.
MVP assumption:
- By default, users already have a workspace knowledge base, but it must be completed in this step to unlock full AI capabilities.
Onboarding completion boundary (MVP):
- Completing Step 3 marks onboarding as complete.
- After Step 3 completion, the Get Started fullscreen overlay should no longer appear on authenticated entry (see Get Started – Stepper (3 steps)).
- Step 3 draft must be persisted to the resolved onboarding KB (not the legacy DEFAULT_KB_ID): When the user clicks Complete, the current draft (name, and validation result for status) must be written to the onboarding target’s knowledge base in the app’s KB store (see Default Workspace, Knowledge Base & Agent §6). The overlay passes the draft to the completion handler (e.g. onComplete(draft)); the shell (or provider) updates the onboarding KB with name and status (“complete” if validateKbDraft(draft).isComplete, else “incomplete”) so that the KB card and any other views show the same data the user set in Step 3.
- The onboarding KB id is resolved via the onboarding target resolver, ensuring it targets the correct KB even if the original default was renamed or deleted.
- Step 2 staged connections are committed here: Clicking Complete is the only point where the current session’s staged Get Started channel connections are converted into real workspace channels.

Domain refs:

API dependencies

GET /knowledge-bases?workspace_id=...
POST /knowledge-bases
POST /knowledge-bases/{id}/publish

Enterprise constraints

Compliance controls may require approval workflow (future)

Edge cases

Publish blocked by missing required compliance fields

Security & compliance considerations

Audit KB publish events
Prevent unauthorized edits

Reference: Security & Compliance

Analytics events (if applicable)

kb.created
kb.published

Reference: Analytics Events (MVP)