@telnyx/ai-agent-widget 0.25.0 → 0.26.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +53 -0
- package/dist/bundle.min.js +27 -27
- package/package.json +4 -3
package/README.md
CHANGED
|
@@ -23,6 +23,59 @@ You can customize the call options by adding attributes to the `<telnyx-ai-agent
|
|
|
23
23
|
- [`call-custom-headers`](https://developers.telnyx.com/development/webrtc/js-sdk/interfaces/icalloptions#customheaders)
|
|
24
24
|
- [`call-audio`](https://developers.telnyx.com/development/webrtc/js-sdk/interfaces/icalloptions#audio)
|
|
25
25
|
|
|
26
|
+
## Events and Callbacks
|
|
27
|
+
|
|
28
|
+
The widget emits DOM CustomEvents that you can listen to for tracking analytics, updating UI, or integrating with your application logic. Event names match `@telnyx/ai-agent-lib` for consistency.
|
|
29
|
+
|
|
30
|
+
```html
|
|
31
|
+
<script>
|
|
32
|
+
document.addEventListener('DOMContentLoaded', function () {
|
|
33
|
+
const widget = document.querySelector('telnyx-ai-agent');
|
|
34
|
+
|
|
35
|
+
// Listen for call lifecycle events
|
|
36
|
+
widget.addEventListener('conversation.update', function (event) {
|
|
37
|
+
const { callState } = event.detail;
|
|
38
|
+
if (callState === 'active') {
|
|
39
|
+
console.log('Voice call started');
|
|
40
|
+
}
|
|
41
|
+
if (callState === 'destroy') {
|
|
42
|
+
console.log('Voice call ended');
|
|
43
|
+
}
|
|
44
|
+
});
|
|
45
|
+
|
|
46
|
+
widget.addEventListener('transcript.item', function (event) {
|
|
47
|
+
console.log('Message received:', event.detail);
|
|
48
|
+
// Process message, update state, etc.
|
|
49
|
+
});
|
|
50
|
+
|
|
51
|
+
widget.addEventListener('conversation.agent.state', function (event) {
|
|
52
|
+
const { state, latencyMs, thinkingStartedAt } = event.detail;
|
|
53
|
+
console.log('Agent state:', state);
|
|
54
|
+
if (latencyMs) {
|
|
55
|
+
console.log('Response latency:', latencyMs, 'ms');
|
|
56
|
+
}
|
|
57
|
+
});
|
|
58
|
+
|
|
59
|
+
widget.addEventListener('agent.error', function (event) {
|
|
60
|
+
console.error('Widget error:', event.detail);
|
|
61
|
+
// Handle errors, show fallback UI, etc.
|
|
62
|
+
});
|
|
63
|
+
});
|
|
64
|
+
</script>
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
### Available Events
|
|
68
|
+
|
|
69
|
+
| Event | Description | Detail |
|
|
70
|
+
| -------------------------- | ------------------------------------------------- | ------------------------------------------------ |
|
|
71
|
+
| `agent.connected` | Agent connected to platform | - |
|
|
72
|
+
| `agent.disconnected` | Agent disconnected from platform | - |
|
|
73
|
+
| `agent.error` | Error occurred | `{ message, name }` |
|
|
74
|
+
| `transcript.item` | Transcript message received | `{ id, role, content, timestamp, attachments? }` |
|
|
75
|
+
| `conversation.update` | Conversation state updated | `{ type, callState }` |
|
|
76
|
+
| `conversation.agent.state` | Agent state changed (listening/speaking/thinking) | `{ state, latencyMs?, thinkingStartedAt? }` |
|
|
77
|
+
| `agent.audio.mute` | Agent audio muted/unmuted | `{ muted }` |
|
|
78
|
+
|
|
26
79
|
## Development
|
|
27
80
|
|
|
28
81
|
To develop the Telnyx Voice AI Widget, you can clone the repository and run the following commands:
|