Bot UI

The Bot UI is a React-based frontend interface that provides both text and voice chat capabilities for the AngelCX AI agent platform. It directly integrates with the AI Engine backend for all conversational interactions and UI configuration.

Technology Stack

Framework: React 19 with TypeScript
UI Components: shadcn/ui (based on Radix UI)
Styling: Tailwind CSS
API Management: TanStack Query
Voice Integration: Ultravox Client SDK
Utilities: libphonenumber-js, Lucide React Icons

Project Structure

src/
├── components/          # React components
│   ├── text-chat/      # Text chat related components
│   ├── voice-call/     # Voice call related components
│   ├── ui/            # shadcn/ui components
│   └── hooks/         # Custom React hooks
├── services/
│   ├── api/           # REST API integrations
│   └── ultravox/      # WebRTC call handling
└── lib/
    ├── constants.ts   # Global constants
    ├── phone-util.ts  # Phone number validation
    └── utils.ts       # Utility functions

Core Components

Text Chat Implementation

sequenceDiagram participant User participant TextBot participant AIEngine participant Bedrock User->>TextBot: Start chat TextBot->>AIEngine: Create session AIEngine-->>TextBot: Session info loop Chat Interaction User->>TextBot: Send message TextBot->>AIEngine: Generate response AIEngine->>Bedrock: Process message Bedrock-->>AIEngine: AI response AIEngine-->>TextBot: Response TextBot-->>User: Display message end

Voice Call Implementation

sequenceDiagram participant User participant VoiceBot participant AIEngine participant Ultravox User->>VoiceBot: Initiate call VoiceBot->>AIEngine: Create voice session AIEngine->>Ultravox: Setup call Ultravox-->>AIEngine: Join URL AIEngine-->>VoiceBot: Call details VoiceBot-->>User: Connect call loop Voice Interaction User->>Ultravox: Audio stream Ultravox->>AIEngine: Transcription Ultravox-->>User: Voice output end

Design System

The UI utilizes shadcn/ui components for a consistent and accessible interface:

Core Components
- Button - Multi-variant button component
- Badge - Status and label indicators
- Tooltip - Contextual information display
- Cards and containers
- Typography system
Theme Configuration
- Located in index.css
- Dynamic theming through CSS variables
- Custom color tokens in :root

API Integration

TanStack Query Implementation

Key queries and mutations:

// UI Configuration
const { data: uiConfig } = useQuery({
  queryKey: ['uiConfig'],
  queryFn: fetchUiConfig
});

// Session Management
const createSession = useMutation({
  mutationFn: createNewSession,
  onSuccess: (data) => {
    // Handle successful session creation
  }
});

// Message Generation
const generateMessage = useMutation({
  mutationFn: generateAIResponse,
  onSuccess: (response) => {
    // Update chat interface
  }
});

Voice Integration with Ultravox

The VoiceBot component leverages the Ultravox SDK to enable WebRTC-based voice communication. It initializes the Ultravox client, establishes a voice session by connecting to a join URL, and listens for live transcription events to update the user interface in real time.

Key Features

1. Text Chat

Real-time messaging
Message history
Typing indicators
File attachment support
Rich text formatting

2. Voice Calls

WebRTC integration
Live transcription
Voice quality optimization
Call status monitoring
Fallback handling

3. User Experience

Responsive design
Multi-chat mode support
Loading states
Error handling

4. Advanced Features

Human agent transfer
Context preservation
Session recovery
Analytics integration
Custom styling support

Error Handling

Network Issues
- Automatic reconnection
- Offline message queueing
- Session state preservation
- User feedback display
Voice Call Failures
- Graceful fallback to text
- Connection quality monitoring
- Automatic recovery attempts
- Clear user notifications

Performance Optimization

Resource Management
- Audio stream optimization
- Message batching
- Image compression
- Memory cleanup
Loading Strategies
- Progressive enhancement
- Lazy component loading
- Resource preconnect
- Asset prefetching

Integration with AI Engine

The Bot UI directly communicates with the AI Engine for:

Session Management
- Creation and termination
- State preservation
- Context management
UI Configuration
- Theme customization
- Behavior settings
- Feature toggles
- Branding elements
Conversation Handling
- Message processing
- Response generation
- Voice call setup
- Transcription management