pruebalol 0.0.1-security → 1.0.0
Sign up to get free protection for your applications and to get access to all the features.
Potentially problematic release.
This version of pruebalol might be problematic. Click here for more details.
- package/package.json +36 -4
- package/src/Public/Imagenes/asist.jpg +0 -0
- package/src/Public/css/estilos.css +433 -0
- package/src/Public/index.html +177 -0
- package/src/Public/js/clean_chat_mysql.js +99 -0
- package/src/Public/js/correction.js +86 -0
- package/src/Public/js/emojis.js +0 -0
- package/src/Public/js/loby.js +32 -0
- package/src/Public/js/main.js +117 -0
- package/src/Public/web components/rasa component.js +89 -0
- package/src/Public/web components/recognition component.js +172 -0
- package/src/index.js +82 -0
- package/src/sockets.js +124 -0
- package/README.md +0 -5
package/package.json
CHANGED
|
@@ -1,6 +1,38 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "pruebalol",
|
|
3
|
-
"version": "0.0
|
|
4
|
-
"
|
|
5
|
-
"
|
|
6
|
-
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"main": "src/index.js",
|
|
5
|
+
"type": "commonjs",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"dev": "nodemon src/index.js"
|
|
8
|
+
},
|
|
9
|
+
"keywords": [],
|
|
10
|
+
"author": "",
|
|
11
|
+
"license": "ISC",
|
|
12
|
+
"dependencies": {
|
|
13
|
+
"axios": "^1.3.4",
|
|
14
|
+
"cspell": "^6.30.0",
|
|
15
|
+
"esm": "^3.2.25",
|
|
16
|
+
"express": "^4.18.2",
|
|
17
|
+
"hunspell-spellchecker": "^1.0.2",
|
|
18
|
+
"mysql": "^2.18.1",
|
|
19
|
+
"natural": "^6.2.0",
|
|
20
|
+
"node-fetch": "^3.3.1",
|
|
21
|
+
"socket.io": "^4.6.1",
|
|
22
|
+
"spell": "^1.0.0",
|
|
23
|
+
"spell-checker-js": "^1.2.6",
|
|
24
|
+
"spellchecker": "^3.7.1",
|
|
25
|
+
"twit": "^2.2.11",
|
|
26
|
+
"twitter": "^1.7.1",
|
|
27
|
+
"typo-js": "^1.2.2"
|
|
28
|
+
},
|
|
29
|
+
"devDependencies": {
|
|
30
|
+
"browserify": "^17.0.0",
|
|
31
|
+
"nodemon": "^2.0.21"
|
|
32
|
+
},
|
|
33
|
+
"files": [
|
|
34
|
+
"index.js",
|
|
35
|
+
"src"
|
|
36
|
+
],
|
|
37
|
+
"description": ""
|
|
38
|
+
}
|
|
Binary file
|
|
@@ -0,0 +1,433 @@
|
|
|
1
|
+
body {
|
|
2
|
+
font-family: 'Poppins', sans-serif;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
body.dark-mode {
|
|
6
|
+
background-color: black;
|
|
7
|
+
color: white;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.dark-mode .flex-col {
|
|
11
|
+
background-color: #2d3748;
|
|
12
|
+
color: white;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
/* Estilos para el botón de cambio de modo */
|
|
16
|
+
#toggle-dark-mode {
|
|
17
|
+
color: #4A5568; /* color de texto para modo claro */
|
|
18
|
+
}
|
|
19
|
+
.dark-mode #toggle-dark-mode{
|
|
20
|
+
background-color: #4A5568;
|
|
21
|
+
color: #FFF;
|
|
22
|
+
}
|
|
23
|
+
.dark-mode #Barraa{
|
|
24
|
+
background-color: #4A5568;
|
|
25
|
+
color: #FFF;
|
|
26
|
+
}
|
|
27
|
+
.dark-mode #Lobyr{
|
|
28
|
+
color: #ffffff;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
#toggle-dark-mode:hover {
|
|
32
|
+
background-color: #999;
|
|
33
|
+
color: #FFF;
|
|
34
|
+
}
|
|
35
|
+
.dark-mode #dark-mode-text{
|
|
36
|
+
color: white;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.dark-mode #Helpme:hover{
|
|
40
|
+
background-color: #999;
|
|
41
|
+
color: #FFF;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.dark-mode #menu-button:hover{
|
|
45
|
+
background-color: #999;
|
|
46
|
+
color: #FFF;
|
|
47
|
+
}
|
|
48
|
+
.dark-mode #clear-chat:hover{
|
|
49
|
+
background-color: #999;
|
|
50
|
+
color: #FFF;
|
|
51
|
+
}
|
|
52
|
+
/* Estilos para el elemento de chat */
|
|
53
|
+
#chat {
|
|
54
|
+
padding: 12px;
|
|
55
|
+
background-color: #fff;
|
|
56
|
+
border-radius: 0px;
|
|
57
|
+
box-shadow: 0 0px 0px rgb(255, 255, 255);
|
|
58
|
+
margin-bottom: 24px;
|
|
59
|
+
max-height: 75vh;
|
|
60
|
+
}
|
|
61
|
+
.dark-mode #chat{
|
|
62
|
+
background-color: #2d3748;
|
|
63
|
+
}
|
|
64
|
+
.dark-mode #Chatbot{
|
|
65
|
+
background-color: #4A5568;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
#chat p {
|
|
69
|
+
margin: 0 0 6px;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
.highlight {
|
|
74
|
+
background-color: yellow;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.btn-record svg {
|
|
78
|
+
fill: black;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.btn-record.active svg {
|
|
82
|
+
fill: black;
|
|
83
|
+
}
|
|
84
|
+
button {
|
|
85
|
+
border: none;
|
|
86
|
+
cursor: pointer;
|
|
87
|
+
outline: none;
|
|
88
|
+
transition: all 0.3s ease;
|
|
89
|
+
padding: 0.5rem;
|
|
90
|
+
border-radius: 9999px;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
button.active {
|
|
94
|
+
background-color: transparent;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
button.active svg {
|
|
98
|
+
fill: #FFF;
|
|
99
|
+
animation: pulse 20s infinite;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
@keyframes pulse {
|
|
103
|
+
0% {
|
|
104
|
+
transform: scale(1);
|
|
105
|
+
opacity: 1;
|
|
106
|
+
}
|
|
107
|
+
50% {
|
|
108
|
+
transform: scale(1.2);
|
|
109
|
+
opacity: 0.5;
|
|
110
|
+
}
|
|
111
|
+
100% {
|
|
112
|
+
transform: scale(1);
|
|
113
|
+
opacity: 1;
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
#clear-chat {
|
|
118
|
+
color: #1A202C; /* color de texto para modo claro */
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.dark-mode #clear-chat {
|
|
122
|
+
background-color: #4A5568; /* color de fondo para modo oscuro */
|
|
123
|
+
color: #FFF; /* color de texto para modo oscuro */
|
|
124
|
+
}
|
|
125
|
+
/* Estilos para el botón de ayuda */
|
|
126
|
+
#Helpme {
|
|
127
|
+
color: #333; /* color de texto para modo claro */
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.dark-mode #Helpme {
|
|
131
|
+
background-color: #4A5568; /* color de fondo para modo oscuro */
|
|
132
|
+
color: #FFF; /* color de texto para modo oscuro */
|
|
133
|
+
}
|
|
134
|
+
/* Estilos para el botón de nueva conversación */
|
|
135
|
+
#menu-button {
|
|
136
|
+
color: #333; /* color de texto para modo claro */
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.dark-mode #modoTotal{
|
|
140
|
+
background-color: #4A5568; /* color de fondo para modo oscuro */
|
|
141
|
+
}
|
|
142
|
+
.dark-mode ::placeholder {
|
|
143
|
+
color: white;
|
|
144
|
+
}
|
|
145
|
+
.dark-mode #micro{
|
|
146
|
+
fill: rgb(59, 130, 246);
|
|
147
|
+
color: rgb(59, 130, 246);;
|
|
148
|
+
}
|
|
149
|
+
.dark-mode #micro:hover{
|
|
150
|
+
fill: rgb(0, 0, 0);
|
|
151
|
+
color:rgb(0, 0, 0);
|
|
152
|
+
}
|
|
153
|
+
.dark-mode #menu-button {
|
|
154
|
+
background-color: #4A5568; /* color de fondo para modo oscuro */
|
|
155
|
+
color: #FFF; /* color de texto para modo oscuro */
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
.btn-conversation {
|
|
159
|
+
padding: 0.5rem;
|
|
160
|
+
border: none;
|
|
161
|
+
cursor: pointer;
|
|
162
|
+
outline: none;
|
|
163
|
+
transition: all 0.3s ease;
|
|
164
|
+
border-radius: 9999px;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.btn-conversation-light {
|
|
168
|
+
color: #1f2937;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
.btn-conversation-dark {
|
|
172
|
+
background-color: #4b5563;
|
|
173
|
+
color: #f9fafb;
|
|
174
|
+
}
|
|
175
|
+
.dark-mode #Helpme:hover {
|
|
176
|
+
background-color: #999;
|
|
177
|
+
color: #FFF; /* cambiar el color del texto en hover */
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
.dark-mode #Helpme svg {
|
|
181
|
+
stroke: #fff;
|
|
182
|
+
}
|
|
183
|
+
.dark-mode #clear-chat svg {
|
|
184
|
+
stroke: #fff;
|
|
185
|
+
}
|
|
186
|
+
.dark-mode #menu-button svg {
|
|
187
|
+
stroke: #fff;
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
|
|
191
|
+
.dark-mode #menu {
|
|
192
|
+
background-color: #4b5563;
|
|
193
|
+
color: white;
|
|
194
|
+
}
|
|
195
|
+
.dark-mode #menu a {
|
|
196
|
+
color: white;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
.dark-mode #menu a:hover {
|
|
200
|
+
background-color: #999;
|
|
201
|
+
color: #FFF;
|
|
202
|
+
}
|
|
203
|
+
.dark-mode #NombreDelAs {
|
|
204
|
+
color: rgb(255, 255, 255);
|
|
205
|
+
}
|
|
206
|
+
.dark-mode #OnlineDark{
|
|
207
|
+
color: rgb(255, 255, 255);
|
|
208
|
+
}
|
|
209
|
+
.clear-chat-confirm {
|
|
210
|
+
display: none;
|
|
211
|
+
}
|
|
212
|
+
.clear-chat-confirm button:hover {
|
|
213
|
+
background-color: #4b5563;
|
|
214
|
+
color: #ffffff;
|
|
215
|
+
}
|
|
216
|
+
/*Sugerencias de ortografia*/
|
|
217
|
+
|
|
218
|
+
#message-form {
|
|
219
|
+
display: flex;
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
.input-container {
|
|
223
|
+
display: flex;
|
|
224
|
+
flex-grow: 1;
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
.button-container {
|
|
228
|
+
display: flex;
|
|
229
|
+
justify-content: flex-end;
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
#message {
|
|
233
|
+
width: 100%;
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
.suggestion-list {
|
|
237
|
+
z-index: 10;
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
.suggestion-list li {
|
|
241
|
+
padding: 5px;
|
|
242
|
+
cursor: pointer;
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
.suggestion-list li:hover {
|
|
246
|
+
background-color: #e5e7eb;
|
|
247
|
+
}
|
|
248
|
+
.dark-mode small{
|
|
249
|
+
color: #FFF
|
|
250
|
+
}
|
|
251
|
+
.dark-mode #message{
|
|
252
|
+
background-color: #4b5563;
|
|
253
|
+
}
|
|
254
|
+
.dark-mode #search-input{
|
|
255
|
+
background-color: #4b5563;
|
|
256
|
+
border-color: #4b5563;
|
|
257
|
+
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.20);
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
#voice-canvas {
|
|
261
|
+
display: none;
|
|
262
|
+
}
|
|
263
|
+
#recording-status {
|
|
264
|
+
display: flex;
|
|
265
|
+
align-items: center;
|
|
266
|
+
justify-content: center;
|
|
267
|
+
font-size: 0.9rem;
|
|
268
|
+
color: #4f4f4f;
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
#recording-status.recording {
|
|
272
|
+
color: red;
|
|
273
|
+
animation: pulse 1s infinite;
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
@keyframes pulse {
|
|
277
|
+
0% {
|
|
278
|
+
transform: scale(1);
|
|
279
|
+
}
|
|
280
|
+
50% {
|
|
281
|
+
transform: scale(1.1);
|
|
282
|
+
}
|
|
283
|
+
100% {
|
|
284
|
+
transform: scale(1);
|
|
285
|
+
}
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
.dark-mode #intro-container{
|
|
289
|
+
background-color: #4b5563;
|
|
290
|
+
}
|
|
291
|
+
.dark-mode h1{
|
|
292
|
+
color: white;
|
|
293
|
+
}
|
|
294
|
+
/* Modo oscuro */
|
|
295
|
+
.dark-mode {
|
|
296
|
+
background-color: #4b5563;
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
/* Barra de scroll */
|
|
300
|
+
.dark-mode ::-webkit-scrollbar {
|
|
301
|
+
width: 10px;
|
|
302
|
+
}
|
|
303
|
+
|
|
304
|
+
/* Color de la barra de scroll y del pulgar */
|
|
305
|
+
.dark-mode ::-webkit-scrollbar-thumb {
|
|
306
|
+
background-color: rgba(255, 255, 255, 0.2);
|
|
307
|
+
border-radius: 5px;
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
/* Color del fondo de la barra de scroll */
|
|
311
|
+
.dark-mode ::-webkit-scrollbar-track {
|
|
312
|
+
background-color: #4b5563;
|
|
313
|
+
}
|
|
314
|
+
|
|
315
|
+
/* Estilo de la barra de scroll */
|
|
316
|
+
.dark-mode ::-webkit-scrollbar-track-piece {
|
|
317
|
+
background-color: #4b5563;
|
|
318
|
+
}
|
|
319
|
+
#message {
|
|
320
|
+
flex-grow: 1;
|
|
321
|
+
padding: 0.75rem;
|
|
322
|
+
background-color: #F9FAFB;
|
|
323
|
+
border: 1px solid #D2D6DC;
|
|
324
|
+
border-radius: 0.375rem;
|
|
325
|
+
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
326
|
+
color: #4B5563;
|
|
327
|
+
font-size: 1rem;
|
|
328
|
+
line-height: 1.5rem;
|
|
329
|
+
outline: none;
|
|
330
|
+
width: 100%;
|
|
331
|
+
box-sizing: border-box;
|
|
332
|
+
}
|
|
333
|
+
|
|
334
|
+
#btnSend {
|
|
335
|
+
margin-left: -2px;
|
|
336
|
+
height: 100%;
|
|
337
|
+
position: absolute;
|
|
338
|
+
right: 43;
|
|
339
|
+
color: rgb(59, 130, 246);
|
|
340
|
+
background-color: transparent;
|
|
341
|
+
}
|
|
342
|
+
#btn2 {
|
|
343
|
+
height: 100%;
|
|
344
|
+
position: absolute;
|
|
345
|
+
right: 0;
|
|
346
|
+
background-color: transparent;
|
|
347
|
+
}
|
|
348
|
+
#btn2:hover{
|
|
349
|
+
background-color: #999;
|
|
350
|
+
}
|
|
351
|
+
|
|
352
|
+
#recording-status {
|
|
353
|
+
position: absolute;
|
|
354
|
+
top: 50%;
|
|
355
|
+
left: 50%;
|
|
356
|
+
transform: translate(-50%, -50%);
|
|
357
|
+
display: flex;
|
|
358
|
+
align-items: center;
|
|
359
|
+
justify-content: center;
|
|
360
|
+
font-size: 0.9rem;
|
|
361
|
+
color: #4f4f4f;
|
|
362
|
+
}
|
|
363
|
+
|
|
364
|
+
#recording-status.recording {
|
|
365
|
+
color: red;
|
|
366
|
+
animation: pulse 1s infinite;
|
|
367
|
+
}
|
|
368
|
+
|
|
369
|
+
@keyframes pulse {
|
|
370
|
+
0% {
|
|
371
|
+
transform: scale(1);
|
|
372
|
+
}
|
|
373
|
+
50% {
|
|
374
|
+
transform: scale(1.1);
|
|
375
|
+
}
|
|
376
|
+
100% {
|
|
377
|
+
transform: scale(1);
|
|
378
|
+
}
|
|
379
|
+
}
|
|
380
|
+
.input-container {
|
|
381
|
+
display: flex;
|
|
382
|
+
align-items: center;
|
|
383
|
+
width: 100%;
|
|
384
|
+
position: relative;
|
|
385
|
+
}
|
|
386
|
+
|
|
387
|
+
.input-container input {
|
|
388
|
+
padding-right: 120px;
|
|
389
|
+
width: 100%;
|
|
390
|
+
border: 1px solid #ccc;
|
|
391
|
+
border-radius: 5px;
|
|
392
|
+
font-size: 16px;
|
|
393
|
+
outline: none;
|
|
394
|
+
}
|
|
395
|
+
|
|
396
|
+
.input-container .button-container {
|
|
397
|
+
position: absolute;
|
|
398
|
+
top: 0;
|
|
399
|
+
right: 0;
|
|
400
|
+
display: flex;
|
|
401
|
+
height: 100%;
|
|
402
|
+
}
|
|
403
|
+
|
|
404
|
+
.input-container .button-container button {
|
|
405
|
+
height: 100%;
|
|
406
|
+
padding: 0 10px;
|
|
407
|
+
border: none;
|
|
408
|
+
background-color: #eee;
|
|
409
|
+
color: #333;
|
|
410
|
+
font-size: 16px;
|
|
411
|
+
cursor: pointer;
|
|
412
|
+
}
|
|
413
|
+
|
|
414
|
+
.input-container .button-container button.btn-send {
|
|
415
|
+
background-color: #007bff;
|
|
416
|
+
color: #fff;
|
|
417
|
+
}
|
|
418
|
+
|
|
419
|
+
|
|
420
|
+
|
|
421
|
+
.input-container .button-container button#btn2 {
|
|
422
|
+
background-color: transparent;
|
|
423
|
+
right: 0;
|
|
424
|
+
}
|
|
425
|
+
|
|
426
|
+
.input-container .button-container button#btn2:hover {
|
|
427
|
+
background-color: red;
|
|
428
|
+
}
|
|
429
|
+
|
|
430
|
+
#message-form {
|
|
431
|
+
justify-content: center;
|
|
432
|
+
align-items: center;
|
|
433
|
+
}
|
|
@@ -0,0 +1,177 @@
|
|
|
1
|
+
<html lang="en">
|
|
2
|
+
<head>
|
|
3
|
+
<meta charset="UTF-8">
|
|
4
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
6
|
+
<title>ChatBot</title>
|
|
7
|
+
<link rel="stylesheet" type="text/css" href="css/estilos.css">
|
|
8
|
+
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
|
|
9
|
+
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
|
|
10
|
+
<script src="socket.io/socket.io.js"></script>
|
|
11
|
+
<script src="js/main.js"></script>
|
|
12
|
+
</head>
|
|
13
|
+
<body class="dark bg-gray-800">
|
|
14
|
+
<section class="h-screen flex overflow-hidden">
|
|
15
|
+
<div id="con" class="bg-white p-6 flex-col flex-1 overflow-y-auto border-b border-white-20 border-black">
|
|
16
|
+
<div>
|
|
17
|
+
<div>
|
|
18
|
+
<img src="" alt="">
|
|
19
|
+
<div></div>
|
|
20
|
+
</div>
|
|
21
|
+
<div class="overflow-auto">
|
|
22
|
+
<div class="flex items-center gap-3 mb-4">
|
|
23
|
+
<img src="" alt="">
|
|
24
|
+
<button id="menu-button" class="bg-gray-100 rounded p-4 flex items-center gap-3 py-3 px-3 rounded-md hover:bg-gray-500/40 transition-colors duration-200 cursor-pointer text-sm flex-1">
|
|
25
|
+
<svg class="w-4 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
|
|
26
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
|
|
27
|
+
</svg>
|
|
28
|
+
Iniciar conversación
|
|
29
|
+
</button>
|
|
30
|
+
</div>
|
|
31
|
+
|
|
32
|
+
<div id="chats" class="flex items-center gap-3 mb-4">
|
|
33
|
+
<img src="" alt="">
|
|
34
|
+
<button id="clear-chat" class="bg-gray-100 rounded p-4 flex items-center gap-3 py-3 px-3 rounded-md hover:bg-gray-500/40 transition-colors duration-200 cursor-pointer text-sm flex-1">
|
|
35
|
+
<svg class="w-4 h-4 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
|
|
36
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"/>
|
|
37
|
+
</svg>
|
|
38
|
+
Limpiar conversación
|
|
39
|
+
</button>
|
|
40
|
+
</div>
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
<!-- dark-mode-button.html -->
|
|
44
|
+
<div id="darksmode" class="items-center gap-3 mb-4 flex">
|
|
45
|
+
<img src="" alt="">
|
|
46
|
+
<button id="toggle-dark-mode" class="dark-mode-button bg-gray-100 rounded p-4 flex items-center gap-3 py-3 px-3 rounded-md hover:bg-gray-500/10 transition-colors duration-200 cursor-pointer text-sm flex-1">
|
|
47
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="1em" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
|
|
48
|
+
<path id="sun" class="hidden" stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
|
|
49
|
+
<path id="moon" d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
|
|
50
|
+
</svg>
|
|
51
|
+
<span id="dark-mode-text" class="text-gray-900 font-medium">Modo oscuro</span>
|
|
52
|
+
</button>
|
|
53
|
+
</div>
|
|
54
|
+
<!-- dark-mode-button.html -->
|
|
55
|
+
|
|
56
|
+
<div id="helps" class="flex items-center gap-3 mb-4">
|
|
57
|
+
<img src="" alt="">
|
|
58
|
+
<button id="Helpme" class="bg-gray-100 rounded p-4 flex items-center gap-3 py-3 px-3 rounded-md hover:bg-gray-500/40 transition-colors duration-200 cursor-pointer text-sm flex-1">
|
|
59
|
+
<svg class="w-4 text-gray-500 " xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
|
|
60
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
|
|
61
|
+
</svg>
|
|
62
|
+
Ayuda
|
|
63
|
+
</button>
|
|
64
|
+
</div>
|
|
65
|
+
</div>
|
|
66
|
+
</div>
|
|
67
|
+
</div>
|
|
68
|
+
<div id="modoTotal" class="bg-gray-100 w-9/12" style="display: none;">
|
|
69
|
+
<div id="Barraa" class="px-20 py-5 ">
|
|
70
|
+
<div class="flex">
|
|
71
|
+
<div class="flex flex-grow">
|
|
72
|
+
<div class="relative w-12 mr-4">
|
|
73
|
+
<img src="Imagenes/asist.jpg" class="rounded-full h-12">
|
|
74
|
+
<div class="absolute bg-green-300 p-1 rounded-full bottom-0 right-0 border-gray-800 border-2"></div>
|
|
75
|
+
</div>
|
|
76
|
+
<div class="self-center">
|
|
77
|
+
<p id="NombreDelAs"class="font-medium ">Asistente</p>
|
|
78
|
+
<small id="OnlineDark"class="text-gray-500">Online</small>
|
|
79
|
+
</div>
|
|
80
|
+
</div>
|
|
81
|
+
<div class="flex items-center mb-4">
|
|
82
|
+
<div class="w-full md:w-12/3 relative">
|
|
83
|
+
<div class="inline-block bg-red-500 text-white py-2 px-4 rounded-tl-none rounded-full mt-2 hidden" id="no-results" style="font-size: 10px; position: absolute; left: 0; top: 25px;">
|
|
84
|
+
<span class="block">¡Sin resultados!</span>
|
|
85
|
+
</div>
|
|
86
|
+
<div class="w-full md:w-12/3">
|
|
87
|
+
<input id="search-input" type="text" class="block appearance-none w-full border border-gray-200 text-gray-700 py-1 y px-3 pr-10 rounded-tl-lg rounded-tr-lg rounded-bl rounded-br leading-tight focus:outline-none " placeholder="Buscar" style="font-size: 15px; margin-right: 40px;">
|
|
88
|
+
<div class="absolute right-0 top-0 mt-3 mr-4">
|
|
89
|
+
<svg class="fill-current pointer-events-none text-gray-600 w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.76 11.24a6.5 6.5 0 111.414-1.414l3.536 3.536a1 1 0 01-1.414 1.414l-3.536-3.536zM6.5 11.5a5 5 0 100-10 5 5 0 000 10z"/></svg>
|
|
90
|
+
</div>
|
|
91
|
+
</div>
|
|
92
|
+
</div>
|
|
93
|
+
</div>
|
|
94
|
+
<div id="message-container">
|
|
95
|
+
<!-- Tus elementos "message-text" aquí -->
|
|
96
|
+
</div>
|
|
97
|
+
</div>
|
|
98
|
+
</div>
|
|
99
|
+
|
|
100
|
+
<!--TEMPLATE DEL CHAT
|
|
101
|
+
|
|
102
|
+
-->
|
|
103
|
+
<template id="chat-template">
|
|
104
|
+
<div id = "chat" class="py-6 px-20 overflow-auto h-3/4 card-budy">
|
|
105
|
+
<div id="chat-container"></div>
|
|
106
|
+
<button id="scrollDownBtn" class="cursor-pointer absolute right-6 bottom-[124px] md:bottom-[120px] z-10 rounded-full border border-gray-200 bg-gray-50 text-gray-600 dark:border-white/10 dark:bg-white/10 dark:text-gray-200">
|
|
107
|
+
<svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 m-1" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
|
|
108
|
+
<line x1="12" y1="5" x2="12" y2="19"></line>
|
|
109
|
+
<polyline points="19 12 12 19 5 12"></polyline>
|
|
110
|
+
</svg>
|
|
111
|
+
</button>
|
|
112
|
+
</div>
|
|
113
|
+
</template>
|
|
114
|
+
|
|
115
|
+
<chat-component></chat-component>
|
|
116
|
+
<!--TEMPLATE DEL CHAt -->
|
|
117
|
+
|
|
118
|
+
|
|
119
|
+
<!--TEMPLATE DEL ENVIO DE MENSAJES
|
|
120
|
+
|
|
121
|
+
-->
|
|
122
|
+
<canvas id="voice-canvas" width="600" height="40"></canvas>
|
|
123
|
+
<div>
|
|
124
|
+
<div id="message-form" class="py-0 px-4 md:px-6 flex card-footer">
|
|
125
|
+
<div style="position: relative; flex-grow: 1;">
|
|
126
|
+
<template id="message-box-template" >
|
|
127
|
+
<link rel="stylesheet" type="text/css" href="css/estilos.css">
|
|
128
|
+
<div id="input-container">
|
|
129
|
+
<input type="text" spellcheck="true" autocomplete="on" id="message" class="px-4 py-2 bg-gray-100 focus:outline-none font-light flex-grow md:py-3 md:pl-4 relative border border-black/10 bg-white dark:border-gray-900/50 dark:text-white dark:bg-gray-700 rounded-md shadow-[0_0_10px_rgba(0,0,0,0.10)] dark:shadow-[0_0_15px_rgba(0,0,0,0.10)]" placeholder="Escribe tu mensaje...">
|
|
130
|
+
<div id="recording-status">
|
|
131
|
+
<i class="fas fa-microphone"></i>
|
|
132
|
+
</div>
|
|
133
|
+
<button id="btnSend" type="submit" class="absolute top-0 right-0 bg-blue-500 hover:bg-blue-600 focus:outline-none text-white rounded-lg px-2 dark:bg-gray-700" style="height: 100%; margin-left: -2px;">
|
|
134
|
+
<svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 mr-1" height="1.3em" width="1.3em" xmlns="http://www.w3.org/2000/svg">
|
|
135
|
+
<line x1="22" y1="2" x2="11" y2="13"></line>
|
|
136
|
+
<polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
|
|
137
|
+
</svg>
|
|
138
|
+
</button>
|
|
139
|
+
|
|
140
|
+
<button class="bg-transparent hover:bg-transparent rounded-full flex items-center justify-center btn-record" id="btn2" style="margin-left: 15px;">
|
|
141
|
+
<svg id="micro" class="w-4 md:w-6 mr-2 md:mr-4 text-black hover:text-blue-500 hover:fill-blue-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="24" height="24">
|
|
142
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M12 18.75a6 6 0 006-6v-1.5m-6 7.5a6 6 0 01-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 01-3-3V4.5a3 3 0 116 0v8.25a3 3 0 01-3 3zM8.25 10.5a.75.75 0 00-.75.75v3.75a.75.75 0 101.5 0v-3.75a.75.75 0 00-.75-.75zM15.75 10.5a.75.75 0 00-.75.75v3.75a.75.75 0 101.5 0v-3.75a.75.75 0 00-.75-.75z" />
|
|
143
|
+
</svg>
|
|
144
|
+
</button>
|
|
145
|
+
|
|
146
|
+
<div id="text"></div>
|
|
147
|
+
|
|
148
|
+
<style>
|
|
149
|
+
|
|
150
|
+
</style>
|
|
151
|
+
</div>
|
|
152
|
+
</template>
|
|
153
|
+
<message-box></message-box>
|
|
154
|
+
</div>
|
|
155
|
+
</div>
|
|
156
|
+
</div>
|
|
157
|
+
</div>
|
|
158
|
+
|
|
159
|
+
<!--TEMPLATE DEL ENVIO DE MENSAJES
|
|
160
|
+
-->
|
|
161
|
+
|
|
162
|
+
<div id="intro-container" class="bg-gray-100 w-9/12 flex h-screen">
|
|
163
|
+
<div class="text-gray-800 w-full md:max-w-2xl lg:max-w-3xl md:h-full md:flex md:flex-col px-6 dark:text-gray-100 m-auto">
|
|
164
|
+
<h1 class="text-4xl font-semibold text-center mt-6 sm:mt-[20vh] mb-10 sm:mb-16 flex gap-2 items-center justify-center">
|
|
165
|
+
''''''
|
|
166
|
+
</h1>
|
|
167
|
+
</div>
|
|
168
|
+
</div>
|
|
169
|
+
</section>
|
|
170
|
+
<script src="web components/recognition component.js"></script>
|
|
171
|
+
<script src="js/emojis.js"></script>
|
|
172
|
+
<script src="js/clean_chat_mysql.js"></script>
|
|
173
|
+
<script src="js/loby.js"></script>
|
|
174
|
+
<script src="web components/rasa component.js"></script>
|
|
175
|
+
|
|
176
|
+
</body>
|
|
177
|
+
</html>
|