VAPI-3239 Make sample app responsive

package.json

@@ -13,7 +13,7 @@
     "@types/node": "^16.18.126",
     "@types/react": "^19.2.2",
     "@types/react-dom": "^19.2.2",
-    "bandwidth-rtc": "^0.3.0",
+    "bandwidth-rtc": "^0.4.0",
     "bandwidth-sdk": "^7.3.0",
     "cors": "^2.8.5",
     "dotenv": "^16.4.7",

server/index.ts

@@ -183,6 +183,7 @@ function processInboundCall(callId: string): string {
         }
         return `<?xml version="1.0" encoding="UTF-8"?>
 <Response>
+    <StartRecording multiChannel="true" recordingAvailableUrl="${CALLBACK_BASE_URL}/recordingAvailable"/>
     <SpeakSentence voice="julie">Connecting</SpeakSentence>
     <Connect eventCallbackUrl="${CALLBACK_BASE_URL}/connectstatus">
         <Endpoint>${endpointId}</Endpoint>
@@ -191,6 +192,7 @@ function processInboundCall(callId: string): string {
     }
     return `<?xml version="1.0" encoding="UTF-8"?>
 <Response>
+    <StartRecording multiChannel="true" recordingAvailableUrl="${CALLBACK_BASE_URL}/recordingAvailable/b_answer"/>
     <SpeakSentence voice="julie">Connecting</SpeakSentence>
     <Connect eventCallbackUrl="${CALLBACK_BASE_URL}/connectstatus">
         <Endpoint>${requestingEndpointId}</Endpoint>
@@ -335,6 +337,20 @@ app.post('/callbacks/bandwidth', async (req: Request, res: Response) => {
                 } catch (error: any) {
                     console.error('Error placing outbound call:', error.message);
                 }
+                return res.type('application/xml').send(`<?xml version="1.0" encoding="UTF-8"?><Response/>`);
+            }
+            if (toType === 'ENDPOINT') {
+                // Endpoint-to-endpoint has no PSTN leg to place. We answer the
+                // request with BXML containing a <Connect> verb targeting the
+                // destination endpoint; the callback proxy executes it against the
+                // requesting endpoint's leg, bridging the two WebRTC endpoints.
+                console.log(`Bridging endpoints via <Connect>: ${event.from} -> ${to}`);
+                return res.type('application/xml').send(`<?xml version="1.0" encoding="UTF-8"?>
+<Response>
+    <Connect eventCallbackUrl="${CALLBACK_BASE_URL}/connectstatus">
+        <Endpoint>${to}</Endpoint>
+    </Connect>
+</Response>`);
             }
             return res.type('application/xml').send(`<?xml version="1.0" encoding="UTF-8"?><Response/>`);
     }
@@ -400,6 +416,13 @@ app.post('/calls/status', async (req: Request, res: Response) => {
     }
 });
 
+// POST /connectstatus - Connect bridge lifecycle events (PSTN <Connect> and
+// endpoint-to-endpoint connect). Logged for observability; no BXML response needed.
+app.post('/connectstatus', (req: Request, res: Response) => {
+    console.log('Connect status event:', JSON.stringify(req.body, null, 2));
+    res.sendStatus(200);
+});
+
 // GET /api/endpoint/:endpointId/call-status - Get current PSTN call status for an endpoint
 app.get('/api/endpoint/:endpointId/call-status', (req: Request, res: Response) => {
     const endpointId = req.params.endpointId;

src/App.tsx

@@ -13,6 +13,7 @@ function App() {
     const [brtcClientReady, setBrtcClientReady] = useState<boolean>(false);
     const [readyMetadata, setReadyMetadata] = useState<ReadyMetadata | null>(null);
     const [inCall, setInCall] = useState(false);
+    const [inboundStream, setInboundStream] = useState<MediaStream | null>(null);
 
     const prepBrtcClient= async (reset: boolean) => {
         console.log("Prepping Bandwidth RTC Client")
@@ -21,10 +22,29 @@ function App() {
             setBrtcClientReady(false)
             setReadyMetadata(null)
             setBrtcClient(null)
+            setInCall(false)
+            setInboundStream(null)
         }
         if (!brtcClient || reset) {
             console.log("Creating Bandwidth RTC Client")
             let brtcClient = new BandwidthRtc('debug')
+            // Registered before connect() runs: the subscribing peer connection's
+            // ontrack fires once during initial connection setup, before
+            // readyMetadata (and therefore MediaPlayer) exists.
+            brtcClient.onStreamAvailable((s) => {
+                console.log("Stream available:", s);
+                setInboundStream(s.mediaStream);
+                // The stream arriving means the call actually connected (answered),
+                // so we're truly in-call now — not just ringing.
+                setInCall(true);
+            })
+            brtcClient.onStreamUnavailable((s) => {
+                console.log("Stream unavailable:", s);
+                setInboundStream(null);
+                // The far side (or gateway) ended the call; reset the UI out of
+                // the in-call/ringing state.
+                setInCall(false);
+            })
             brtcClient.onReady((readyMetadata: ReadyMetadata) => {
                 console.log("Ready Metadata:", readyMetadata);
                 setBrtcClientReady(true)
@@ -56,12 +76,12 @@ function App() {
                 {readyMetadata && (
                     <>
                     <h2>Bandwidth RTC Agent Sample</h2>
-                    <div style={{ display: 'flex', gap: '1rem', justifyContent: 'center' }}>
+                    <div className="app-row">
                         <MediaCapture bandwidthRtcClient={brtcClient} />
-                        <MediaPlayer bandwidthRtcClient={brtcClient} inCall={inCall} setInCall={setInCall} />
+                        <MediaPlayer inboundStream={inboundStream} />
                     </div>
-                    <div style={{ display: 'flex', gap: '1rem', justifyContent: 'center' }}>
-                        <CallController bandwidthRtcClient={brtcClient} readyMetadata={readyMetadata} inCall={inCall} setInCall={setInCall} />
+                    <div className="app-row">
+                        <CallController bandwidthRtcClient={brtcClient} readyMetadata={readyMetadata} inCall={inCall} setInCall={setInCall} connected={inboundStream !== null} />
                     </div>
                     </>
                 )}

src/components/CallController.tsx

@@ -3,6 +3,7 @@ import React, {ChangeEventHandler, useState} from "react";
 import '../css/DigitGrid.scss';
 import '../css/CallControlButton.scss';
 import '../css/NumberInput.scss';
+import '../css/CallController.scss';
 import CallIcon from '@mui/icons-material/Call';
 import CallEndIcon from '@mui/icons-material/CallEnd';
 import ShortcutOutlinedIcon from '@mui/icons-material/ShortcutOutlined';
@@ -66,11 +67,7 @@ function NumberInput ({ onChange, value }: {onChange: ChangeEventHandler, value:
 }
 
 
-function isDestinationValid(destination: string): boolean {
-    return true
-}
-
-function CallController({bandwidthRtcClient, readyMetadata, inCall, setInCall}: {bandwidthRtcClient: BandwidthRtc, readyMetadata: ReadyMetadata, inCall: boolean, setInCall: (inCall: boolean) => void} ) {
+function CallController({bandwidthRtcClient, readyMetadata, inCall, setInCall, connected}: {bandwidthRtcClient: BandwidthRtc, readyMetadata: ReadyMetadata, inCall: boolean, setInCall: (inCall: boolean) => void, connected: boolean} ) {
     if (!bandwidthRtcClient) {
         throw new Error("webrtcClient is required");
     }
@@ -106,27 +103,38 @@ function CallController({bandwidthRtcClient, readyMetadata, inCall, setInCall}:
         let result = await bandwidthRtcClient.requestOutboundConnection(e164Number, EndpointType.PHONE_NUMBER)
         if (result.accepted) {
             setCallStatus('Ringing');
+            setInCall(true);
         } else {
             setCallStatus('Declined');
         }
     }
     const handleHangUp = async () => {
         setCallStatus('Hanging Up...');
-        // Ensure E.164 format: clean digits and add '+'
-        const e164Number = '+' + destNumber.replace(/[^\d]/g, '');
-        let result = await bandwidthRtcClient.hangupConnection(e164Number, EndpointType.PHONE_NUMBER)
+        // Hang up whichever destination the active call is using. endpointType is
+        // frozen during a call (the selector is disabled), so it still reflects
+        // how this call was dialed.
+        let result;
+        if (endpointType === EndpointType.ENDPOINT) {
+            result = await bandwidthRtcClient.hangupConnection(endpointTarget, EndpointType.ENDPOINT)
+        } else {
+            // Ensure E.164 format: clean digits and add '+'
+            const e164Number = '+' + destNumber.replace(/[^\d]/g, '');
+            result = await bandwidthRtcClient.hangupConnection(e164Number, EndpointType.PHONE_NUMBER)
+        }
         setCallStatus(result.result)
+        setInCall(false);
     }
 
     const handleDigitClick = (value: string) => {
-        if (inCall) {
+        if (connected) {
+            // DTMF only once the call is answered; during ringing, digits do nothing.
             console.log(`Sending DTMF: ${value}, duration: ${dtmfDuration}ms`);
             try {
                 bandwidthRtcClient.sendDtmf(value, undefined, dtmfDuration);
             } catch (err) {
                 console.error('sendDtmf failed:', err);
             }
-        } else {
+        } else if (!inCall) {
             setDestNumber((destNumber) => destNumber.concat(value));
         }
     }
@@ -135,7 +143,14 @@ function CallController({bandwidthRtcClient, readyMetadata, inCall, setInCall}:
     }
 
     const handleDialEndpoint = async () => {
-        await bandwidthRtcClient.requestOutboundConnection(endpointTarget, EndpointType.ENDPOINT)
+        setCallStatus('Calling...');
+        let result = await bandwidthRtcClient.requestOutboundConnection(endpointTarget, EndpointType.ENDPOINT)
+        if (result.accepted) {
+            setCallStatus('Ringing');
+            setInCall(true);
+        } else {
+            setCallStatus('Declined');
+        }
     }
 
     const handleDial = async () => {
@@ -147,6 +162,15 @@ function CallController({bandwidthRtcClient, readyMetadata, inCall, setInCall}:
     }
 
 
+    // A dial is allowed only when the destination for the selected type is filled
+    // in. CALL_ID is not implemented yet, so it can never be dialed.
+    const hasDestination =
+        endpointType === EndpointType.PHONE_NUMBER
+            ? destNumber.replace(/[^\d]/g, '').length > 0
+            : endpointType === EndpointType.ENDPOINT
+                ? endpointTarget.trim().length > 0
+                : false;
+
     const endCallButtonProps = {
         type: 'end-call',
         onClick: handleHangUp,
@@ -157,7 +181,7 @@ function CallController({bandwidthRtcClient, readyMetadata, inCall, setInCall}:
     const startCallButtonProps = {
         type: 'start-call',
         onClick: handleDial,
-        disabled: !isDestinationValid(destNumber) || inCall,
+        disabled: !hasDestination || inCall,
         Icon: CallIcon
     };
 
@@ -188,11 +212,13 @@ function CallController({bandwidthRtcClient, readyMetadata, inCall, setInCall}:
                 ))}
             </select>
 
-            <h2>{!inCall && callStatus}{inCall && "In Call"}</h2>
+            <h2>{!inCall && callStatus}{inCall && !connected && "Ringing"}{inCall && connected && "In Call"}</h2>
 
             {endpointType == EndpointType.ENDPOINT && (
                 <>
-                <input type="text" disabled={inCall} onChange={(value) => setEndpointTarget(value.target.value)} />
+                {!inCall
+                    ? <input type="text" placeholder="Endpoint ID" value={endpointTarget} onChange={(value) => setEndpointTarget(value.target.value)} />
+                    : <div className='dialed-number'>{endpointTarget}</div>}
                 </>
             )}
             {endpointType == EndpointType.CALL_ID && (
@@ -206,7 +232,7 @@ function CallController({bandwidthRtcClient, readyMetadata, inCall, setInCall}:
                     <div className='call-controls'>
                         <CallControlButton {...backspaceButtonProps} />
                     </div>
-                    {inCall && (
+                    {connected && (
                         <div className='dtmf-duration-control'>
                             <label htmlFor='dtmf-duration'>Tone Duration (ms)</label>
                             <input
@@ -219,7 +245,7 @@ function CallController({bandwidthRtcClient, readyMetadata, inCall, setInCall}:
                             />
                         </div>
                     )}
-                    {inCall && (
+                    {connected && (
                         <div className='dtmf-sequence-control'>
                             <input
                                 type='text'

src/components/EndpointHandler.tsx

@@ -1,6 +1,7 @@
 import React, {useEffect, useState} from "react";
 import BandwidthRtc from "bandwidth-rtc";
 import {Endpoint} from "../../server/types"
+import '../css/EndpointHandler.scss';
 
 function EndpointHandler({bandwidthRtcClient, resetClient, gatewayUrl}: {bandwidthRtcClient: BandwidthRtc, resetClient: () => void, gatewayUrl?: string }) {
     const [endpoint, setEndpoint] = useState<Endpoint | null>(null);
@@ -82,11 +83,13 @@ function EndpointHandler({bandwidthRtcClient, resetClient, gatewayUrl}: {bandwid
                     <button onClick={() => setBanner(null)} style={{ background: 'none', border: 'none', cursor: 'pointer', fontWeight: 'bold', color: '#721c24' }}>✕</button>
                 </div>
             )}
-            <button onClick={createEndpoint}>Create Endpoint</button>
-            <button onClick={deleteEndpoint} disabled={!endpoint}>Disconnect & Delete Endpoint</button>
-            <button onClick={deleteAllEndpoints}>Delete All Endpoints</button>
+            <div className="endpoint-actions">
+                <button onClick={createEndpoint}>Create Endpoint</button>
+                <button onClick={deleteEndpoint} disabled={!endpoint}>Disconnect & Delete Endpoint</button>
+                <button onClick={deleteAllEndpoints}>Delete All Endpoints</button>
+            </div>
             {endpoint !== null && (
-                <p>{endpoint.endpointId}</p>
+                <p className="endpoint-id">{endpoint.endpointId}</p>
             )}
         </div>
     );

src/components/MediaCapture.tsx

@@ -244,10 +244,10 @@ function MediaCapture({bandwidthRtcClient}: {bandwidthRtcClient: BandwidthRtc} )
     };
 
     return (
-        <div>
+        <div style={{ flex: '1 1 320px', minWidth: 0, maxWidth: 400 }}>
             <div>
                 <audio ref={audioRef} />
-                <canvas ref={canvasRef} width={400} height={200} style={{ border: "1px solid black" }} />
+                <canvas ref={canvasRef} width={400} height={200} className="audio-canvas" style={{ border: "1px solid black" }} />
                 <div>
                     <select
                         value={selectedAudioInputDeviceId}