Frontend Setup (DriveDesk Relay UI)

The frontend is a Next.js application located in the /frontend directory.

Prerequisites

• Agora App ID (Get one from Agora Console)

Setup

1. Navigate to frontend directory:

   cd frontend

2. Install dependencies:

   npm install

3. Configuration: The .env.local file is already created. Open it and set your Agora App ID:

   NEXT_PUBLIC_AGORA_APP_ID=your_agora_app_id_here
   NEXT_PUBLIC_BACKEND_BASE_URL=http://localhost:3000

4. Run the frontend: Since the backend runs on port 3000, Next.js will automatically choose port 3001 (or you can specify it).

   npm run dev

   Access the UI at http://localhost:3001.

Usage Flow

1. Open two browser tabs/windows of the frontend app.
2. Tab 1 (Customer):
   • Select "Customer" role.
   • Enter a channel name (default: drivedesk-demo).
   • Click "Call Driver".
   • Allow microphone access.
3. Tab 2 (Driver):
   • Select "Driver" role.
   • Enter the same channel name.
   • Click "Start Shift (Join)".
   • You will see "Incoming Call...".
   • Click "Accept" to talk (simulates active call).
   • Or click "Ignore" (or wait 10s on Customer side).
4. Voicemail Demo:
   • If Driver ignores or doesn't join, Customer will see "Leave Voicemail".
   • Record a message and click "Stop & Send".
   • The backend will process it (mock STT).
   • Driver can click "Refresh" under "Latest Request" to see the generated Request Card and play the briefing.