ProjectBuild an AI Voice Receptionist: the explanation · Module 19: The call page and the staff app · part 21 of 23
Part 21 · Module 19: The call page and the staff app
Module 19: The call page and the staff app
27 min read·
About 45 minutes · Needs: Module 5 (PCM16 and the event protocol), Module 6 (staff sign-in and roles), Module 14 (the live call) · Code: frontend/src/lib/voice/session.ts, frontend/src/lib/voice/wsauth.ts, frontend/src/lib/voice/pcm.ts, frontend/public/pcm-capture-worklet.js, frontend/src/lib/voice/playback.ts, frontend/src/App.tsx, frontend/nginx.conf.template
Where this fits
The browser side of the system (blue): the caller's call page and the staff app, joined to the API by the voice WebSocket, REST calls and the desk event stream.
Everything a person touches lives here. A caller hears a voice and sees a transcript; if the browser captures badly, plays with gaps or keeps talking after an interruption, the best agent still sounds broken. This module opens the two client boxes and the voice socket that joins them to the API.
The rest of this project is yours to keep
This project is bought on its own, once, and stays readable afterwards, including the parts added to it later.