ttp-agent-sdk 2.2.6 → 2.2.8
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-agent-app.html +47 -1
- package/dist/examples/test-signed-link.html +1 -1
- package/dist/examples/test-text-chat.html +935 -200
- package/dist/examples/translations.json +346 -0
- package/examples/test-agent-app.html +47 -1
- package/examples/test-signed-link.html +1 -1
- package/examples/test-text-chat.html +935 -200
- package/examples/translations.json +346 -0
- package/package.json +1 -1
|
@@ -2,12 +2,12 @@
|
|
|
2
2
|
<html lang="en">
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
6
6
|
<title>Text Chat Widget - Test</title>
|
|
7
7
|
<style>
|
|
8
8
|
body {
|
|
9
9
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
10
|
-
max-width:
|
|
10
|
+
max-width: 1400px;
|
|
11
11
|
margin: 40px auto;
|
|
12
12
|
padding: 20px;
|
|
13
13
|
background: #F9FAFB;
|
|
@@ -17,6 +17,105 @@
|
|
|
17
17
|
body {
|
|
18
18
|
margin: 0;
|
|
19
19
|
padding: 10px;
|
|
20
|
+
font-size: 14px;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.container {
|
|
24
|
+
padding: 16px;
|
|
25
|
+
border-radius: 8px;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
h1 {
|
|
29
|
+
font-size: 24px;
|
|
30
|
+
margin-top: 0;
|
|
31
|
+
margin-bottom: 16px;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
h2 {
|
|
35
|
+
font-size: 18px;
|
|
36
|
+
margin-top: 24px;
|
|
37
|
+
margin-bottom: 12px;
|
|
38
|
+
padding-bottom: 6px;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.info {
|
|
42
|
+
padding: 12px;
|
|
43
|
+
margin: 16px 0;
|
|
44
|
+
font-size: 14px;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.info ul {
|
|
48
|
+
margin: 8px 0 0 16px;
|
|
49
|
+
padding-left: 16px;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.status {
|
|
53
|
+
padding: 10px;
|
|
54
|
+
font-size: 12px;
|
|
55
|
+
margin: 16px 0;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
button {
|
|
59
|
+
padding: 12px 20px;
|
|
60
|
+
font-size: 14px;
|
|
61
|
+
margin: 8px 8px 8px 0;
|
|
62
|
+
touch-action: manipulation;
|
|
63
|
+
min-height: 44px;
|
|
64
|
+
width: 100%;
|
|
65
|
+
max-width: 100%;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.code-block {
|
|
69
|
+
font-size: 11px;
|
|
70
|
+
padding: 12px;
|
|
71
|
+
margin: 16px 0;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.customization-container {
|
|
75
|
+
gap: 12px;
|
|
76
|
+
margin-top: 16px;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.customization-section {
|
|
80
|
+
padding: 16px;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.section-title {
|
|
84
|
+
font-size: 16px;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.section-content {
|
|
88
|
+
margin-top: 12px;
|
|
89
|
+
grid-template-columns: 1fr;
|
|
90
|
+
gap: 12px;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.section-content label {
|
|
94
|
+
font-size: 13px;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
select, input[type="text"], input[type="number"], input[type="color"] {
|
|
98
|
+
font-size: 16px; /* Prevents iOS zoom on focus */
|
|
99
|
+
padding: 10px 12px;
|
|
100
|
+
min-height: 44px;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
input[type="color"] {
|
|
104
|
+
min-width: 50px;
|
|
105
|
+
min-height: 50px;
|
|
106
|
+
width: 50px;
|
|
107
|
+
height: 50px;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.action-buttons {
|
|
111
|
+
flex-direction: column;
|
|
112
|
+
gap: 8px;
|
|
113
|
+
margin-top: 20px;
|
|
114
|
+
padding-top: 16px;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.action-buttons button {
|
|
118
|
+
margin: 0;
|
|
20
119
|
}
|
|
21
120
|
}
|
|
22
121
|
|
|
@@ -32,6 +131,13 @@
|
|
|
32
131
|
margin-top: 0;
|
|
33
132
|
}
|
|
34
133
|
|
|
134
|
+
h2 {
|
|
135
|
+
color: #374151;
|
|
136
|
+
border-bottom: 2px solid #E5E7EB;
|
|
137
|
+
padding-bottom: 8px;
|
|
138
|
+
margin-top: 30px;
|
|
139
|
+
}
|
|
140
|
+
|
|
35
141
|
.info {
|
|
36
142
|
background: #EFF6FF;
|
|
37
143
|
border-left: 4px solid #3B82F6;
|
|
@@ -73,6 +179,38 @@
|
|
|
73
179
|
button:hover {
|
|
74
180
|
background: #4338CA;
|
|
75
181
|
}
|
|
182
|
+
|
|
183
|
+
button.secondary {
|
|
184
|
+
background: #6B7280;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
button.secondary:hover {
|
|
188
|
+
background: #4B5563;
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
label {
|
|
192
|
+
display: flex;
|
|
193
|
+
flex-direction: column;
|
|
194
|
+
gap: 4px;
|
|
195
|
+
font-size: 14px;
|
|
196
|
+
color: #374151;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
select, input[type="text"], input[type="number"], input[type="color"] {
|
|
200
|
+
padding: 8px 12px;
|
|
201
|
+
border: 1px solid #D1D5DB;
|
|
202
|
+
border-radius: 6px;
|
|
203
|
+
font-size: 14px;
|
|
204
|
+
font-family: inherit;
|
|
205
|
+
background: white;
|
|
206
|
+
color: #111827;
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
select:focus, input:focus {
|
|
210
|
+
outline: none;
|
|
211
|
+
border-color: #667eea;
|
|
212
|
+
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
|
213
|
+
}
|
|
76
214
|
|
|
77
215
|
.code-block {
|
|
78
216
|
background: #1F2937;
|
|
@@ -84,6 +222,71 @@
|
|
|
84
222
|
overflow-x: auto;
|
|
85
223
|
margin: 20px 0;
|
|
86
224
|
}
|
|
225
|
+
|
|
226
|
+
/* Customization sections */
|
|
227
|
+
.customization-container {
|
|
228
|
+
display: grid;
|
|
229
|
+
grid-template-columns: 1fr;
|
|
230
|
+
gap: 20px;
|
|
231
|
+
margin-top: 20px;
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
.customization-section {
|
|
235
|
+
border: 1px solid #E5E7EB;
|
|
236
|
+
border-radius: 8px;
|
|
237
|
+
padding: 20px;
|
|
238
|
+
background: #F9FAFB;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
.section-header {
|
|
242
|
+
display: flex;
|
|
243
|
+
align-items: center;
|
|
244
|
+
justify-content: space-between;
|
|
245
|
+
cursor: pointer;
|
|
246
|
+
user-select: none;
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
.section-title {
|
|
250
|
+
font-size: 18px;
|
|
251
|
+
font-weight: 600;
|
|
252
|
+
color: #111827;
|
|
253
|
+
margin: 0;
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
.section-toggle {
|
|
257
|
+
font-size: 20px;
|
|
258
|
+
color: #6B7280;
|
|
259
|
+
transition: transform 0.2s;
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
.section-toggle.collapsed {
|
|
263
|
+
transform: rotate(-90deg);
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
.section-content {
|
|
267
|
+
margin-top: 16px;
|
|
268
|
+
display: grid;
|
|
269
|
+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
270
|
+
gap: 16px;
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
@media (max-width: 480px) {
|
|
274
|
+
.section-content {
|
|
275
|
+
grid-template-columns: 1fr;
|
|
276
|
+
}
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
.section-content.hidden {
|
|
280
|
+
display: none;
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
.action-buttons {
|
|
284
|
+
display: flex;
|
|
285
|
+
gap: 12px;
|
|
286
|
+
margin-top: 30px;
|
|
287
|
+
padding-top: 20px;
|
|
288
|
+
border-top: 2px solid #E5E7EB;
|
|
289
|
+
}
|
|
87
290
|
</style>
|
|
88
291
|
</head>
|
|
89
292
|
<body>
|
|
@@ -95,100 +298,549 @@
|
|
|
95
298
|
<ul>
|
|
96
299
|
<li>Click the chat button (bottom-right) to open the chat panel</li>
|
|
97
300
|
<li>Type a message and press Enter or click Send</li>
|
|
98
|
-
<li>
|
|
99
|
-
<li>
|
|
301
|
+
<li>Customize the widget using the sections below</li>
|
|
302
|
+
<li>Click "Apply" to update the widget with your changes</li>
|
|
100
303
|
</ul>
|
|
101
304
|
</div>
|
|
102
305
|
|
|
103
306
|
<div id="status" class="status">Loading SDK...</div>
|
|
104
|
-
|
|
105
|
-
<h2>Configuration</h2>
|
|
106
|
-
<div class="code-block">
|
|
107
|
-
<pre>const widget = new TTPAgentSDK.TextChatWidget({
|
|
108
|
-
agentId: 'agent_87c4a55a1',
|
|
109
|
-
appId: 'app_Bc01EqMQt2Euehl4qqZSi6l3FJP42Q9vJ0pC',
|
|
110
|
-
primaryColor: '#10B981',
|
|
111
|
-
position: 'bottom-right',
|
|
112
|
-
icon: {
|
|
113
|
-
type: 'chat',
|
|
114
|
-
size: 'medium'
|
|
115
|
-
}
|
|
116
|
-
});</pre>
|
|
117
|
-
</div>
|
|
118
307
|
|
|
119
|
-
<h2>Live
|
|
120
|
-
<div class="
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
</
|
|
128
|
-
<
|
|
129
|
-
<
|
|
130
|
-
<
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
<
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
<
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
<
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
<
|
|
168
|
-
</
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
<
|
|
308
|
+
<h2>Live Customization</h2>
|
|
309
|
+
<div class="customization-container">
|
|
310
|
+
|
|
311
|
+
<!-- Common Section -->
|
|
312
|
+
<div class="customization-section">
|
|
313
|
+
<div class="section-header" onclick="toggleSection('common')">
|
|
314
|
+
<h3 class="section-title">🔧 Common Settings</h3>
|
|
315
|
+
<span class="section-toggle" id="common-toggle">▼</span>
|
|
316
|
+
</div>
|
|
317
|
+
<div class="section-content" id="common-content">
|
|
318
|
+
<label id="labelLanguage">Language
|
|
319
|
+
<select id="languageSelect">
|
|
320
|
+
<option value="en">English</option>
|
|
321
|
+
<option value="he" selected>עברית</option>
|
|
322
|
+
<option value="ar">العربية</option>
|
|
323
|
+
<option value="ru">Русский</option>
|
|
324
|
+
<option value="es">Español</option>
|
|
325
|
+
<option value="fr">Français</option>
|
|
326
|
+
<option value="de">Deutsch</option>
|
|
327
|
+
</select>
|
|
328
|
+
</label>
|
|
329
|
+
<label id="labelWidgetMode">Widget Mode
|
|
330
|
+
<select id="modeSelect">
|
|
331
|
+
<option value="unified" selected>Unified (Both)</option>
|
|
332
|
+
<option value="voice-only">Voice Only</option>
|
|
333
|
+
<option value="text-only">Text Only</option>
|
|
334
|
+
</select>
|
|
335
|
+
</label>
|
|
336
|
+
<label id="labelDirection">Direction
|
|
337
|
+
<select id="dirSelect">
|
|
338
|
+
<option value="ltr">LTR</option>
|
|
339
|
+
<option value="rtl" selected>RTL</option>
|
|
340
|
+
</select>
|
|
341
|
+
</label>
|
|
342
|
+
<label id="labelPosition">Position
|
|
343
|
+
<select id="posSelect">
|
|
344
|
+
<option value="bottom-right" selected>bottom-right</option>
|
|
345
|
+
<option value="bottom-left">bottom-left</option>
|
|
346
|
+
<option value="top-right">top-right</option>
|
|
347
|
+
<option value="top-left">top-left</option>
|
|
348
|
+
</select>
|
|
349
|
+
</label>
|
|
350
|
+
|
|
351
|
+
<h4 style="grid-column: 1/-1; margin: 16px 0 8px 0; color: #6B7280; font-size: 14px;">Panel</h4>
|
|
352
|
+
<label>Panel Width
|
|
353
|
+
<input id="panelWidth" type="number" value="350" min="260" max="520" />
|
|
354
|
+
</label>
|
|
355
|
+
<label>Panel Height
|
|
356
|
+
<input id="panelHeight" type="number" value="500" min="360" max="900" />
|
|
357
|
+
</label>
|
|
358
|
+
<label>Border Radius
|
|
359
|
+
<input id="panelBorderRadius" type="number" value="12" min="0" max="30" />
|
|
360
|
+
</label>
|
|
361
|
+
<label>Background Color
|
|
362
|
+
<div style="display: flex; gap: 8px; align-items: center;">
|
|
363
|
+
<input id="panelBgColor" type="color" value="#FFFFFF" />
|
|
364
|
+
<div id="panelBgColorColorBox" style="width: 30px; height: 30px; border-radius: 4px; border: 2px solid #D1D5DB; background: #FFFFFF; flex-shrink: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"></div>
|
|
365
|
+
<span id="panelBgColorValue" style="font-family: monospace; font-size: 12px; color: #6B7280; min-width: 70px;">#FFFFFF</span>
|
|
366
|
+
</div>
|
|
367
|
+
</label>
|
|
368
|
+
|
|
369
|
+
<h4 style="grid-column: 1/-1; margin: 16px 0 8px 0; color: #6B7280; font-size: 14px;">Button</h4>
|
|
370
|
+
<label>Button Size
|
|
371
|
+
<select id="buttonSize">
|
|
372
|
+
<option value="small">Small</option>
|
|
373
|
+
<option value="medium" selected>Medium</option>
|
|
374
|
+
<option value="large">Large</option>
|
|
375
|
+
<option value="xl">XL</option>
|
|
376
|
+
</select>
|
|
377
|
+
</label>
|
|
378
|
+
<label>Button Shape
|
|
379
|
+
<select id="buttonShape">
|
|
380
|
+
<option value="circle" selected>Circle</option>
|
|
381
|
+
<option value="square">Square</option>
|
|
382
|
+
<option value="rounded">Rounded</option>
|
|
383
|
+
</select>
|
|
384
|
+
</label>
|
|
385
|
+
<label>Button Color
|
|
386
|
+
<div style="display: flex; gap: 8px; align-items: center;">
|
|
387
|
+
<input id="buttonBgColor" type="color" value="#7C3AED" />
|
|
388
|
+
<div id="buttonBgColorColorBox" style="width: 30px; height: 30px; border-radius: 4px; border: 2px solid #D1D5DB; background: #7C3AED; flex-shrink: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"></div>
|
|
389
|
+
<span id="buttonBgColorValue" style="font-family: monospace; font-size: 12px; color: #6B7280; min-width: 70px;">#7C3AED</span>
|
|
390
|
+
</div>
|
|
391
|
+
</label>
|
|
392
|
+
<label>Button Hover Color
|
|
393
|
+
<div style="display: flex; gap: 8px; align-items: center;">
|
|
394
|
+
<input id="buttonHoverColor" type="color" value="#059669" />
|
|
395
|
+
<div id="buttonHoverColorColorBox" style="width: 30px; height: 30px; border-radius: 4px; border: 2px solid #D1D5DB; background: #059669; flex-shrink: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"></div>
|
|
396
|
+
<span id="buttonHoverColorValue" style="font-family: monospace; font-size: 12px; color: #6B7280; min-width: 70px;">#059669</span>
|
|
397
|
+
</div>
|
|
398
|
+
</label>
|
|
399
|
+
|
|
400
|
+
<h4 style="grid-column: 1/-1; margin: 16px 0 8px 0; color: #6B7280; font-size: 14px;">Header</h4>
|
|
401
|
+
<label>Title
|
|
402
|
+
<input id="headerTitle" type="text" value="עוזר וירטואלי חכם" />
|
|
403
|
+
</label>
|
|
404
|
+
<label>Show Title
|
|
405
|
+
<select id="headerShowTitle">
|
|
406
|
+
<option value="true" selected>Yes</option>
|
|
407
|
+
<option value="false">No</option>
|
|
408
|
+
</select>
|
|
409
|
+
</label>
|
|
410
|
+
<label>Background Color
|
|
411
|
+
<div style="display: flex; gap: 8px; align-items: center;">
|
|
412
|
+
<input id="headerBgColor" type="color" value="#7C3AED" />
|
|
413
|
+
<div id="headerBgColorColorBox" style="width: 30px; height: 30px; border-radius: 4px; border: 2px solid #D1D5DB; background: #7C3AED; flex-shrink: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"></div>
|
|
414
|
+
<span id="headerBgColorValue" style="font-family: monospace; font-size: 12px; color: #6B7280; min-width: 70px;">#7C3AED</span>
|
|
415
|
+
</div>
|
|
416
|
+
</label>
|
|
417
|
+
<label>Text Color
|
|
418
|
+
<div style="display: flex; gap: 8px; align-items: center;">
|
|
419
|
+
<input id="headerTextColor" type="color" value="#FFFFFF" />
|
|
420
|
+
<div id="headerTextColorColorBox" style="width: 30px; height: 30px; border-radius: 4px; border: 2px solid #D1D5DB; background: #FFFFFF; flex-shrink: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"></div>
|
|
421
|
+
<span id="headerTextColorValue" style="font-family: monospace; font-size: 12px; color: #6B7280; min-width: 70px;">#FFFFFF</span>
|
|
422
|
+
</div>
|
|
423
|
+
</label>
|
|
424
|
+
<label>Show Close Button
|
|
425
|
+
<select id="headerShowClose">
|
|
426
|
+
<option value="true" selected>Yes</option>
|
|
427
|
+
<option value="false">No</option>
|
|
428
|
+
</select>
|
|
429
|
+
</label>
|
|
430
|
+
|
|
431
|
+
<h4 style="grid-column: 1/-1; margin: 16px 0 8px 0; color: #6B7280; font-size: 14px;">Tooltips</h4>
|
|
432
|
+
<label>New Chat Tooltip
|
|
433
|
+
<input id="tooltipNewChat" type="text" value="" placeholder="Leave empty for default" />
|
|
434
|
+
</label>
|
|
435
|
+
<label>Back Tooltip
|
|
436
|
+
<input id="tooltipBack" type="text" value="" placeholder="Leave empty for default" />
|
|
437
|
+
</label>
|
|
438
|
+
<label>Close Tooltip
|
|
439
|
+
<input id="tooltipClose" type="text" value="" placeholder="Leave empty for default" />
|
|
440
|
+
</label>
|
|
441
|
+
<label>Mute Tooltip (Voice)
|
|
442
|
+
<input id="tooltipMute" type="text" value="" placeholder="Leave empty for default" />
|
|
443
|
+
</label>
|
|
444
|
+
<label>Speaker Tooltip (Voice)
|
|
445
|
+
<input id="tooltipSpeaker" type="text" value="" placeholder="Leave empty for default" />
|
|
446
|
+
</label>
|
|
447
|
+
<label>End Call Tooltip (Voice)
|
|
448
|
+
<input id="tooltipEndCall" type="text" value="" placeholder="Leave empty for default" />
|
|
449
|
+
</label>
|
|
450
|
+
|
|
451
|
+
<h4 style="grid-column: 1/-1; margin: 16px 0 8px 0; color: #6B7280; font-size: 14px;">Messages</h4>
|
|
452
|
+
<label>Font Size
|
|
453
|
+
<input id="msgFontSize" type="text" value="14px" />
|
|
454
|
+
</label>
|
|
455
|
+
<label>Border Radius
|
|
456
|
+
<input id="msgBorderRadius" type="number" value="8" min="0" max="30" />
|
|
457
|
+
</label>
|
|
458
|
+
<label>Text Color
|
|
459
|
+
<div style="display: flex; gap: 8px; align-items: center;">
|
|
460
|
+
<input id="msgTextColor" type="color" value="#1F2937" />
|
|
461
|
+
<div id="msgTextColorColorBox" style="width: 30px; height: 30px; border-radius: 4px; border: 2px solid #D1D5DB; background: #1F2937; flex-shrink: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"></div>
|
|
462
|
+
<span id="msgTextColorValue" style="font-family: monospace; font-size: 12px; color: #6B7280; min-width: 70px;">#1F2937</span>
|
|
463
|
+
</div>
|
|
464
|
+
</label>
|
|
465
|
+
<label>User Bubble Color
|
|
466
|
+
<div style="display: flex; gap: 8px; align-items: center;">
|
|
467
|
+
<input id="userBgColor" type="color" value="#E5E7EB" />
|
|
468
|
+
<div id="userBgColorColorBox" style="width: 30px; height: 30px; border-radius: 4px; border: 2px solid #D1D5DB; background: #E5E7EB; flex-shrink: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"></div>
|
|
469
|
+
<span id="userBgColorValue" style="font-family: monospace; font-size: 12px; color: #6B7280; min-width: 70px;">#E5E7EB</span>
|
|
470
|
+
</div>
|
|
471
|
+
</label>
|
|
472
|
+
<label>Agent Bubble Color
|
|
473
|
+
<div style="display: flex; gap: 8px; align-items: center;">
|
|
474
|
+
<input id="agentBgColor" type="color" value="#F3F4F6" />
|
|
475
|
+
<div id="agentBgColorColorBox" style="width: 30px; height: 30px; border-radius: 4px; border: 2px solid #D1D5DB; background: #F3F4F6; flex-shrink: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"></div>
|
|
476
|
+
<span id="agentBgColorValue" style="font-family: monospace; font-size: 12px; color: #6B7280; min-width: 70px;">#F3F4F6</span>
|
|
477
|
+
</div>
|
|
478
|
+
</label>
|
|
479
|
+
<label>System Bubble Color
|
|
480
|
+
<div style="display: flex; gap: 8px; align-items: center;">
|
|
481
|
+
<input id="systemBgColor" type="color" value="#DCFCE7" />
|
|
482
|
+
<div id="systemBgColorColorBox" style="width: 30px; height: 30px; border-radius: 4px; border: 2px solid #D1D5DB; background: #DCFCE7; flex-shrink: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"></div>
|
|
483
|
+
<span id="systemBgColorValue" style="font-family: monospace; font-size: 12px; color: #6B7280; min-width: 70px;">#DCFCE7</span>
|
|
484
|
+
</div>
|
|
485
|
+
</label>
|
|
486
|
+
<label>Error Bubble Color
|
|
487
|
+
<div style="display: flex; gap: 8px; align-items: center;">
|
|
488
|
+
<input id="errorBgColor" type="color" value="#FEE2E2" />
|
|
489
|
+
<div id="errorBgColorColorBox" style="width: 30px; height: 30px; border-radius: 4px; border: 2px solid #D1D5DB; background: #FEE2E2; flex-shrink: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"></div>
|
|
490
|
+
<span id="errorBgColorValue" style="font-family: monospace; font-size: 12px; color: #6B7280; min-width: 70px;">#FEE2E2</span>
|
|
491
|
+
</div>
|
|
492
|
+
</label>
|
|
493
|
+
|
|
494
|
+
<h4 style="grid-column: 1/-1; margin: 16px 0 8px 0; color: #6B7280; font-size: 14px;">Animation</h4>
|
|
495
|
+
<label>Enable Hover
|
|
496
|
+
<select id="animHover">
|
|
497
|
+
<option value="true" selected>Yes</option>
|
|
498
|
+
<option value="false">No</option>
|
|
499
|
+
</select>
|
|
500
|
+
</label>
|
|
501
|
+
<label>Enable Pulse
|
|
502
|
+
<select id="animPulse">
|
|
503
|
+
<option value="true" selected>Yes</option>
|
|
504
|
+
<option value="false">No</option>
|
|
505
|
+
</select>
|
|
506
|
+
</label>
|
|
507
|
+
<label>Enable Slide
|
|
508
|
+
<select id="animSlide">
|
|
509
|
+
<option value="true" selected>Yes</option>
|
|
510
|
+
<option value="false">No</option>
|
|
511
|
+
</select>
|
|
512
|
+
</label>
|
|
513
|
+
<label>Duration (seconds)
|
|
514
|
+
<input id="animDuration" type="number" value="0.3" min="0.1" max="2" step="0.1" />
|
|
515
|
+
</label>
|
|
516
|
+
|
|
517
|
+
<h4 style="grid-column: 1/-1; margin: 16px 0 8px 0; color: #6B7280; font-size: 14px;">Behavior</h4>
|
|
518
|
+
<label>Start Open
|
|
519
|
+
<select id="behaviorStartOpen">
|
|
520
|
+
<option value="true" selected>Yes</option>
|
|
521
|
+
<option value="false">No</option>
|
|
522
|
+
</select>
|
|
523
|
+
</label>
|
|
524
|
+
<label>Hidden Button
|
|
525
|
+
<select id="behaviorHidden">
|
|
526
|
+
<option value="false" selected>No</option>
|
|
527
|
+
<option value="true">Yes</option>
|
|
528
|
+
</select>
|
|
529
|
+
</label>
|
|
530
|
+
<label>Show Welcome Message
|
|
531
|
+
<select id="behaviorWelcome">
|
|
532
|
+
<option value="true" selected>Yes</option>
|
|
533
|
+
<option value="false">No</option>
|
|
534
|
+
</select>
|
|
535
|
+
</label>
|
|
536
|
+
<label>Welcome Message
|
|
537
|
+
<input id="behaviorWelcomeMsg" type="text" value="שלום! איך אפשר לעזור?" />
|
|
538
|
+
</label>
|
|
539
|
+
</div>
|
|
540
|
+
</div>
|
|
541
|
+
|
|
542
|
+
<!-- Voice Section -->
|
|
543
|
+
<div class="customization-section">
|
|
544
|
+
<div class="section-header" onclick="toggleSection('voice')">
|
|
545
|
+
<h3 class="section-title">🎤 Voice Settings</h3>
|
|
546
|
+
<span class="section-toggle collapsed" id="voice-toggle">▶</span>
|
|
547
|
+
</div>
|
|
548
|
+
<div class="section-content hidden" id="voice-content">
|
|
549
|
+
<h4 style="grid-column: 1/-1; margin: 0 0 8px 0; color: #6B7280; font-size: 14px;">Voice Interface</h4>
|
|
550
|
+
<label>Avatar Background Color
|
|
551
|
+
<input id="voiceAvatarBg" type="color" value="#667eea" />
|
|
552
|
+
</label>
|
|
553
|
+
<label>Avatar Active Background
|
|
554
|
+
<input id="voiceAvatarActiveBg" type="color" value="#667eea" />
|
|
555
|
+
</label>
|
|
556
|
+
<label>Status Title Color
|
|
557
|
+
<input id="voiceStatusTitleColor" type="color" value="#1e293b" />
|
|
558
|
+
</label>
|
|
559
|
+
<label>Status Subtitle Color
|
|
560
|
+
<input id="voiceStatusSubtitleColor" type="color" value="#64748b" />
|
|
561
|
+
</label>
|
|
562
|
+
<label>Start Call Button Color
|
|
563
|
+
<input id="voiceStartCallBtnColor" type="color" value="#667eea" />
|
|
564
|
+
</label>
|
|
565
|
+
<label>Start Call Button Text Color
|
|
566
|
+
<input id="voiceStartCallBtnTextColor" type="color" value="#FFFFFF" />
|
|
567
|
+
</label>
|
|
568
|
+
<label>Transcript Background
|
|
569
|
+
<input id="voiceTranscriptBg" type="color" value="#FFFFFF" />
|
|
570
|
+
</label>
|
|
571
|
+
<label>Transcript Text Color
|
|
572
|
+
<input id="voiceTranscriptTextColor" type="color" value="#1e293b" />
|
|
573
|
+
</label>
|
|
574
|
+
<label>Transcript Label Color
|
|
575
|
+
<input id="voiceTranscriptLabelColor" type="color" value="#94a3b8" />
|
|
576
|
+
</label>
|
|
577
|
+
<label>Control Button Color
|
|
578
|
+
<input id="voiceControlBtnColor" type="color" value="#FFFFFF" />
|
|
579
|
+
</label>
|
|
580
|
+
<label>Control Button Secondary Color
|
|
581
|
+
<input id="voiceControlBtnSecondaryColor" type="color" value="#64748b" />
|
|
582
|
+
</label>
|
|
583
|
+
<label>End Call Button Color
|
|
584
|
+
<input id="voiceEndCallBtnColor" type="color" value="#ef4444" />
|
|
585
|
+
</label>
|
|
586
|
+
<label>Mic Button Color
|
|
587
|
+
<input id="voiceMicBtnColor" type="color" value="#10B981" />
|
|
588
|
+
</label>
|
|
589
|
+
<label>Mic Button Active Color
|
|
590
|
+
<input id="voiceMicBtnActiveColor" type="color" value="#EF4444" />
|
|
591
|
+
</label>
|
|
592
|
+
<label>Mic Button Hint Text
|
|
593
|
+
<input id="voiceMicHintText" type="text" value="Click the button to start voice conversation" />
|
|
594
|
+
</label>
|
|
595
|
+
<label>Mic Button Hint Color
|
|
596
|
+
<input id="voiceMicHintColor" type="color" value="#6B7280" />
|
|
597
|
+
</label>
|
|
598
|
+
<label>Mic Button Hint Font Size
|
|
599
|
+
<input id="voiceMicHintFontSize" type="text" value="12px" />
|
|
600
|
+
</label>
|
|
601
|
+
</div>
|
|
602
|
+
</div>
|
|
603
|
+
|
|
604
|
+
<!-- Text Section -->
|
|
605
|
+
<div class="customization-section">
|
|
606
|
+
<div class="section-header" onclick="toggleSection('text')">
|
|
607
|
+
<h3 class="section-title">💬 Text Settings</h3>
|
|
608
|
+
<span class="section-toggle collapsed" id="text-toggle">▶</span>
|
|
609
|
+
</div>
|
|
610
|
+
<div class="section-content hidden" id="text-content">
|
|
611
|
+
<h4 style="grid-column: 1/-1; margin: 0 0 8px 0; color: #6B7280; font-size: 14px;">Send Button</h4>
|
|
612
|
+
<label>Send Button Color
|
|
613
|
+
<input id="textSendBtnColor" type="color" value="#7C3AED" />
|
|
614
|
+
</label>
|
|
615
|
+
<label>Send Button Hover Color
|
|
616
|
+
<input id="textSendBtnHoverColor" type="color" value="#7C3AED" />
|
|
617
|
+
</label>
|
|
618
|
+
<label>Send Button Active Color
|
|
619
|
+
<input id="textSendBtnActiveColor" type="color" value="#6D28D9" />
|
|
620
|
+
</label>
|
|
621
|
+
<label>Send Button Text
|
|
622
|
+
<input id="textSendBtnText" type="text" value="➤" />
|
|
623
|
+
</label>
|
|
624
|
+
<label>Send Button Text Color
|
|
625
|
+
<input id="textSendBtnTextColor" type="color" value="#FFFFFF" />
|
|
626
|
+
</label>
|
|
627
|
+
<label>Send Button Font Size
|
|
628
|
+
<input id="textSendBtnFontSize" type="text" value="18px" />
|
|
629
|
+
</label>
|
|
630
|
+
<label>Send Button Font Weight
|
|
631
|
+
<input id="textSendBtnFontWeight" type="text" value="500" />
|
|
632
|
+
</label>
|
|
633
|
+
<label>Send Button Hint Text
|
|
634
|
+
<input id="textSendHintText" type="text" value="" />
|
|
635
|
+
</label>
|
|
636
|
+
<label>Send Button Hint Color
|
|
637
|
+
<input id="textSendHintColor" type="color" value="#6B7280" />
|
|
638
|
+
</label>
|
|
639
|
+
<label>Send Button Hint Font Size
|
|
640
|
+
<input id="textSendHintFontSize" type="text" value="12px" />
|
|
641
|
+
</label>
|
|
642
|
+
|
|
643
|
+
<h4 style="grid-column: 1/-1; margin: 16px 0 8px 0; color: #6B7280; font-size: 14px;">Input Field</h4>
|
|
644
|
+
<label>Placeholder
|
|
645
|
+
<input id="textInputPlaceholder" type="text" value="הקלד הודעה..." />
|
|
646
|
+
</label>
|
|
647
|
+
<label>Border Color
|
|
648
|
+
<input id="textInputBorderColor" type="color" value="#E5E7EB" />
|
|
649
|
+
</label>
|
|
650
|
+
<label>Focus Color
|
|
651
|
+
<input id="textInputFocusColor" type="color" value="#7C3AED" />
|
|
652
|
+
</label>
|
|
653
|
+
<label>Background Color
|
|
654
|
+
<input id="textInputBgColor" type="color" value="#FFFFFF" />
|
|
655
|
+
</label>
|
|
656
|
+
<label>Text Color
|
|
657
|
+
<input id="textInputTextColor" type="color" value="#1F2937" />
|
|
658
|
+
</label>
|
|
659
|
+
<label>Font Size
|
|
660
|
+
<input id="textInputFontSize" type="text" value="14px" />
|
|
661
|
+
</label>
|
|
662
|
+
<label>Border Radius
|
|
663
|
+
<input id="textInputBorderRadius" type="number" value="20" min="0" max="30" />
|
|
664
|
+
</label>
|
|
665
|
+
<label>Padding
|
|
666
|
+
<input id="textInputPadding" type="text" value="6px 14px" />
|
|
667
|
+
</label>
|
|
173
668
|
</div>
|
|
174
669
|
</div>
|
|
670
|
+
|
|
671
|
+
<!-- Landing Section -->
|
|
672
|
+
<div class="customization-section">
|
|
673
|
+
<div class="section-header" onclick="toggleSection('landing')">
|
|
674
|
+
<h3 class="section-title">🎯 Landing Screen Settings</h3>
|
|
675
|
+
<span class="section-toggle collapsed" id="landing-toggle">▶</span>
|
|
676
|
+
</div>
|
|
677
|
+
<div class="section-content hidden" id="landing-content">
|
|
678
|
+
<label>Background Color
|
|
679
|
+
<input id="landingBgColor" type="color" value="#f8fafc" />
|
|
680
|
+
</label>
|
|
681
|
+
<label>Logo (Emoji/Text)
|
|
682
|
+
<input id="landingLogo" type="text" value="🤖" />
|
|
683
|
+
</label>
|
|
684
|
+
<label>Title
|
|
685
|
+
<input id="landingTitle" type="text" value="" placeholder="Leave empty for default" />
|
|
686
|
+
</label>
|
|
687
|
+
<label>Title Color
|
|
688
|
+
<input id="landingTitleColor" type="color" value="#1e293b" />
|
|
689
|
+
</label>
|
|
690
|
+
<label>Mode Card Background
|
|
691
|
+
<input id="landingCardBg" type="color" value="#FFFFFF" />
|
|
692
|
+
</label>
|
|
693
|
+
<label>Mode Card Border Color
|
|
694
|
+
<input id="landingCardBorder" type="color" value="#E2E8F0" />
|
|
695
|
+
</label>
|
|
696
|
+
<label>Mode Card Hover Border
|
|
697
|
+
<input id="landingCardHoverBorder" type="color" value="#7C3AED" />
|
|
698
|
+
</label>
|
|
699
|
+
<label>Mode Card Icon Background
|
|
700
|
+
<input id="landingCardIconBg" type="color" value="#7C3AED" />
|
|
701
|
+
</label>
|
|
702
|
+
<label>Mode Card Title Color
|
|
703
|
+
<input id="landingCardTitleColor" type="color" value="#111827" />
|
|
704
|
+
</label>
|
|
705
|
+
<label>Voice Card Icon
|
|
706
|
+
<input id="landingVoiceIcon" type="text" value="🎤" />
|
|
707
|
+
</label>
|
|
708
|
+
<label>Text Card Icon
|
|
709
|
+
<input id="landingTextIcon" type="text" value="💬" />
|
|
710
|
+
</label>
|
|
711
|
+
</div>
|
|
712
|
+
</div>
|
|
713
|
+
|
|
714
|
+
</div>
|
|
715
|
+
|
|
716
|
+
<div class="action-buttons">
|
|
717
|
+
<button id="resetBtn" class="secondary">🔄 Reset</button>
|
|
175
718
|
</div>
|
|
176
|
-
|
|
177
|
-
<h2>Features</h2>
|
|
178
|
-
<ul>
|
|
179
|
-
<li>✅ Text-based chat interface</li>
|
|
180
|
-
<li>✅ Similar customization options to voice widget</li>
|
|
181
|
-
<li>✅ Auto-connect on first message</li>
|
|
182
|
-
<li>✅ Enter key to send</li>
|
|
183
|
-
<li>✅ Real-time message display</li>
|
|
184
|
-
<li>✅ Error handling</li>
|
|
185
|
-
</ul>
|
|
186
719
|
</div>
|
|
187
720
|
|
|
188
721
|
<!-- Load the SDK from dist folder -->
|
|
189
722
|
<script src="../agent-widget.js" data-agent-id="agent_87c4a55a1" data-app-id="app_Bc01EqMQt2Euehl4qqZSi6l3FJP42Q9vJ0pC" onload="console.log('SDK script loaded successfully')" onerror="console.error('Failed to load SDK script')"></script>
|
|
190
723
|
|
|
191
724
|
<script>
|
|
725
|
+
// Language selection only affects widget, not page UI
|
|
726
|
+
// No translations needed for page UI
|
|
727
|
+
|
|
728
|
+
// Setup color value displays for all color inputs
|
|
729
|
+
function setupColorDisplays() {
|
|
730
|
+
const colorInputs = document.querySelectorAll('input[type="color"]');
|
|
731
|
+
colorInputs.forEach(input => {
|
|
732
|
+
// Get or create the value display span
|
|
733
|
+
const valueSpanId = input.id + 'Value';
|
|
734
|
+
const colorBoxId = input.id + 'ColorBox';
|
|
735
|
+
let valueSpan = document.getElementById(valueSpanId);
|
|
736
|
+
let colorBox = document.getElementById(colorBoxId);
|
|
737
|
+
|
|
738
|
+
if (!valueSpan || !colorBox) {
|
|
739
|
+
// Check if parent is already a flex container div
|
|
740
|
+
const parent = input.parentElement;
|
|
741
|
+
const isParentDiv = parent.tagName === 'DIV' && (parent.style.display === 'flex' || getComputedStyle(parent).display === 'flex');
|
|
742
|
+
|
|
743
|
+
if (isParentDiv) {
|
|
744
|
+
// Already has wrapper div, just add color box and span
|
|
745
|
+
if (!colorBox) {
|
|
746
|
+
colorBox = document.createElement('div');
|
|
747
|
+
colorBox.id = colorBoxId;
|
|
748
|
+
colorBox.style.cssText = 'width: 30px; height: 30px; border-radius: 4px; border: 2px solid #D1D5DB; background: ' + input.value + '; flex-shrink: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.1);';
|
|
749
|
+
parent.appendChild(colorBox);
|
|
750
|
+
}
|
|
751
|
+
if (!valueSpan) {
|
|
752
|
+
valueSpan = document.createElement('span');
|
|
753
|
+
valueSpan.id = valueSpanId;
|
|
754
|
+
valueSpan.style.cssText = 'font-family: monospace; font-size: 12px; color: #6B7280; min-width: 70px;';
|
|
755
|
+
parent.appendChild(valueSpan);
|
|
756
|
+
}
|
|
757
|
+
} else if (parent.tagName === 'LABEL') {
|
|
758
|
+
// Input is directly in label, create wrapper div
|
|
759
|
+
const wrapper = document.createElement('div');
|
|
760
|
+
wrapper.style.cssText = 'display: flex; gap: 8px; align-items: center;';
|
|
761
|
+
|
|
762
|
+
// Move input to wrapper
|
|
763
|
+
parent.insertBefore(wrapper, input);
|
|
764
|
+
wrapper.appendChild(input);
|
|
765
|
+
|
|
766
|
+
// Create color box
|
|
767
|
+
colorBox = document.createElement('div');
|
|
768
|
+
colorBox.id = colorBoxId;
|
|
769
|
+
colorBox.style.cssText = 'width: 30px; height: 30px; border-radius: 4px; border: 2px solid #D1D5DB; background: ' + input.value + '; flex-shrink: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.1);';
|
|
770
|
+
wrapper.appendChild(colorBox);
|
|
771
|
+
|
|
772
|
+
// Create value span
|
|
773
|
+
valueSpan = document.createElement('span');
|
|
774
|
+
valueSpan.id = valueSpanId;
|
|
775
|
+
valueSpan.style.cssText = 'font-family: monospace; font-size: 12px; color: #6B7280; min-width: 70px;';
|
|
776
|
+
wrapper.appendChild(valueSpan);
|
|
777
|
+
}
|
|
778
|
+
}
|
|
779
|
+
|
|
780
|
+
// Update function
|
|
781
|
+
const updateDisplay = () => {
|
|
782
|
+
const currentValue = input.value.toUpperCase();
|
|
783
|
+
if (valueSpan) {
|
|
784
|
+
valueSpan.textContent = currentValue;
|
|
785
|
+
}
|
|
786
|
+
if (colorBox) {
|
|
787
|
+
colorBox.style.background = input.value;
|
|
788
|
+
}
|
|
789
|
+
};
|
|
790
|
+
|
|
791
|
+
// Set initial value
|
|
792
|
+
updateDisplay();
|
|
793
|
+
|
|
794
|
+
// Add event listener to update value when color changes
|
|
795
|
+
input.addEventListener('input', updateDisplay);
|
|
796
|
+
});
|
|
797
|
+
}
|
|
798
|
+
|
|
799
|
+
// Initialize color displays and language handler when DOM is ready
|
|
800
|
+
function initializeUI() {
|
|
801
|
+
setupColorDisplays();
|
|
802
|
+
|
|
803
|
+
// Set up language change handler - only update widget, not page UI
|
|
804
|
+
const langSelect = document.getElementById('languageSelect');
|
|
805
|
+
if (langSelect) {
|
|
806
|
+
// Update widget language when language changes (don't update page UI)
|
|
807
|
+
langSelect.addEventListener('change', function(e) {
|
|
808
|
+
const newLang = e.target.value;
|
|
809
|
+
|
|
810
|
+
// Update widget language if it exists
|
|
811
|
+
if (window.testWidget && window.testWidget.updateConfig) {
|
|
812
|
+
const newDirection = (newLang === 'he' || newLang === 'ar') ? 'rtl' : 'ltr';
|
|
813
|
+
window.testWidget.updateConfig({
|
|
814
|
+
language: newLang,
|
|
815
|
+
direction: newDirection
|
|
816
|
+
});
|
|
817
|
+
// Note: updateConfig already calls createWidget(), so no need to call it again
|
|
818
|
+
}
|
|
819
|
+
});
|
|
820
|
+
}
|
|
821
|
+
}
|
|
822
|
+
|
|
823
|
+
if (document.readyState === 'loading') {
|
|
824
|
+
document.addEventListener('DOMContentLoaded', initializeUI);
|
|
825
|
+
} else {
|
|
826
|
+
initializeUI();
|
|
827
|
+
}
|
|
828
|
+
|
|
829
|
+
// Toggle section collapse
|
|
830
|
+
function toggleSection(sectionId) {
|
|
831
|
+
const content = document.getElementById(sectionId + '-content');
|
|
832
|
+
const toggle = document.getElementById(sectionId + '-toggle');
|
|
833
|
+
const isHidden = content.classList.contains('hidden');
|
|
834
|
+
|
|
835
|
+
if (isHidden) {
|
|
836
|
+
content.classList.remove('hidden');
|
|
837
|
+
toggle.classList.remove('collapsed');
|
|
838
|
+
} else {
|
|
839
|
+
content.classList.add('hidden');
|
|
840
|
+
toggle.classList.add('collapsed');
|
|
841
|
+
}
|
|
842
|
+
}
|
|
843
|
+
|
|
192
844
|
// Status update function
|
|
193
845
|
function updateStatus(message, type = '') {
|
|
194
846
|
const statusEl = document.getElementById('status');
|
|
@@ -197,26 +849,33 @@
|
|
|
197
849
|
}
|
|
198
850
|
|
|
199
851
|
// Initialize the widget
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
if (typeof TTPAgentSDK === 'undefined') {
|
|
206
|
-
throw new Error('TTPAgentSDK is not defined. Check if the script loaded correctly.');
|
|
852
|
+
let widget;
|
|
853
|
+
|
|
854
|
+
function createWidget(config) {
|
|
855
|
+
if (window.testWidget) {
|
|
856
|
+
window.testWidget.destroy();
|
|
207
857
|
}
|
|
208
858
|
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
}
|
|
859
|
+
window.testWidget = new TTPAgentSDK.TextChatWidget(config);
|
|
860
|
+
widget = window.testWidget;
|
|
212
861
|
|
|
213
|
-
|
|
214
|
-
|
|
862
|
+
console.log('Widget initialized:', widget);
|
|
863
|
+
updateStatus('Widget loaded and ready ✓', 'success');
|
|
864
|
+
|
|
865
|
+
// Setup auto-apply after widget is created
|
|
866
|
+
setTimeout(() => {
|
|
867
|
+
setupAutoApply();
|
|
868
|
+
}, 100);
|
|
869
|
+
}
|
|
870
|
+
|
|
871
|
+
function getConfigFromForm() {
|
|
872
|
+
return {
|
|
215
873
|
agentId: 'agent_87c4a55a1',
|
|
216
874
|
appId: 'app_Bc01EqMQt2Euehl4qqZSi6l3FJP42Q9vJ0pC',
|
|
217
|
-
direction: '
|
|
875
|
+
direction: document.getElementById('dirSelect').value,
|
|
876
|
+
language: document.getElementById('languageSelect').value,
|
|
877
|
+
position: document.getElementById('posSelect').value,
|
|
218
878
|
|
|
219
|
-
// Optional: Pass variables for your agent/backend
|
|
220
879
|
variables: {
|
|
221
880
|
testMode: true,
|
|
222
881
|
userName: 'Test User',
|
|
@@ -224,133 +883,209 @@
|
|
|
224
883
|
connectionType: 'text_chat'
|
|
225
884
|
},
|
|
226
885
|
|
|
227
|
-
|
|
228
|
-
primaryColor: '#10B981',
|
|
229
|
-
position: 'bottom-right',
|
|
886
|
+
primaryColor: document.getElementById('buttonBgColor').value || '#7C3AED',
|
|
230
887
|
|
|
231
|
-
// Icon configuration
|
|
232
888
|
icon: {
|
|
233
|
-
type: 'chat',
|
|
234
|
-
size: '
|
|
889
|
+
type: 'chat',
|
|
890
|
+
size: document.getElementById('buttonSize').value
|
|
235
891
|
},
|
|
236
892
|
|
|
237
|
-
// Button colors
|
|
238
893
|
button: {
|
|
239
|
-
|
|
240
|
-
|
|
894
|
+
size: document.getElementById('buttonSize').value,
|
|
895
|
+
shape: document.getElementById('buttonShape').value,
|
|
896
|
+
backgroundColor: document.getElementById('buttonBgColor').value,
|
|
897
|
+
hoverColor: document.getElementById('buttonHoverColor').value
|
|
898
|
+
},
|
|
899
|
+
|
|
900
|
+
panel: {
|
|
901
|
+
width: Number(document.getElementById('panelWidth').value) || 350,
|
|
902
|
+
height: Number(document.getElementById('panelHeight').value) || 500,
|
|
903
|
+
borderRadius: Number(document.getElementById('panelBorderRadius').value) || 12,
|
|
904
|
+
backgroundColor: document.getElementById('panelBgColor').value
|
|
241
905
|
},
|
|
242
906
|
|
|
243
|
-
// Header configuration
|
|
244
907
|
header: {
|
|
245
|
-
title: '
|
|
246
|
-
|
|
247
|
-
|
|
908
|
+
title: document.getElementById('headerTitle').value,
|
|
909
|
+
showTitle: document.getElementById('headerShowTitle').value === 'true',
|
|
910
|
+
backgroundColor: document.getElementById('headerBgColor').value,
|
|
911
|
+
textColor: document.getElementById('headerTextColor').value,
|
|
912
|
+
showCloseButton: document.getElementById('headerShowClose').value === 'true'
|
|
248
913
|
},
|
|
249
914
|
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
915
|
+
tooltips: {
|
|
916
|
+
newChat: document.getElementById('tooltipNewChat').value || null,
|
|
917
|
+
back: document.getElementById('tooltipBack').value || null,
|
|
918
|
+
close: document.getElementById('tooltipClose').value || null,
|
|
919
|
+
mute: document.getElementById('tooltipMute').value || null,
|
|
920
|
+
speaker: document.getElementById('tooltipSpeaker').value || null,
|
|
921
|
+
endCall: document.getElementById('tooltipEndCall').value || null
|
|
922
|
+
},
|
|
923
|
+
|
|
924
|
+
messages: {
|
|
925
|
+
fontSize: document.getElementById('msgFontSize').value,
|
|
926
|
+
borderRadius: Number(document.getElementById('msgBorderRadius').value) || 8,
|
|
927
|
+
textColor: document.getElementById('msgTextColor').value,
|
|
928
|
+
userBackgroundColor: document.getElementById('userBgColor').value,
|
|
929
|
+
agentBackgroundColor: document.getElementById('agentBgColor').value,
|
|
930
|
+
systemBackgroundColor: document.getElementById('systemBgColor').value,
|
|
931
|
+
errorBackgroundColor: document.getElementById('errorBgColor').value
|
|
932
|
+
},
|
|
933
|
+
|
|
934
|
+
animation: {
|
|
935
|
+
enableHover: document.getElementById('animHover').value === 'true',
|
|
936
|
+
enablePulse: document.getElementById('animPulse').value === 'true',
|
|
937
|
+
enableSlide: document.getElementById('animSlide').value === 'true',
|
|
938
|
+
duration: Number(document.getElementById('animDuration').value) || 0.3
|
|
255
939
|
},
|
|
256
940
|
|
|
257
|
-
// Behavior
|
|
258
941
|
behavior: {
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
showWelcomeMessage: true,
|
|
263
|
-
welcomeMessage: '
|
|
942
|
+
mode: document.getElementById('modeSelect').value,
|
|
943
|
+
startOpen: document.getElementById('behaviorStartOpen').value === 'true',
|
|
944
|
+
hidden: document.getElementById('behaviorHidden').value === 'true',
|
|
945
|
+
showWelcomeMessage: document.getElementById('behaviorWelcome').value === 'true',
|
|
946
|
+
welcomeMessage: document.getElementById('behaviorWelcomeMsg').value
|
|
947
|
+
},
|
|
948
|
+
|
|
949
|
+
voice: {
|
|
950
|
+
avatarBackgroundColor: document.getElementById('voiceAvatarBg').value,
|
|
951
|
+
avatarActiveBackgroundColor: document.getElementById('voiceAvatarActiveBg').value,
|
|
952
|
+
statusTitleColor: document.getElementById('voiceStatusTitleColor').value,
|
|
953
|
+
statusSubtitleColor: document.getElementById('voiceStatusSubtitleColor').value,
|
|
954
|
+
startCallButtonColor: document.getElementById('voiceStartCallBtnColor').value,
|
|
955
|
+
startCallButtonTextColor: document.getElementById('voiceStartCallBtnTextColor').value,
|
|
956
|
+
transcriptBackgroundColor: document.getElementById('voiceTranscriptBg').value,
|
|
957
|
+
transcriptTextColor: document.getElementById('voiceTranscriptTextColor').value,
|
|
958
|
+
transcriptLabelColor: document.getElementById('voiceTranscriptLabelColor').value,
|
|
959
|
+
controlButtonColor: document.getElementById('voiceControlBtnColor').value,
|
|
960
|
+
controlButtonSecondaryColor: document.getElementById('voiceControlBtnSecondaryColor').value,
|
|
961
|
+
endCallButtonColor: document.getElementById('voiceEndCallBtnColor').value,
|
|
962
|
+
micButtonColor: document.getElementById('voiceMicBtnColor').value,
|
|
963
|
+
micButtonActiveColor: document.getElementById('voiceMicBtnActiveColor').value,
|
|
964
|
+
micButtonHint: {
|
|
965
|
+
text: document.getElementById('voiceMicHintText').value,
|
|
966
|
+
color: document.getElementById('voiceMicHintColor').value,
|
|
967
|
+
fontSize: document.getElementById('voiceMicHintFontSize').value
|
|
968
|
+
}
|
|
969
|
+
},
|
|
970
|
+
|
|
971
|
+
text: {
|
|
972
|
+
sendButtonColor: document.getElementById('textSendBtnColor').value,
|
|
973
|
+
sendButtonHoverColor: document.getElementById('textSendBtnHoverColor').value,
|
|
974
|
+
sendButtonActiveColor: document.getElementById('textSendBtnActiveColor').value,
|
|
975
|
+
sendButtonText: document.getElementById('textSendBtnText').value,
|
|
976
|
+
sendButtonTextColor: document.getElementById('textSendBtnTextColor').value,
|
|
977
|
+
sendButtonFontSize: document.getElementById('textSendBtnFontSize').value,
|
|
978
|
+
sendButtonFontWeight: document.getElementById('textSendBtnFontWeight').value,
|
|
979
|
+
sendButtonHint: {
|
|
980
|
+
text: document.getElementById('textSendHintText').value,
|
|
981
|
+
color: document.getElementById('textSendHintColor').value,
|
|
982
|
+
fontSize: document.getElementById('textSendHintFontSize').value
|
|
983
|
+
},
|
|
984
|
+
inputPlaceholder: document.getElementById('textInputPlaceholder').value,
|
|
985
|
+
inputBorderColor: document.getElementById('textInputBorderColor').value,
|
|
986
|
+
inputFocusColor: document.getElementById('textInputFocusColor').value,
|
|
987
|
+
inputBackgroundColor: document.getElementById('textInputBgColor').value,
|
|
988
|
+
inputTextColor: document.getElementById('textInputTextColor').value,
|
|
989
|
+
inputFontSize: document.getElementById('textInputFontSize').value,
|
|
990
|
+
inputBorderRadius: Number(document.getElementById('textInputBorderRadius').value) || 20,
|
|
991
|
+
inputPadding: document.getElementById('textInputPadding').value
|
|
992
|
+
},
|
|
993
|
+
|
|
994
|
+
landing: {
|
|
995
|
+
backgroundColor: document.getElementById('landingBgColor').value,
|
|
996
|
+
logo: document.getElementById('landingLogo').value,
|
|
997
|
+
title: document.getElementById('landingTitle').value || null,
|
|
998
|
+
titleColor: document.getElementById('landingTitleColor').value,
|
|
999
|
+
modeCardBackgroundColor: document.getElementById('landingCardBg').value,
|
|
1000
|
+
modeCardBorderColor: document.getElementById('landingCardBorder').value,
|
|
1001
|
+
modeCardHoverBorderColor: document.getElementById('landingCardHoverBorder').value,
|
|
1002
|
+
modeCardIconBackgroundColor: document.getElementById('landingCardIconBg').value,
|
|
1003
|
+
modeCardTitleColor: document.getElementById('landingCardTitleColor').value,
|
|
1004
|
+
voiceCardIcon: document.getElementById('landingVoiceIcon').value,
|
|
1005
|
+
textCardIcon: document.getElementById('landingTextIcon').value
|
|
1006
|
+
}
|
|
1007
|
+
};
|
|
1008
|
+
}
|
|
1009
|
+
|
|
1010
|
+
function applyChanges() {
|
|
1011
|
+
if (!widget) return;
|
|
1012
|
+
|
|
1013
|
+
const config = getConfigFromForm();
|
|
1014
|
+
const currentMode = widget?.config?.behavior?.mode || 'unified';
|
|
1015
|
+
const newMode = config.behavior.mode;
|
|
1016
|
+
|
|
1017
|
+
if (currentMode !== newMode) {
|
|
1018
|
+
// Mode changed - recreate widget
|
|
1019
|
+
createWidget(config);
|
|
1020
|
+
updateStatus(`Widget recreated with ${newMode} mode ✓`, 'success');
|
|
1021
|
+
} else {
|
|
1022
|
+
// Mode same - just update config
|
|
1023
|
+
widget.updateConfig(config);
|
|
1024
|
+
updateStatus('Customization applied ✓', 'success');
|
|
1025
|
+
}
|
|
1026
|
+
}
|
|
1027
|
+
|
|
1028
|
+
// Track which elements already have event listeners to avoid duplicates
|
|
1029
|
+
const elementsWithListeners = new Set();
|
|
1030
|
+
|
|
1031
|
+
// Auto-apply changes when user modifies any input
|
|
1032
|
+
function setupAutoApply() {
|
|
1033
|
+
if (!widget) return;
|
|
1034
|
+
|
|
1035
|
+
// Get all input and select elements
|
|
1036
|
+
const allInputs = document.querySelectorAll('input, select, textarea');
|
|
1037
|
+
|
|
1038
|
+
allInputs.forEach(element => {
|
|
1039
|
+
// Skip if it's the language select (handled separately)
|
|
1040
|
+
if (element.id === 'languageSelect') return;
|
|
1041
|
+
|
|
1042
|
+
// Skip if already has listener
|
|
1043
|
+
if (elementsWithListeners.has(element)) return;
|
|
1044
|
+
|
|
1045
|
+
// For text inputs - apply on every keystroke (input event) with debounce
|
|
1046
|
+
if (element.type === 'text' || element.tagName === 'TEXTAREA') {
|
|
1047
|
+
let timeout;
|
|
1048
|
+
element.addEventListener('input', function() {
|
|
1049
|
+
// Debounce for text inputs to avoid too many updates
|
|
1050
|
+
clearTimeout(timeout);
|
|
1051
|
+
timeout = setTimeout(() => {
|
|
1052
|
+
applyChanges();
|
|
1053
|
+
}, 300); // 300ms delay for text inputs
|
|
1054
|
+
});
|
|
1055
|
+
elementsWithListeners.add(element);
|
|
1056
|
+
} else {
|
|
1057
|
+
// For selects, color inputs, number inputs - apply immediately on change
|
|
1058
|
+
element.addEventListener('change', function() {
|
|
1059
|
+
applyChanges();
|
|
1060
|
+
});
|
|
1061
|
+
elementsWithListeners.add(element);
|
|
264
1062
|
}
|
|
265
1063
|
});
|
|
1064
|
+
}
|
|
1065
|
+
|
|
1066
|
+
try {
|
|
1067
|
+
console.log('Initializing text chat widget...');
|
|
1068
|
+
console.log('TTPAgentSDK available:', typeof TTPAgentSDK);
|
|
1069
|
+
console.log('TTPAgentSDK.TextChatWidget available:', typeof TTPAgentSDK?.TextChatWidget);
|
|
1070
|
+
|
|
1071
|
+
if (typeof TTPAgentSDK === 'undefined') {
|
|
1072
|
+
throw new Error('TTPAgentSDK is not defined. Check if the script loaded correctly.');
|
|
1073
|
+
}
|
|
266
1074
|
|
|
267
|
-
|
|
268
|
-
|
|
1075
|
+
if (typeof TTPAgentSDK.TextChatWidget === 'undefined') {
|
|
1076
|
+
throw new Error('TTPAgentSDK.TextChatWidget is not defined. Check the SDK build.');
|
|
1077
|
+
}
|
|
269
1078
|
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
// Live customization handlers
|
|
275
|
-
const dirSelect = document.getElementById('dirSelect');
|
|
276
|
-
const posSelect = document.getElementById('posSelect');
|
|
277
|
-
const hdrTitle = document.getElementById('hdrTitle');
|
|
278
|
-
const hdrColor = document.getElementById('hdrColor');
|
|
279
|
-
const hdrTextColor = document.getElementById('hdrTextColor');
|
|
280
|
-
const sendBtnColor = document.getElementById('sendBtnColor');
|
|
281
|
-
const placeholderInput = document.getElementById('placeholderInput');
|
|
282
|
-
const panelWidth = document.getElementById('panelWidth');
|
|
283
|
-
const panelHeight = document.getElementById('panelHeight');
|
|
284
|
-
const msgFont = document.getElementById('msgFont');
|
|
285
|
-
const agentBg = document.getElementById('agentBg');
|
|
286
|
-
const userBg = document.getElementById('userBg');
|
|
287
|
-
const hoverAnim = document.getElementById('hoverAnim');
|
|
288
|
-
|
|
289
|
-
const apply = () => {
|
|
290
|
-
const dir = dirSelect.value;
|
|
291
|
-
const pos = posSelect.value;
|
|
292
|
-
const cfg = {
|
|
293
|
-
direction: dir,
|
|
294
|
-
position: pos,
|
|
295
|
-
header: {
|
|
296
|
-
title: hdrTitle.value,
|
|
297
|
-
backgroundColor: hdrColor.value,
|
|
298
|
-
textColor: hdrTextColor.value
|
|
299
|
-
},
|
|
300
|
-
panel: {
|
|
301
|
-
width: Number(panelWidth.value) || 350,
|
|
302
|
-
height: Number(panelHeight.value) || 500,
|
|
303
|
-
inputPlaceholder: placeholderInput.value,
|
|
304
|
-
sendButtonColor: sendBtnColor.value
|
|
305
|
-
},
|
|
306
|
-
messages: {
|
|
307
|
-
fontSize: msgFont.value,
|
|
308
|
-
agentBackgroundColor: agentBg.value,
|
|
309
|
-
userBackgroundColor: userBg.value
|
|
310
|
-
},
|
|
311
|
-
animation: {
|
|
312
|
-
enableHover: hoverAnim.value === 'true'
|
|
313
|
-
}
|
|
314
|
-
};
|
|
315
|
-
window.testWidget.updateConfig(cfg);
|
|
316
|
-
updateStatus('Customization applied', 'success');
|
|
317
|
-
};
|
|
318
|
-
document.getElementById('applyBtn').onclick = apply;
|
|
1079
|
+
// Create initial widget
|
|
1080
|
+
createWidget(getConfigFromForm());
|
|
1081
|
+
|
|
1082
|
+
// Set up event handlers
|
|
319
1083
|
document.getElementById('resetBtn').onclick = () => window.location.reload();
|
|
320
1084
|
|
|
321
1085
|
} catch (error) {
|
|
322
1086
|
console.error('Failed to initialize widget:', error);
|
|
323
1087
|
updateStatus('Widget failed to load: ' + error.message, 'error');
|
|
324
1088
|
}
|
|
325
|
-
|
|
326
|
-
// Test functions
|
|
327
|
-
function testSendMessage() {
|
|
328
|
-
console.log('💬 Testing send message...');
|
|
329
|
-
if (window.testWidget) {
|
|
330
|
-
// Get input field
|
|
331
|
-
const input = document.getElementById('text-chat-input');
|
|
332
|
-
if (input) {
|
|
333
|
-
input.value = 'Hello, this is a test message!';
|
|
334
|
-
window.testWidget.sendMessage();
|
|
335
|
-
} else {
|
|
336
|
-
console.log('💬 Input field not found (panel may be closed)');
|
|
337
|
-
}
|
|
338
|
-
}
|
|
339
|
-
}
|
|
340
|
-
|
|
341
|
-
function checkWidgetState() {
|
|
342
|
-
console.log('💬 Widget state:', {
|
|
343
|
-
isActive: window.testWidget?.isActive,
|
|
344
|
-
isOpen: window.testWidget?.isOpen,
|
|
345
|
-
sdk: window.testWidget?.sdk,
|
|
346
|
-
isConnected: window.testWidget?.sdk?.isConnected
|
|
347
|
-
});
|
|
348
|
-
}
|
|
349
|
-
|
|
350
|
-
// Expose test functions globally
|
|
351
|
-
window.testSendMessage = testSendMessage;
|
|
352
|
-
window.checkWidgetState = checkWidgetState;
|
|
353
1089
|
</script>
|
|
354
1090
|
</body>
|
|
355
1091
|
</html>
|
|
356
|
-
|