Web Console & UI

​

Purpose

• Creating and managing voice assistants
• Viewing and analyzing conversations
• Managing knowledge bases and documents
• Configuring credentials and integrations
• Monitoring performance and analytics
• Team collaboration and workspace management

​

Key Features

​

Assistant Management

• Create new voice assistants with flexible configuration
• Version control for assistant configurations
• Real-time testing and debugging
• Performance analytics and call metrics

​

Conversation Viewer

• Search and filter conversations by date, agent, or keywords
• View complete conversation transcripts
• Listen to audio recordings
• Analyze conversation quality and metrics
• Export conversation data

​

Knowledge Base Management

• Upload documents (PDF, DOCX, XLSX, CSV, MD, HTML)
• Manage document chunks and embeddings
• Full-text search across knowledge base
• Semantic search with similarity scores
• Document versioning and organization

​

Integration Configuration

• Connect external AI providers (OpenAI, Anthropic, etc.)
• Configure STT/TTS services
• Manage telephony integrations (Twilio, Vonage, etc.)
• Secure credential storage with encryption
• Provider health monitoring

​

Analytics & Monitoring

• Call duration and quality metrics
• LLM token usage and costs
• Response time analysis
• Error tracking and debugging
• Real-time conversation monitoring

​

Team Management

• Multi-user workspace support
• Role-based access control
• Team member invitation
• Activity logging and audit trails

​

Accessing the Dashboard

​

Local Development

# After starting services with Docker
open http://localhost:3000

# Or with manual setup
yarn start:dev
# Then navigate to http://localhost:3000

​

Production Deployment

https://your-domain.com
# Through Nginx reverse proxy on port 8080

​

Technology Stack

​

Environment Configuration

REACT_APP_API_URL=http://localhost:8080
REACT_APP_WS_URL=ws://localhost:8080
REACT_APP_ENV=development|production

​

Build and Deployment

​

Development Server

cd ui
yarn install
yarn start:dev

​

Production Build

cd ui
yarn install
yarn build

​

Docker Deployment

# See docker/ui/Dockerfile
# Builds React app and serves via Nginx

# Run with Docker
docker compose up ui

# Or build manually
docker build -f docker/ui/Dockerfile -t rapida-ui:latest .
docker run -p 3000:3000 rapida-ui:latest

​

Frontend Architecture

​

Directory Structure

ui/src/
├── index.tsx              # Entry point
├── app/
│   ├── index.tsx          # Root App component
│   ├── components/        # Reusable UI components
│   ├── pages/             # Page components
│   └── routes/            # Route definitions
├── configs/               # Configuration files
├── context/               # React Context providers
├── hooks/                 # Custom React hooks
├── icons/                 # Icon components
├── models/                # Type definitions
├── styles/                # Global styles
├── types/                 # TypeScript types
├── utils/                 # Helper functions
└── workspace/             # Workspace-specific features

​

Key Components

• Login/signup forms
• JWT token management
• OAuth integrations (Google, GitHub, etc.)
• Session management

• Create assistant wizard
• Assistant list and detail views
• Version management
• Testing interface

• Conversation list with filtering/search
• Message timeline with audio playback
• Transcript display with highlighting
• Metrics and analytics

• Document upload interface
• Knowledge base browser
• Chunk viewer and editor
• Search interface

• Credential input forms
• Provider configuration
• API key management
• Connection testing

​

Performance Optimization

​

Code Splitting

• Lazy loading of route components
• Dynamic imports for heavy modules

​

Caching

• Browser cache for static assets
• Redis caching on backend for API responses

​

Bundling

• Minification and compression
• Tree shaking for unused code
• Asset optimization

​

Development Workflow

​

Setup Local Development

cd ui

# Install dependencies
yarn install

# Start development server
yarn start:dev

# Run linting
yarn lint
yarn lint:fix

# Run tests
yarn test

# Build for production
yarn build

# Build Tailwind CSS
yarn build:css

​

Debugging

# Chrome DevTools
# F12 or Right-click → Inspect

# Source Maps
# Enabled in development, disabled in production

# Network Tab
# View API requests and responses

# React DevTools
# Browser extension for React debugging

​

Styling

​

Tailwind CSS

# Watch mode (development)
yarn build:css

# One-time build (production)
yarn build:css

​

Custom Styles

• src/styles/index.css
• src/styles/globals.css

• src/components/{Component}/{Component}.module.css

​

Troubleshooting

​

Port 3000 Already in Use

# Find process using port 3000
lsof -i :3000

# Kill process
kill -9 <PID>

# Or use different port
PORT=3001 yarn start:dev

​

Blank Page After Login

# Clear browser cache
# Ctrl+Shift+Delete (Windows) or Cmd+Shift+Delete (Mac)

# Check browser console for errors
# F12 → Console tab

# Check Network tab for failed requests

​

API Connection Issues

# Verify API is running
curl http://localhost:8080/health

# Check CORS headers
# Network tab → API request → Response Headers

# Verify REACT_APP_API_URL is correct
echo $REACT_APP_API_URL

​

Next Steps

• Web API Backend
• Installation Guide
• Configuration