wx44wx/pipecat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactoring the test client to use the new version of the Pipecat Client SDK.

Browse Source
This commit is contained in:
Filipi Fuchter
2025-07-10 21:57:25 -03:00
parent 1200aa4fb8
commit f4f65024ef
3 changed files with 308 additions and 287 deletions
Download Patch File Download Diff File Expand all files Collapse all files

563
examples/twilio-chatbot/client/typescript/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
examples/twilio-chatbot/client/typescript/package.json
View File

@@ -19,7 +19,7 @@
"vite": "^6.0.2" "vite": "^6.0.2"
}, },
"dependencies": { "dependencies": {
"@pipecat-ai/client-js": "^0.4.0", "@pipecat-ai/client-js": "^1.0.0",
"@pipecat-ai/websocket-transport": "^0.4.2" "@pipecat-ai/websocket-transport": "^1.0.0"
} }
} }

28
examples/twilio-chatbot/client/typescript/src/app.ts
View File

@@ -5,9 +5,11 @@
*/ */
import { import {
RTVIClient, BotLLMTextData,
RTVIClientOptions, Participant,
RTVIEvent, PipecatClient,
PipecatClientOptions,
RTVIEvent, RTVIMessage, TranscriptData,
} from '@pipecat-ai/client-js'; } from '@pipecat-ai/client-js';
import { import {
WebSocketTransport, WebSocketTransport,
@@ -18,7 +20,7 @@ class WebsocketClientApp {
private static STREAM_SID = 'ws_mock_stream_sid'; private static STREAM_SID = 'ws_mock_stream_sid';
private static CALL_SID = 'ws_mock_call_sid'; private static CALL_SID = 'ws_mock_call_sid';
private rtviClient: RTVIClient | null = null; private rtviClient: PipecatClient | null = null;
private connectBtn: HTMLButtonElement | null = null; private connectBtn: HTMLButtonElement | null = null;
private disconnectBtn: HTMLButtonElement | null = null; private disconnectBtn: HTMLButtonElement | null = null;
private statusSpan: HTMLElement | null = null; private statusSpan: HTMLElement | null = null;
@@ -122,7 +124,7 @@ class WebsocketClientApp {
if (!this.rtviClient) return; if (!this.rtviClient) return;
// Listen for new tracks starting // Listen for new tracks starting
this.rtviClient.on(RTVIEvent.TrackStarted, (track, participant) => { this.rtviClient.on(RTVIEvent.TrackStarted, (track: MediaStreamTrack, participant?: Participant) => {
// Only handle non-local (bot) tracks // Only handle non-local (bot) tracks
if (!participant?.local && track.kind === 'audio') { if (!participant?.local && track.kind === 'audio') {
this.setupAudioTrack(track); this.setupAudioTrack(track);
@@ -130,7 +132,7 @@ class WebsocketClientApp {
}); });
// Listen for tracks stopping // Listen for tracks stopping
this.rtviClient.on(RTVIEvent.TrackStopped, (track, participant) => { this.rtviClient.on(RTVIEvent.TrackStopped, (track: MediaStreamTrack, participant?: Participant) => {
this.log( this.log(
`Track stopped: ${track.kind} from ${participant?.name || 'unknown'}` `Track stopped: ${track.kind} from ${participant?.name || 'unknown'}`
); );
@@ -167,7 +169,7 @@ class WebsocketClientApp {
playerSampleRate: 8000, playerSampleRate: 8000,
ws_url: 'http://localhost:8765/ws', ws_url: 'http://localhost:8765/ws',
}; };
const RTVIConfig: RTVIClientOptions = { const RTVIConfig: PipecatClientOptions = {
transport: new WebSocketTransport(ws_opts), transport: new WebSocketTransport(ws_opts),
enableMic: true, enableMic: true,
enableCam: false, enableCam: false,
@@ -184,21 +186,21 @@ class WebsocketClientApp {
if (this.disconnectBtn) this.disconnectBtn.disabled = true; if (this.disconnectBtn) this.disconnectBtn.disabled = true;
this.log('Client disconnected'); this.log('Client disconnected');
}, },
onBotReady: (data) => { onBotReady: (data: any) => {
this.log(`Bot ready: ${JSON.stringify(data)}`); this.log(`Bot ready: ${JSON.stringify(data)}`);
this.setupMediaTracks(); this.setupMediaTracks();
}, },
onUserTranscript: (data) => { onUserTranscript: (data: TranscriptData) => {
if (data.final) { if (data.final) {
this.log(`User: ${data.text}`); this.log(`User: ${data.text}`);
} }
}, },
onBotTranscript: (data) => this.log(`Bot: ${data.text}`), onBotTranscript: (data: BotLLMTextData) => this.log(`Bot: ${data.text}`),
onMessageError: (error) => console.error('Message error:', error), onMessageError: (error: RTVIMessage) => console.error('Message error:', error),
onError: (error) => console.error('Error:', error), onError: (error: RTVIMessage) => console.error('Error:', error),
}, },
}; };
this.rtviClient = new RTVIClient(RTVIConfig); this.rtviClient = new PipecatClient(RTVIConfig);
this.setupTrackListeners(); this.setupTrackListeners();
this.log('Initializing devices...'); this.log('Initializing devices...');