Skip to content

Hammad64-bits/revsmith-frontend

Repository files navigation

RevSmith AI — Frontend

An enterprise-grade AI customer support platform that handles conversations across multiple social channels, seamlessly hands off between AI agents and human agents, and delivers deep analytics on performance, sentiment, and resolution rates.


🧠 What Is This?

RevSmith is a full-stack SaaS platform that lets businesses deploy intelligent AI sales/support agents across WhatsApp, Instagram DM, Facebook Messenger, and a custom embeddable chat widget. The AI agents can:

  • Hold context-aware conversations with real customers
  • Execute complex tool calls (e.g., look up orders, check stock, create tickets)
  • Retrieve knowledge from custom RAG-backed knowledge bases
  • Automatically hand off conversations to human agents when needed
  • Tag, classify, and analyze conversations with AI-driven sentiment and intent detection

This repository contains the Next.js frontend, which also serves as the backend-for-frontend (BFF) — hosting API routes, server-side services, background job handlers, and Supabase Edge Function definitions alongside the UI.


⚙️ Tech Stack

🖥️ Frontend

Technology Purpose
Next.js 14 (App Router) Core framework — SSR, API routes, layouts
React 18 Component model
TypeScript Strict type safety across the entire codebase
Tailwind CSS v3 Utility-first styling
Radix UI Accessible, headless UI primitives (dialogs, tabs, menus, etc.)
shadcn/ui Pre-built component library on top of Radix
Framer Motion Animations and transitions
Recharts Analytics charts and data visualizations
Lucide React / Phosphor Icons / Flaticon UIcons Icon libraries
React Hook Form + Zod Form state management and schema validation
MDX Editor / SimpleMDE Rich markdown editors for knowledge base content
Embla Carousel Carousel/slider components
next-themes Dark/light mode support
Sonner Toast notifications
cmdk Command palette
date-fns / react-day-picker Date utilities and pickers
react-resizable-panels Resizable split-panel layouts
DOMPurify XSS-safe HTML sanitization for AI message rendering
marked / markdown-it / react-markdown Markdown rendering for chat messages
react-syntax-highlighter Code block rendering in chat

🗄️ Database & Backend

Technology Purpose
Supabase PostgreSQL database, Auth, Realtime, Row-Level Security (RLS)
Supabase SSR (@supabase/ssr) Server-side Supabase client for Next.js
Supabase Edge Functions (Deno) Serverless functions for Stripe billing webhooks, plan fetching, and checkout
Supabase RLS Policies Multi-tenant data isolation by organization_id
89 SQL Migrations Full schema versioning — tables, RPC functions, triggers, and policies
Redis Caching layer for AI integration state and action lists
PostgreSQL RPC Functions Complex server-side queries (conversation summaries, analytics aggregation, human handoff queues)

Key database tables:

  • organizations, users — Multi-tenant org structure with role-based access
  • agents — AI agent configurations (prompts, knowledge base links, welcome messages)
  • integration — Per-agent third-party app connections (Nango OAuth)
  • conversation_details, chat_details — Full conversation history with tool call logs
  • analytics — AI performance, sentiment scores, resolution data
  • human_handoff_queue — Queue management for human agent assignment
  • tags — Conversation classification labels
  • widget — Embeddable chat widget configurations
  • subscriptions, customers — Stripe billing records

🤖 AI & Agent Infrastructure

Technology Purpose
OpenAI SDK LLM calls for agent responses
Custom FastAPI Backend Dedicated AI execution service (tool calling, RAG, agent orchestration)
Tool Calling AI agents can invoke per-integration actions (e.g., Shopify order lookup, Google Calendar, HubSpot CRM)
Advanced RAG Agents are linked to knowledge bases; documents are chunked, embedded, and retrieved per conversation
Composio Third-party action framework for 100+ app integrations
Nango OAuth connection management for external integrations
Custom Tool Builder UI for defining custom tools with JSON schema inputs/outputs, docstrings, and expected outputs

📱 Social Media Channels

Channel Implementation
WhatsApp Official WhatsApp Business API webhooks — inbound/outbound messages, media
Instagram DM Instagram Graph API — message receive/send, account linking
Facebook Messenger Meta Messenger Platform — page-level message routing
Chat Widget Embeddable JS widget with fingerprinting (@fingerprintjs/fingerprintjs) for anonymous user tracking

All channels are managed through a Consolidated Inbox — a unified interface where human agents can monitor, take over, and close conversations from any channel.


⚡ Background Jobs & Event Processing

Technology Purpose
Inngest Durable background function execution
Vercel Hosting, Cron Jobs, Edge Functions, Analytics

Inngest functions:

  • handle-whatsapp-message — Debounced per phone number (3s window), 5-min timeout
  • handle-instagram-message — Debounced per sender ID
  • handle-messenger-message — Debounced per sender ID
  • handle-conversation-handover — Queues conversation for human agent assignment
  • handle-conversation-close — Marks conversations as resolved
  • handle-conversation-follow-up — Sends follow-up messages automatically
  • handle-conversation-acceptance — Transitions conversation to human agent mode

All functions have per-key concurrency controls to prevent race conditions on the same conversation or user.


💳 Billing & Subscriptions

Technology Purpose
Stripe Subscription billing, checkout sessions, webhooks
Polar.sh SDK Alternative billing provider support
Supabase Edge Functions create-checkout, get-plans, get-stripe-products, payments-webhook

Subscription tiers gate features like the number of active tool actions per agent, with real-time capacity checks before enabling integrations.


📊 Analytics

Four analytics modules are built into the dashboard:

  1. Overview Tab — Conversation volumes, resolution rates, response times across all channels
  2. AI Metrics Tab — LLM performance metrics: token usage, response quality scores, tool call success rates
  3. Conversation Analysis Tab — Per-conversation sentiment analysis, intent classification, structured data extraction
  4. Human Agent Metrics Tab — Human agent performance: handle time, CSAT scores, handoff rates

Analytics data is aggregated via custom PostgreSQL RPC functions and visualized with Recharts.


🔒 Auth & Multi-Tenancy

Feature Implementation
Authentication Supabase Auth (email + Google OAuth)
Role-Based Access admin, agent, and custom org roles enforced at DB level via RLS
Multi-Tenancy All data scoped to organization_id — full org isolation
User Status Real-time presence: available, unavailable, busy, onBreak, offline
Email Verification Custom email verification flow
Password Reset In-dashboard password reset

🔧 Developer Tooling & Observability

Technology Purpose
Sentry (@sentry/nextjs) Error tracking, performance monitoring, source maps
PostHog Product analytics, feature flags, session recording
Vercel Analytics Web vitals and traffic analytics
next-sitemap Automatic sitemap generation for public pages
Prettier Code formatting

📁 Project Structure

src/
├── app/
│   ├── (auth)/                     # Auth pages (sign-in, sign-up)
│   ├── api/                        # Next.js API routes (25+ route groups)
│   │   ├── whatsapp/               # WhatsApp webhook handlers
│   │   ├── instagram/              # Instagram webhook handlers
│   │   ├── messenger/              # Messenger webhook handlers
│   │   ├── chatbot/                # Widget chatbot endpoints
│   │   ├── conversation/           # Conversation management
│   │   ├── knowledge-base/         # KB CRUD and file ingestion
│   │   ├── integration/            # Nango + Composio integration management
│   │   ├── stripe/                 # Stripe checkout and webhooks
│   │   ├── human-analytics/        # Human agent analytics endpoints
│   │   └── inngest/                # Inngest function registration
│   ├── dashboard/
│   │   ├── agents/                 # Agent list + per-agent config pages
│   │   │   └── [id]/
│   │   │       ├── ai3/            # AI model configuration
│   │   │       ├── channels/       # Channel assignments (WhatsApp/IG/Messenger)
│   │   │       ├── integrations/   # Tool integrations + custom tool builder
│   │   │       ├── sources/        # Knowledge base sources
│   │   │       ├── playground/     # Live agent chat testing
│   │   │       ├── analytics/      # Per-agent analytics
│   │   │       └── widget/         # Widget embed code generator
│   │   ├── consolidated-inbox/     # Unified multi-channel inbox
│   │   ├── analytics/              # Global analytics dashboard
│   │   ├── human-analytics/        # Human agent dashboard
│   │   ├── user-management/        # Org user management + role assignment
│   │   └── subscription/           # Billing and plan management
│   ├── pricing/                    # Public pricing page
│   ├── widget/                     # Standalone embeddable widget page
│   └── shopify-agent/              # Shopify-specific agent landing
├── components/                     # Reusable React components
│   ├── analytics/                  # Analytics chart components
│   ├── chat-components/            # Chat bubble, message, input components
│   ├── chat-widget/                # Embeddable widget UI
│   ├── agent-config/               # Agent configuration UI panels
│   └── ui/                         # shadcn/ui base components
├── server-side-logic/
│   ├── service/                    # Server-side service layer
│   │   ├── conversation.service.ts         # Core conversation orchestration
│   │   ├── conversation-handoff.service.ts # Human handoff queue logic
│   │   ├── whatsapp-rest.service.ts        # WhatsApp API calls
│   │   ├── instagram-rest.service.ts       # Instagram Graph API calls
│   │   ├── messenger-rest.service.ts       # Messenger API calls
│   │   ├── fast-api.rest-api.service.ts    # AI backend proxy service
│   │   └── integration.service.ts          # Nango/Composio integration calls
│   └── models/                     # Data models
├── inngest/                        # Background job definitions
├── contexts/                       # React context providers
├── hooks/                          # Custom React hooks
├── types/                          # TypeScript type definitions + Supabase generated types
├── enum/                           # Enums (channel types, roles, etc.)
└── utils/                          # Utility functions
supabase/
├── functions/                      # Deno Edge Functions (Stripe billing)
└── migrations/                     # 89 versioned SQL migrations

🌐 Public Pages

  • / — Marketing landing page
  • /pricing — Pricing tiers
  • /about-us — About page
  • /contact-us — Contact form
  • /privacy — Privacy policy
  • /terms — Terms of service
  • /widget — Standalone embeddable chat widget

🚀 Getting Started

Prerequisites

  • Node.js 18+
  • A Supabase project
  • A Stripe account (for billing)
  • Nango account (for OAuth integrations)
  • Inngest account (for background jobs)
  • Sentry project (for error tracking)
  • PostHog project (for analytics)

Installation

npm install

Environment Variables

Copy .env.example to .env and fill in the required keys (Supabase URL/keys, Stripe keys, Nango keys, Sentry DSN, PostHog keys, WhatsApp/Instagram/Messenger app credentials).

Development

npm run dev

Database

Apply migrations using the Supabase CLI:

supabase db push

Build

npm run build

🏗️ Deployment

Deployed on Vercel with:

  • Automatic Vercel Cron monitor integration via Sentry
  • PostHog analytics proxied through Next.js rewrites (ad-blocker bypass)
  • Supabase Storage for knowledge base file uploads
  • Supabase Edge Functions for payment processing

About

RevSmith Frontend

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors