abc parcel - AI Customer Service Platform

Overview

ABC Parcel showcases modern AI customer service capabilities for a parcel delivery company. The platform demonstrates how businesses can leverage large language models and voice AI to provide 24/7 multilingual customer support. Built as a Progressive Web App, it features intelligent RAG-powered chat, real-time voice conversations with audio-reactive animations, and seamless trilingual support across English, Spanish, and Lithuanian.

Technical Highlights

Category-Aware RAG

Two-phase retrieval with 14 predefined categories. 40% improvement in response relevance with intelligent fallback.

Audio-Reactive Voice UI

Real-time volume sampling from voice SDK with CSS custom property animations for visual feedback.

Unified Multilingual Prompts

Single system prompt with language detection. Adding new languages only requires translating FAQ content.

Lazy Loading Optimization

3s faster cold start. ML models and voice SDK load on-demand.

Tech Stack

Application

Vue 3 + Quasar PWA
FastAPI
Pinia state management
vue-i18n (trilingual)

AI / Voice

ChromaDB + RAG
Sentence-transformers
ElevenLabs voice
LLM API

Category-Aware RAG

Generic semantic search often returned tangentially related content. The solution: a two-phase retrieval strategy with 14 predefined categories. The system first detects query category from keywords, then filters ChromaDB results by category with graceful fallback to full search if filtered results are empty.

# Phase 1: Auto-detect query category
category = detect_category(query)  # 14 predefined categories

# Phase 2: Filter by category, fallback to full search
results = collection.query(
    query_embeddings=[embedding],
    where={"category": category}  # Precision filter
)

# Graceful fallback if filtered results empty
if not results['documents'][0]:
    results = collection.query(query_embeddings=[embedding])

Result: 40% improvement in response relevance for category-specific queries while maintaining recall through intelligent fallback.

Performance Optimization

The embedding model (sentence-transformers) and voice SDK are heavy dependencies. Lazy loading patterns on both frontend and backend ensure fast initial load times.

Backend - Model Loading

_embedding_model = None

def get_embedding_model():
    global _embedding_model
    if _embedding_model is None:
        # Load only on first RAG query
        _embedding_model = SentenceTransformer(
            'all-MiniLM-L6-v2'
        )
    return _embedding_model

Frontend - SDK Dynamic Import

async startConversation() {
  // Import SDK only when voice call initiated
  const { Conversation } = await import(
    '@11labs/client'
  )
  this.conversation = await Conversation
    .startSession(config)
}

Result: Backend cold start reduced by 3 seconds. Voice SDK loads on-demand only when needed.

Challenges Solved

Multilingual Without Separate Prompts

Supporting three languages (English, Spanish, Lithuanian) would traditionally require separate system prompts. Instead, a unified prompt instructs the LLM to detect and respond in the user's language. Combined with locale-specific RAG collections (faq_en, faq_es, faq_lt), this ensures contextually grounded responses in the correct language.

Audio-Reactive Voice UI

Creating an engaging voice experience required visual feedback for connection states and speaking detection. Built a reactive animation system using CSS custom properties and real-time volume sampling from the voice SDK's input/output levels, providing intuitive feedback during conversations.

API Retry with Timeout Escalation

LLM API calls occasionally timeout under high load. Implemented exponential backoff with timeout escalation: starting at 90s, escalating by 1.5x up to 180s maximum. Result: 95% reduction in timeout-related failures with graceful recovery instead of error messages.

Differentiated Rate Limiting

Different endpoints have different cost profiles. Text chat gets 10 requests/minute (moderate limit), while voice call signed URLs get 10 requests/hour (stricter limit due to higher cost). This prevents API abuse while maintaining good UX for legitimate users.

Key Features

Intelligent Chat Support

RAG-powered conversational AI that retrieves relevant information from a knowledge base before generating contextual responses. 500-character chunks with 50-char overlap provide optimal balance between context and precision.

Voice Call Integration

Real-time voice conversations with AI agents featuring audio-reactive UI animations. Smooth, performant CSS animations respond to actual audio levels, providing intuitive feedback during voice conversations.

Trilingual Support

Full internationalization across English, Spanish, and Lithuanian with locale-aware AI responses. The entire UI, chat responses, and voice output adapt to the selected language. Language can be switched at any time without losing context.

Progressive Web App

Installable on mobile devices with offline support. Built with Quasar's PWA capabilities for a native-like experience across all platforms.