ttp-agent-sdk 2.21.0 → 2.23.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/dist/agent-widget.js +1 -1
- package/dist/agent-widget.js.map +1 -1
- package/dist/examples/test-client-tools.html +384 -0
- package/examples/test-client-tools.html +384 -0
- package/package.json +1 -1
- package/dist/agent-widget.esm.js +0 -3
- package/dist/agent-widget.esm.js.LICENSE.txt +0 -9
- package/dist/agent-widget.esm.js.map +0 -1
|
@@ -0,0 +1,384 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>TTP Agent SDK - Client Tools Demo</title>
|
|
7
|
+
<style>
|
|
8
|
+
* {
|
|
9
|
+
margin: 0;
|
|
10
|
+
padding: 0;
|
|
11
|
+
box-sizing: border-box;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
body {
|
|
15
|
+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
16
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
17
|
+
min-height: 100vh;
|
|
18
|
+
padding: 40px 20px;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.container {
|
|
22
|
+
max-width: 900px;
|
|
23
|
+
margin: 0 auto;
|
|
24
|
+
background: white;
|
|
25
|
+
padding: 40px;
|
|
26
|
+
border-radius: 12px;
|
|
27
|
+
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
h1 {
|
|
31
|
+
color: #111827;
|
|
32
|
+
margin-bottom: 10px;
|
|
33
|
+
font-size: 32px;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.subtitle {
|
|
37
|
+
color: #6B7280;
|
|
38
|
+
margin-bottom: 30px;
|
|
39
|
+
font-size: 16px;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.info {
|
|
43
|
+
background: #EFF6FF;
|
|
44
|
+
border-left: 4px solid #3B82F6;
|
|
45
|
+
padding: 16px;
|
|
46
|
+
margin: 20px 0;
|
|
47
|
+
border-radius: 4px;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.info h3 {
|
|
51
|
+
color: #1E40AF;
|
|
52
|
+
margin-bottom: 8px;
|
|
53
|
+
font-size: 18px;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.info ul {
|
|
57
|
+
margin-left: 20px;
|
|
58
|
+
color: #374151;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.info li {
|
|
62
|
+
margin: 8px 0;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.tools-section {
|
|
66
|
+
margin: 30px 0;
|
|
67
|
+
padding: 20px;
|
|
68
|
+
background: #F9FAFB;
|
|
69
|
+
border-radius: 8px;
|
|
70
|
+
border: 1px solid #E5E7EB;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.tools-section h2 {
|
|
74
|
+
color: #111827;
|
|
75
|
+
margin-bottom: 16px;
|
|
76
|
+
font-size: 24px;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.tool-card {
|
|
80
|
+
background: white;
|
|
81
|
+
padding: 16px;
|
|
82
|
+
margin: 12px 0;
|
|
83
|
+
border-radius: 6px;
|
|
84
|
+
border: 1px solid #E5E7EB;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.tool-card h3 {
|
|
88
|
+
color: #111827;
|
|
89
|
+
margin-bottom: 8px;
|
|
90
|
+
font-size: 18px;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.tool-card code {
|
|
94
|
+
background: #F3F4F6;
|
|
95
|
+
padding: 2px 6px;
|
|
96
|
+
border-radius: 3px;
|
|
97
|
+
font-family: 'Courier New', monospace;
|
|
98
|
+
color: #DC2626;
|
|
99
|
+
font-size: 14px;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.tool-card p {
|
|
103
|
+
color: #6B7280;
|
|
104
|
+
margin-top: 8px;
|
|
105
|
+
font-size: 14px;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.status {
|
|
109
|
+
margin: 20px 0;
|
|
110
|
+
padding: 12px;
|
|
111
|
+
background: #F3F4F6;
|
|
112
|
+
border-radius: 6px;
|
|
113
|
+
font-family: monospace;
|
|
114
|
+
font-size: 14px;
|
|
115
|
+
color: #374151;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.status.success {
|
|
119
|
+
background: #D1FAE5;
|
|
120
|
+
color: #065F46;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.status.error {
|
|
124
|
+
background: #FEE2E2;
|
|
125
|
+
color: #991B1B;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.code-block {
|
|
129
|
+
background: #1F2937;
|
|
130
|
+
color: #F9FAFB;
|
|
131
|
+
padding: 16px;
|
|
132
|
+
border-radius: 6px;
|
|
133
|
+
font-family: 'Courier New', monospace;
|
|
134
|
+
font-size: 13px;
|
|
135
|
+
overflow-x: auto;
|
|
136
|
+
margin: 16px 0;
|
|
137
|
+
line-height: 1.6;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.button {
|
|
141
|
+
background: #4F46E5;
|
|
142
|
+
color: white;
|
|
143
|
+
border: none;
|
|
144
|
+
padding: 12px 24px;
|
|
145
|
+
border-radius: 6px;
|
|
146
|
+
cursor: pointer;
|
|
147
|
+
font-size: 16px;
|
|
148
|
+
margin: 10px 10px 10px 0;
|
|
149
|
+
transition: background 0.2s;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.button:hover {
|
|
153
|
+
background: #4338CA;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
.button.secondary {
|
|
157
|
+
background: #6B7280;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.button.secondary:hover {
|
|
161
|
+
background: #4B5563;
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
.registered-tools {
|
|
165
|
+
margin-top: 20px;
|
|
166
|
+
padding: 16px;
|
|
167
|
+
background: #ECFDF5;
|
|
168
|
+
border: 1px solid #10B981;
|
|
169
|
+
border-radius: 6px;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
.registered-tools h3 {
|
|
173
|
+
color: #065F46;
|
|
174
|
+
margin-bottom: 12px;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.registered-tools ul {
|
|
178
|
+
list-style: none;
|
|
179
|
+
padding: 0;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
.registered-tools li {
|
|
183
|
+
padding: 8px;
|
|
184
|
+
background: white;
|
|
185
|
+
margin: 4px 0;
|
|
186
|
+
border-radius: 4px;
|
|
187
|
+
font-family: monospace;
|
|
188
|
+
color: #059669;
|
|
189
|
+
}
|
|
190
|
+
</style>
|
|
191
|
+
</head>
|
|
192
|
+
<body>
|
|
193
|
+
<div class="container">
|
|
194
|
+
<h1>🔧 Client Tools Demo</h1>
|
|
195
|
+
<p class="subtitle">Demonstrates registering and using client-side tools with the TTP Chat Widget</p>
|
|
196
|
+
|
|
197
|
+
<div class="info">
|
|
198
|
+
<h3>📝 How to Test</h3>
|
|
199
|
+
<ul>
|
|
200
|
+
<li>Click "Initialize Widget" to create the widget and register the tools</li>
|
|
201
|
+
<li>Open the chat widget (bottom-right corner)</li>
|
|
202
|
+
<li>Ask the agent to use the tools: "What is the current URL?" or "Take me to the contact page"</li>
|
|
203
|
+
<li>The tools will execute automatically when the agent requests them</li>
|
|
204
|
+
<li>Check the browser console for detailed logs</li>
|
|
205
|
+
</ul>
|
|
206
|
+
</div>
|
|
207
|
+
|
|
208
|
+
<div id="status" class="status">Waiting to initialize widget...</div>
|
|
209
|
+
|
|
210
|
+
<div class="tools-section">
|
|
211
|
+
<h2>📦 Registered Tools</h2>
|
|
212
|
+
|
|
213
|
+
<div class="tool-card">
|
|
214
|
+
<h3><code>get_url</code></h3>
|
|
215
|
+
<p><strong>Description:</strong> Returns the current page URL</p>
|
|
216
|
+
<p><strong>Returns:</strong> <code>{ url: string }</code></p>
|
|
217
|
+
<p><strong>Example:</strong> Ask the agent "What is the current URL?" or "Where am I?"</p>
|
|
218
|
+
</div>
|
|
219
|
+
|
|
220
|
+
<div class="tool-card">
|
|
221
|
+
<h3><code>move_to_contact_page</code></h3>
|
|
222
|
+
<p><strong>Description:</strong> Navigates the browser to the contact page</p>
|
|
223
|
+
<p><strong>Returns:</strong> <code>{ success: true, message: string }</code></p>
|
|
224
|
+
<p><strong>Example:</strong> Ask the agent "Take me to the contact page" or "Go to contact"</p>
|
|
225
|
+
</div>
|
|
226
|
+
</div>
|
|
227
|
+
|
|
228
|
+
<div class="registered-tools" id="registeredTools" style="display: none;">
|
|
229
|
+
<h3>✅ Registered Tools</h3>
|
|
230
|
+
<ul id="toolsList"></ul>
|
|
231
|
+
</div>
|
|
232
|
+
|
|
233
|
+
<div style="margin-top: 30px;">
|
|
234
|
+
<button class="button" id="initBtn" onclick="initializeWidget()">🚀 Initialize Widget</button>
|
|
235
|
+
<button class="button secondary" id="destroyBtn" onclick="destroyWidget()" style="display: none;">🗑️ Destroy Widget</button>
|
|
236
|
+
<button class="button secondary" onclick="showRegisteredTools()">📋 Show Registered Tools</button>
|
|
237
|
+
</div>
|
|
238
|
+
|
|
239
|
+
<div class="code-block" style="margin-top: 30px;">
|
|
240
|
+
<strong>Code Example:</strong><br><br>
|
|
241
|
+
// Register get_url tool<br>
|
|
242
|
+
widget.registerClientTool('get_url', async (params) => {<br>
|
|
243
|
+
return { url: window.location.href };<br>
|
|
244
|
+
});<br><br>
|
|
245
|
+
// Register move_to_contact_page tool<br>
|
|
246
|
+
widget.registerClientTool('move_to_contact_page', async (params) => {<br>
|
|
247
|
+
window.location.href = 'https://talktopc.com/contact';<br>
|
|
248
|
+
return { success: true, message: 'Navigating to contact page...' };<br>
|
|
249
|
+
});
|
|
250
|
+
</div>
|
|
251
|
+
</div>
|
|
252
|
+
|
|
253
|
+
<!-- Load the SDK from local dist -->
|
|
254
|
+
<script src="/dist/agent-widget.js"></script>
|
|
255
|
+
|
|
256
|
+
<script>
|
|
257
|
+
let widget = null;
|
|
258
|
+
|
|
259
|
+
function updateStatus(message, type = '') {
|
|
260
|
+
const statusEl = document.getElementById('status');
|
|
261
|
+
statusEl.textContent = message;
|
|
262
|
+
statusEl.className = 'status ' + (type || '');
|
|
263
|
+
}
|
|
264
|
+
|
|
265
|
+
function showRegisteredTools() {
|
|
266
|
+
if (!widget) {
|
|
267
|
+
updateStatus('Widget not initialized yet', 'error');
|
|
268
|
+
return;
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
const tools = widget.getRegisteredClientTools();
|
|
272
|
+
const toolsList = document.getElementById('toolsList');
|
|
273
|
+
const registeredToolsDiv = document.getElementById('registeredTools');
|
|
274
|
+
|
|
275
|
+
if (tools.length === 0) {
|
|
276
|
+
toolsList.innerHTML = '<li>No tools registered</li>';
|
|
277
|
+
} else {
|
|
278
|
+
toolsList.innerHTML = tools.map(tool => `<li>${tool}</li>`).join('');
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
registeredToolsDiv.style.display = 'block';
|
|
282
|
+
updateStatus(`Found ${tools.length} registered tool(s)`, 'success');
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
async function initializeWidget() {
|
|
286
|
+
try {
|
|
287
|
+
// Wait for SDK to be available
|
|
288
|
+
if (typeof window.TTPAgentSDK === 'undefined' || !window.TTPAgentSDK.TTPChatWidget) {
|
|
289
|
+
updateStatus('Waiting for SDK to load...', '');
|
|
290
|
+
await new Promise((resolve) => {
|
|
291
|
+
let attempts = 0;
|
|
292
|
+
const checkInterval = setInterval(() => {
|
|
293
|
+
attempts++;
|
|
294
|
+
if (typeof window.TTPAgentSDK !== 'undefined' && window.TTPAgentSDK.TTPChatWidget) {
|
|
295
|
+
clearInterval(checkInterval);
|
|
296
|
+
resolve();
|
|
297
|
+
} else if (attempts >= 50) {
|
|
298
|
+
clearInterval(checkInterval);
|
|
299
|
+
throw new Error('SDK failed to load');
|
|
300
|
+
}
|
|
301
|
+
}, 100);
|
|
302
|
+
});
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
updateStatus('Creating widget...', '');
|
|
306
|
+
|
|
307
|
+
// Create widget
|
|
308
|
+
widget = new window.TTPAgentSDK.TTPChatWidget({
|
|
309
|
+
agentId: 'agent_87c4a55a1',
|
|
310
|
+
appId: 'app_Bc01EqMQt2Euehl4qqZSi6l3FJP42Q9vJ0pC',
|
|
311
|
+
language: 'en',
|
|
312
|
+
behavior: {
|
|
313
|
+
mode: 'unified',
|
|
314
|
+
startOpen: false
|
|
315
|
+
}
|
|
316
|
+
});
|
|
317
|
+
|
|
318
|
+
updateStatus('Registering client tools...', '');
|
|
319
|
+
|
|
320
|
+
// Register get_url tool
|
|
321
|
+
widget.registerClientTool('get_url', async (params) => {
|
|
322
|
+
console.log('🔧 [get_url] Tool called with params:', params);
|
|
323
|
+
const url = window.location.href;
|
|
324
|
+
console.log('🔧 [get_url] Returning URL:', url);
|
|
325
|
+
return { url: url };
|
|
326
|
+
});
|
|
327
|
+
|
|
328
|
+
// Register move_to_contact_page tool
|
|
329
|
+
widget.registerClientTool('move_to_contact_page', async (params) => {
|
|
330
|
+
console.log('🔧 [move_to_contact_page] Tool called with params:', params);
|
|
331
|
+
console.log('🔧 [move_to_contact_page] Navigating to contact page...');
|
|
332
|
+
|
|
333
|
+
// Navigate to contact page
|
|
334
|
+
window.location.href = 'https://talktopc.com/contact';
|
|
335
|
+
|
|
336
|
+
// Return success (though navigation will happen)
|
|
337
|
+
return {
|
|
338
|
+
success: true,
|
|
339
|
+
message: 'Navigating to contact page...'
|
|
340
|
+
};
|
|
341
|
+
});
|
|
342
|
+
|
|
343
|
+
// Show registered tools
|
|
344
|
+
const tools = widget.getRegisteredClientTools();
|
|
345
|
+
const toolsList = document.getElementById('toolsList');
|
|
346
|
+
const registeredToolsDiv = document.getElementById('registeredTools');
|
|
347
|
+
|
|
348
|
+
toolsList.innerHTML = tools.map(tool => `<li>${tool}</li>`).join('');
|
|
349
|
+
registeredToolsDiv.style.display = 'block';
|
|
350
|
+
|
|
351
|
+
updateStatus(`✅ Widget initialized! Registered ${tools.length} tool(s): ${tools.join(', ')}`, 'success');
|
|
352
|
+
|
|
353
|
+
// Update buttons
|
|
354
|
+
document.getElementById('initBtn').style.display = 'none';
|
|
355
|
+
document.getElementById('destroyBtn').style.display = 'inline-block';
|
|
356
|
+
|
|
357
|
+
console.log('✅ Widget initialized with tools:', tools);
|
|
358
|
+
console.log('💡 Try asking the agent: "What is the current URL?" or "Take me to the contact page"');
|
|
359
|
+
|
|
360
|
+
} catch (error) {
|
|
361
|
+
console.error('❌ Failed to initialize widget:', error);
|
|
362
|
+
updateStatus('Error: ' + error.message, 'error');
|
|
363
|
+
}
|
|
364
|
+
}
|
|
365
|
+
|
|
366
|
+
function destroyWidget() {
|
|
367
|
+
if (widget) {
|
|
368
|
+
widget.destroy();
|
|
369
|
+
widget = null;
|
|
370
|
+
updateStatus('Widget destroyed', '');
|
|
371
|
+
document.getElementById('initBtn').style.display = 'inline-block';
|
|
372
|
+
document.getElementById('destroyBtn').style.display = 'none';
|
|
373
|
+
document.getElementById('registeredTools').style.display = 'none';
|
|
374
|
+
}
|
|
375
|
+
}
|
|
376
|
+
|
|
377
|
+
// Auto-initialize on page load
|
|
378
|
+
window.addEventListener('load', () => {
|
|
379
|
+
console.log('📄 Page loaded, ready to initialize widget');
|
|
380
|
+
// Don't auto-initialize, let user click button
|
|
381
|
+
});
|
|
382
|
+
</script>
|
|
383
|
+
</body>
|
|
384
|
+
</html>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ttp-agent-sdk",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.23.0",
|
|
4
4
|
"description": "Comprehensive Voice Agent SDK with Customizable Widget - Real-time audio, WebSocket communication, React components, and extensive customization options",
|
|
5
5
|
"main": "dist/agent-widget.js",
|
|
6
6
|
"module": "dist/agent-widget.esm.js",
|