Skip to content

Chatbot Wizard Components (Tier 2)

Purpose: Step components for chatbot creation wizards
Tier: 2 (Standard Documentation)
Count: 7 components
Used In: 3D, Text, Voice chatbot wizards

Overview

Reusable step components used across all three chatbot creation wizards (3D, Text, Voice). Each component handles one type of data input or configuration.

1. ProfileComponent

Purpose: Chatbot name and description input
Used In: All 3 wizards
Type: Data collection

Props:

interface ProfileComponentProps {
  onComplete: (data: ProfileData) => void;
  initialData?: ProfileData;
}

interface ProfileData {
  name: string;
  description: string;
}

Features:

  • Text input validation
  • Character limits
  • Real-time validation
  • Save to session storage

Usage:

<ProfileComponent
  onComplete={(data) => handleProfileComplete(data)}
  initialData={savedProfile}
/>

2. PurposeComponent

Purpose: Select chatbot purpose/use case
Used In: All 3 wizards
Type: Selection

Props:

interface PurposeComponentProps {
  onPurposeSelect: (purpose: string) => void;
  selectedPurpose?: string;
}

Features:

  • Predefined purpose options
  • Single selection
  • Visual cards
  • API submission on select

API: Submits purpose to backend

3. QAComponent

Purpose: Q&A pair input
Used In: All 3 wizards
Type: Data collection

Props:

interface QAComponentProps {
  onChange: (pairs: QAPair[]) => void;
  initialPairs?: QAPair[];
}

interface QAPair {
  question: string;
  answer: string;
}

Features:

  • Add/remove pairs
  • Validation (both fields required)
  • Dynamic list
  • Session storage sync

4. TextComponent

Purpose: Manual text input for training
Used In: All 3 wizards
Type: Data collection

Props:

interface TextComponentProps {
  onChange: (text: string) => void;
  initialText?: string;
}

Features:

  • Textarea input
  • Character counter
  • Auto-save
  • Validation

5. UTMComponent

Purpose: UTM parameter configuration
Used In: 3D wizard only
Type: Advanced config

Props:

interface UTMComponentProps {
  onUTMChange: (params: UTMParams) => void;
  initialParams?: UTMParams;
}

interface UTMParams {
  source?: string;
  medium?: string;
  campaign?: string;
}

Features:

  • Optional fields
  • Parameter preview
  • Validation
  • Track marketing campaigns

6. VideoComponent

Purpose: Video selection/upload
Used In: 3D wizard (avatar videos)
Type: Media selection

Features:

  • Video preview
  • Format validation
  • Upload progress
  • Thumbnail generation

7. VoiceCard / Voicecomponettt

Purpose: Voice selection for chatbot
Used In: Voice wizard only
Type: Selection

Props:

interface VoiceProps {
  onVoiceSelect: (voice: string) => void;
  selectedVoice?: string;
}

Features:

  • Voice preview/playback
  • Multiple voice options
  • Default: "Esther Howard"
  • Audio samples

Referenced Components (From Phase 2)

AvatarSelectionComponent

Already Documented In: chatbot-creation.md
Lines: Large component
Purpose: 3D avatar selection

Key Features:

  • Avatar grid display
  • Preview on hover
  • Selection state
  • API integration

FileUploadComponent

Already Documented In: chatbot-creation.md
Purpose: PDF/DOCX file upload

Key Features:

  • Drag & drop
  • File validation
  • Progress tracking
  • Multiple files support

FormSetupComponent

Already Referenced In: Wizard documentation
Purpose: Lead generation form configuration
Type: Optional step

Features:

  • Custom field definition
  • Form preview
  • Validation rules
  • Optional step (can skip)

WebsiteComponent

Referenced: Website URL input and crawling
Purpose: Sitemap URL fetching

Key Features:

  • URL validation
  • Sitemap crawling
  • Link selection (25 or 50 URLs)
  • AbortController for cancellation

Common Patterns

1. Session Storage:

  • All components sync to sessionStorage
  • Keys: chatbot_type, selectedPurpose, text, qa, etc.
  • Persistence across wizard navigation

2. Validation:

  • Real-time field validation
  • Required field checks
  • Format validation
  • Error state display

3. Completion Callbacks:

  • onComplete, onChange, onSelect patterns
  • Parent handles state aggregation
  • Wizard controls navigation

4. Initial Data:

  • All accept initial* props
  • Support for "Continue" flow
  • Pre-populate from session storage

Integration

Wizard Usage:

// In wizard page
<ProfileComponent
  onComplete={(data) => setProfile(data)}
  initialData={sessionStorage.getItem('profile')}
/>

<PurposeComponent
  onPurposeSelect={(purpose) => setPurpose(purpose)}
  selectedPurpose={sessionStorage.getItem('selectedPurpose')}
/>

<QAComponent
  onChange={(pairs) => setQA(pairs)}
  initialPairs={JSON.parse(sessionStorage.getItem('qa') || '[]')}
/>

Validation Before Next:

const isStepValid = () => {
  if (activeTab === "profile") return profile.name && profile.description;
  if (activeTab === "data") return website || file || text || qa.length > 0;
  if (activeTab === "purpose") return selectedPurpose !== "";
  return true;
};

Summary

Component Purpose Wizards Complexity
ProfileComponent Name/desc All 3 ⭐⭐
PurposeComponent Use case All 3 ⭐⭐⭐
QAComponent Q&A pairs All 3 ⭐⭐⭐
TextComponent Manual text All 3 ⭐⭐
UTMComponent Marketing 3D only ⭐⭐
VideoComponent Media 3D only ⭐⭐⭐
VoiceCard Voice Voice only ⭐⭐⭐
AvatarSelection Avatar 3D only ⭐⭐⭐⭐
FileUpload Files All 3 ⭐⭐⭐⭐
FormSetup Lead gen All 3 ⭐⭐⭐
Website URL crawl All 3 ⭐⭐⭐⭐

"Building blocks for intelligent chatbot creation."