ttp-agent-sdk 2.1.8 → 2.1.10

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.
Files changed (18) hide show
  1. package/dist/agent-widget.js +1 -1
  2. package/dist/agent-widget.js.map +1 -1
  3. package/dist/audio-processor.js +1 -0
  4. package/{examples/test.html → dist/examples/test-agent-app.html} +111 -45
  5. package/dist/examples/test-signed-link.html +453 -0
  6. package/{dist/examples/test.html → examples/test-agent-app.html} +111 -45
  7. package/examples/test-signed-link.html +453 -0
  8. package/package.json +1 -1
  9. package/dist/examples/enhanced-widget-examples.html +0 -471
  10. package/dist/examples/multi-platform-examples.html +0 -1119
  11. package/dist/examples/react-example.html +0 -774
  12. package/dist/examples/react-example.jsx +0 -307
  13. package/dist/examples/vanilla-example.html +0 -464
  14. package/examples/enhanced-widget-examples.html +0 -471
  15. package/examples/multi-platform-examples.html +0 -1119
  16. package/examples/react-example.html +0 -774
  17. package/examples/react-example.jsx +0 -307
  18. package/examples/vanilla-example.html +0 -464
package/dist/examples/enhanced-widget-examples.html DELETED
@@ -1,471 +0,0 @@
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>Enhanced AgentWidget Examples</title>
7
- <style>
8
- body {
9
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
10
- margin: 0;
11
- padding: 20px;
12
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
13
- min-height: 100vh;
14
- }
15
-
16
- .container {
17
- max-width: 1200px;
18
- margin: 0 auto;
19
- background: white;
20
- border-radius: 12px;
21
- padding: 30px;
22
- box-shadow: 0 10px 30px rgba(0,0,0,0.2);
23
- }
24
-
25
- h1 {
26
- color: #333;
27
- text-align: center;
28
- margin-bottom: 30px;
29
- }
30
-
31
- .example-section {
32
- margin: 40px 0;
33
- padding: 20px;
34
- border: 2px solid #e0e0e0;
35
- border-radius: 8px;
36
- background: #f9f9f9;
37
- }
38
-
39
- .example-title {
40
- font-size: 1.5em;
41
- font-weight: bold;
42
- color: #4F46E5;
43
- margin-bottom: 15px;
44
- }
45
-
46
- .example-description {
47
- color: #666;
48
- margin-bottom: 20px;
49
- }
50
-
51
- .code-block {
52
- background: #1e1e1e;
53
- color: #d4d4d4;
54
- padding: 20px;
55
- border-radius: 8px;
56
- font-family: 'Courier New', monospace;
57
- font-size: 14px;
58
- overflow-x: auto;
59
- margin: 15px 0;
60
- }
61
-
62
- .demo-button {
63
- background: #4F46E5;
64
- color: white;
65
- border: none;
66
- padding: 12px 24px;
67
- border-radius: 6px;
68
- cursor: pointer;
69
- font-size: 16px;
70
- margin: 10px 5px;
71
- transition: background 0.2s;
72
- }
73
-
74
- .demo-button:hover {
75
- background: #7C3AED;
76
- }
77
-
78
- .demo-button.destroy {
79
- background: #EF4444;
80
- }
81
-
82
- .demo-button.destroy:hover {
83
- background: #DC2626;
84
- }
85
- </style>
86
- </head>
87
- <body>
88
- <div class="container">
89
- <h1>🎤 Enhanced AgentWidget Examples</h1>
90
-
91
- <div class="example-section">
92
- <div class="example-title">1. Default Configuration</div>
93
- <div class="example-description">Basic widget with all default settings</div>
94
- <div class="code-block">
95
- new EnhancedAgentWidget({
96
- agentId: 'demo_agent',
97
- getSessionUrl: async ({ agentId, variables }) => {
98
- return 'wss://speech.talktopc.com/ws/conv?agentId=' + agentId;
99
- }
100
- });
101
- </div>
102
- <button class="demo-button" onclick="createDefaultWidget()">Create Default Widget</button>
103
- </div>
104
-
105
- <div class="example-section">
106
- <div class="example-title">2. Custom Icon (Company Logo)</div>
107
- <div class="example-description">Widget with custom company logo</div>
108
- <div class="code-block">
109
- new EnhancedAgentWidget({
110
- agentId: 'demo_agent',
111
- getSessionUrl: async ({ agentId, variables }) => {
112
- return 'wss://speech.talktopc.com/ws/conv?agentId=' + agentId;
113
- },
114
- icon: {
115
- type: 'custom',
116
- customImage: 'https://via.placeholder.com/64x64/4F46E5/FFFFFF?text=LOGO',
117
- size: 'large'
118
- },
119
- button: {
120
- primaryColor: '#FF6B35',
121
- hoverColor: '#FF8C42'
122
- }
123
- });
124
- </div>
125
- <button class="demo-button" onclick="createCustomIconWidget()">Create Custom Icon Widget</button>
126
- </div>
127
-
128
- <div class="example-section">
129
- <div class="example-title">3. Emoji Icon</div>
130
- <div class="example-description">Widget with emoji icon</div>
131
- <div class="code-block">
132
- new EnhancedAgentWidget({
133
- agentId: 'demo_agent',
134
- getSessionUrl: async ({ agentId, variables }) => {
135
- return 'wss://speech.talktopc.com/ws/conv?agentId=' + agentId;
136
- },
137
- icon: {
138
- type: 'emoji',
139
- emoji: '🤖',
140
- size: 'xl'
141
- },
142
- button: {
143
- primaryColor: '#10B981',
144
- hoverColor: '#059669'
145
- }
146
- });
147
- </div>
148
- <button class="demo-button" onclick="createEmojiWidget()">Create Emoji Widget</button>
149
- </div>
150
-
151
- <div class="example-section">
152
- <div class="example-title">4. Text Icon</div>
153
- <div class="example-description">Widget with text-based icon</div>
154
- <div class="code-block">
155
- new EnhancedAgentWidget({
156
- agentId: 'demo_agent',
157
- getSessionUrl: async ({ agentId, variables }) => {
158
- return 'wss://speech.talktopc.com/ws/conv?agentId=' + agentId;
159
- },
160
- icon: {
161
- type: 'text',
162
- text: 'HELP',
163
- size: 'medium'
164
- },
165
- button: {
166
- primaryColor: '#8B5CF6',
167
- hoverColor: '#7C3AED',
168
- shape: 'rounded'
169
- }
170
- });
171
- </div>
172
- <button class="demo-button" onclick="createTextWidget()">Create Text Widget</button>
173
- </div>
174
-
175
- <div class="example-section">
176
- <div class="example-title">5. Top-Left Position</div>
177
- <div class="example-description">Widget positioned in top-left corner</div>
178
- <div class="code-block">
179
- new EnhancedAgentWidget({
180
- agentId: 'demo_agent',
181
- getSessionUrl: async ({ agentId, variables }) => {
182
- return 'wss://speech.talktopc.com/ws/conv?agentId=' + agentId;
183
- },
184
- position: {
185
- vertical: 'top',
186
- horizontal: 'left',
187
- offset: { x: 30, y: 30 }
188
- },
189
- button: {
190
- primaryColor: '#F59E0B',
191
- hoverColor: '#D97706'
192
- }
193
- });
194
- </div>
195
- <button class="demo-button" onclick="createTopLeftWidget()">Create Top-Left Widget</button>
196
- </div>
197
-
198
- <div class="example-section">
199
- <div class="example-title">6. Center Position</div>
200
- <div class="example-description">Widget positioned in center of screen</div>
201
- <div class="code-block">
202
- new EnhancedAgentWidget({
203
- agentId: 'demo_agent',
204
- getSessionUrl: async ({ agentId, variables }) => {
205
- return 'wss://speech.talktopc.com/ws/conv?agentId=' + agentId;
206
- },
207
- position: {
208
- vertical: 'center',
209
- horizontal: 'center'
210
- },
211
- button: {
212
- primaryColor: '#EC4899',
213
- hoverColor: '#DB2777',
214
- size: 'xl'
215
- }
216
- });
217
- </div>
218
- <button class="demo-button" onclick="createCenterWidget()">Create Center Widget</button>
219
- </div>
220
-
221
- <div class="example-section">
222
- <div class="example-title">7. Custom Styling</div>
223
- <div class="example-description">Widget with custom colors and styling</div>
224
- <div class="code-block">
225
- new EnhancedAgentWidget({
226
- agentId: 'demo_agent',
227
- getSessionUrl: async ({ agentId, variables }) => {
228
- return 'wss://speech.talktopc.com/ws/conv?agentId=' + agentId;
229
- },
230
- button: {
231
- primaryColor: '#1F2937',
232
- hoverColor: '#374151',
233
- activeColor: '#DC2626',
234
- shape: 'square',
235
- size: 'large'
236
- },
237
- panel: {
238
- backgroundColor: 'rgba(31, 41, 55, 0.95)',
239
- borderRadius: 20,
240
- backdropFilter: 'blur(20px)'
241
- },
242
- header: {
243
- title: 'Dark Mode Assistant',
244
- backgroundColor: '#1F2937',
245
- textColor: '#FFFFFF'
246
- },
247
- messages: {
248
- userBackgroundColor: '#3B82F6',
249
- agentBackgroundColor: '#6B7280',
250
- textColor: '#FFFFFF'
251
- }
252
- });
253
- </div>
254
- <button class="demo-button" onclick="createCustomStyledWidget()">Create Custom Styled Widget</button>
255
- </div>
256
-
257
- <div class="example-section">
258
- <div class="example-title">8. Auto-Open Demo</div>
259
- <div class="example-description">Widget that opens automatically with welcome message</div>
260
- <div class="code-block">
261
- new EnhancedAgentWidget({
262
- agentId: 'demo_agent',
263
- getSessionUrl: async ({ agentId, variables }) => {
264
- return 'wss://speech.talktopc.com/ws/conv?agentId=' + agentId;
265
- },
266
- behavior: {
267
- autoOpen: true,
268
- welcomeMessage: 'Welcome! I\'m your AI assistant. How can I help you today?'
269
- },
270
- button: {
271
- primaryColor: '#059669',
272
- hoverColor: '#047857'
273
- }
274
- });
275
- </div>
276
- <button class="demo-button" onclick="createAutoOpenWidget()">Create Auto-Open Widget</button>
277
- </div>
278
-
279
- <div style="text-align: center; margin-top: 40px;">
280
- <button class="demo-button destroy" onclick="destroyAllWidgets()">Destroy All Widgets</button>
281
- </div>
282
- </div>
283
-
284
- <!-- Load the SDK -->
285
- <script src="../dist/agent-widget.js"></script>
286
-
287
- <script>
288
- let currentWidget = null;
289
-
290
- function destroyCurrentWidget() {
291
- if (currentWidget) {
292
- currentWidget.destroy();
293
- currentWidget = null;
294
- }
295
- }
296
-
297
- function createDefaultWidget() {
298
- destroyCurrentWidget();
299
- currentWidget = new TTPAgentSDK.EnhancedAgentWidget({
300
- agentId: 'demo_agent_default',
301
- getSessionUrl: async ({ agentId, variables }) => {
302
- console.log('Creating session for:', agentId);
303
- return `wss://speech.talktopc.com/ws/conv?agentId=${agentId}&demo=true`;
304
- }
305
- });
306
- }
307
-
308
- function createCustomIconWidget() {
309
- destroyCurrentWidget();
310
- currentWidget = new TTPAgentSDK.EnhancedAgentWidget({
311
- agentId: 'demo_agent_custom',
312
- getSessionUrl: async ({ agentId, variables }) => {
313
- return `wss://speech.talktopc.com/ws/conv?agentId=${agentId}&demo=true`;
314
- },
315
- icon: {
316
- type: 'custom',
317
- customImage: 'https://via.placeholder.com/64x64/4F46E5/FFFFFF?text=LOGO',
318
- size: 'large'
319
- },
320
- button: {
321
- primaryColor: '#FF6B35',
322
- hoverColor: '#FF8C42'
323
- }
324
- });
325
- }
326
-
327
- function createEmojiWidget() {
328
- destroyCurrentWidget();
329
- currentWidget = new TTPAgentSDK.EnhancedAgentWidget({
330
- agentId: 'demo_agent_emoji',
331
- getSessionUrl: async ({ agentId, variables }) => {
332
- return `wss://speech.talktopc.com/ws/conv?agentId=${agentId}&demo=true`;
333
- },
334
- icon: {
335
- type: 'emoji',
336
- emoji: '🤖',
337
- size: 'xl'
338
- },
339
- button: {
340
- primaryColor: '#10B981',
341
- hoverColor: '#059669'
342
- }
343
- });
344
- }
345
-
346
- function createTextWidget() {
347
- destroyCurrentWidget();
348
- currentWidget = new TTPAgentSDK.EnhancedAgentWidget({
349
- agentId: 'demo_agent_text',
350
- getSessionUrl: async ({ agentId, variables }) => {
351
- return `wss://speech.talktopc.com/ws/conv?agentId=${agentId}&demo=true`;
352
- },
353
- icon: {
354
- type: 'text',
355
- text: 'HELP',
356
- size: 'medium'
357
- },
358
- button: {
359
- primaryColor: '#8B5CF6',
360
- hoverColor: '#7C3AED',
361
- shape: 'rounded'
362
- }
363
- });
364
- }
365
-
366
- function createTopLeftWidget() {
367
- destroyCurrentWidget();
368
- currentWidget = new TTPAgentSDK.EnhancedAgentWidget({
369
- agentId: 'demo_agent_topleft',
370
- getSessionUrl: async ({ agentId, variables }) => {
371
- return `wss://speech.talktopc.com/ws/conv?agentId=${agentId}&demo=true`;
372
- },
373
- position: {
374
- vertical: 'top',
375
- horizontal: 'left',
376
- offset: { x: 30, y: 30 }
377
- },
378
- button: {
379
- primaryColor: '#F59E0B',
380
- hoverColor: '#D97706'
381
- }
382
- });
383
- }
384
-
385
- function createCenterWidget() {
386
- destroyCurrentWidget();
387
- currentWidget = new TTPAgentSDK.EnhancedAgentWidget({
388
- agentId: 'demo_agent_center',
389
- getSessionUrl: async ({ agentId, variables }) => {
390
- return `wss://speech.talktopc.com/ws/conv?agentId=${agentId}&demo=true`;
391
- },
392
- position: {
393
- vertical: 'center',
394
- horizontal: 'center'
395
- },
396
- button: {
397
- primaryColor: '#EC4899',
398
- hoverColor: '#DB2777',
399
- size: 'xl'
400
- }
401
- });
402
- }
403
-
404
- function createCustomStyledWidget() {
405
- destroyCurrentWidget();
406
- currentWidget = new TTPAgentSDK.EnhancedAgentWidget({
407
- agentId: 'demo_agent_custom',
408
- getSessionUrl: async ({ agentId, variables }) => {
409
- return `wss://speech.talktopc.com/ws/conv?agentId=${agentId}&demo=true`;
410
- },
411
- button: {
412
- primaryColor: '#1F2937',
413
- hoverColor: '#374151',
414
- activeColor: '#DC2626',
415
- shape: 'square',
416
- size: 'large'
417
- },
418
- panel: {
419
- backgroundColor: 'rgba(31, 41, 55, 0.95)',
420
- borderRadius: 20,
421
- backdropFilter: 'blur(20px)'
422
- },
423
- header: {
424
- title: 'Dark Mode Assistant',
425
- backgroundColor: '#1F2937',
426
- textColor: '#FFFFFF'
427
- },
428
- messages: {
429
- userBackgroundColor: '#3B82F6',
430
- agentBackgroundColor: '#6B7280',
431
- textColor: '#FFFFFF'
432
- }
433
- });
434
- }
435
-
436
- function createAutoOpenWidget() {
437
- destroyCurrentWidget();
438
- currentWidget = new TTPAgentSDK.EnhancedAgentWidget({
439
- agentId: 'demo_agent_auto',
440
- getSessionUrl: async ({ agentId, variables }) => {
441
- return `wss://speech.talktopc.com/ws/conv?agentId=${agentId}&demo=true`;
442
- },
443
- behavior: {
444
- autoOpen: true,
445
- welcomeMessage: 'Welcome! I\'m your AI assistant. How can I help you today?'
446
- },
447
- button: {
448
- primaryColor: '#059669',
449
- hoverColor: '#047857'
450
- }
451
- });
452
- }
453
-
454
- function destroyAllWidgets() {
455
- destroyCurrentWidget();
456
- // Also destroy any legacy widgets
457
- const legacyWidget = document.getElementById('agent-widget');
458
- if (legacyWidget) {
459
- legacyWidget.remove();
460
- }
461
- }
462
-
463
- // Initialize with default widget
464
- window.addEventListener('load', () => {
465
- console.log('Enhanced AgentWidget Examples loaded');
466
- console.log('TTPAgentSDK available:', typeof TTPAgentSDK);
467
- console.log('EnhancedAgentWidget available:', typeof TTPAgentSDK?.EnhancedAgentWidget);
468
- });
469
- </script>
470
- </body>
471
- </html>