firtssocketia2 0.0.1-security → 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Potentially problematic release.
This version of firtssocketia2 might be problematic. Click here for more details.
- package/package.json +26 -3
- package/src/Public/Imagenes/asist.jpg +0 -0
- package/src/Public/css/estilos.css +433 -0
- package/src/Public/index.html +171 -0
- package/src/Public/js/clean_chat_mysql.js +94 -0
- package/src/Public/js/correction.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 +78 -0
- package/src/Public/web components/recognition component.js +168 -0
- package/src/index.js +32 -0
- package/src/sockets.js +125 -0
- package/README.md +0 -5
package/package.json
CHANGED
|
@@ -1,6 +1,29 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "firtssocketia2",
|
|
3
|
-
"version": "0.0
|
|
4
|
-
"
|
|
5
|
-
"
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"main": "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
|
+
"esm": "^3.2.25",
|
|
15
|
+
"express": "^4.18.2",
|
|
16
|
+
"mysql": "^2.18.1",
|
|
17
|
+
"natural": "^6.2.0",
|
|
18
|
+
"node-fetch": "^3.3.1",
|
|
19
|
+
"socket.io": "^4.6.1",
|
|
20
|
+
"twit": "^2.2.11",
|
|
21
|
+
"twitter": "^1.7.1",
|
|
22
|
+
"typo-js": "^1.2.2"
|
|
23
|
+
},
|
|
24
|
+
"devDependencies": {
|
|
25
|
+
"browserify": "^17.0.0",
|
|
26
|
+
"nodemon": "^2.0.21"
|
|
27
|
+
},
|
|
28
|
+
"description": ""
|
|
6
29
|
}
|
|
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,171 @@
|
|
|
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
|
+
Borrar 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..."> <div id="recording-status">
|
|
130
|
+
<i class="fas fa-microphone"></i>
|
|
131
|
+
</div>
|
|
132
|
+
<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;">
|
|
133
|
+
<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">
|
|
134
|
+
<line x1="22" y1="2" x2="11" y2="13"></line>
|
|
135
|
+
<polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
|
|
136
|
+
</svg>
|
|
137
|
+
</button>
|
|
138
|
+
|
|
139
|
+
<button class="bg-transparent hover:bg-transparent rounded-full flex items-center justify-center btn-record" id="btn2" style="margin-left: 15px;">
|
|
140
|
+
<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">
|
|
141
|
+
<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" />
|
|
142
|
+
</svg>
|
|
143
|
+
</button>
|
|
144
|
+
|
|
145
|
+
<div id="text"></div>
|
|
146
|
+
</div>
|
|
147
|
+
</template>
|
|
148
|
+
<message-box></message-box>
|
|
149
|
+
</div>
|
|
150
|
+
</div>
|
|
151
|
+
</div>
|
|
152
|
+
</div>
|
|
153
|
+
|
|
154
|
+
<!--TEMPLATE DEL ENVIO DE MENSAJES
|
|
155
|
+
-->
|
|
156
|
+
|
|
157
|
+
<div id="intro-container" class="bg-gray-100 w-9/12 flex h-screen">
|
|
158
|
+
<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">
|
|
159
|
+
<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">
|
|
160
|
+
''''''
|
|
161
|
+
</h1>
|
|
162
|
+
</div>
|
|
163
|
+
</div>
|
|
164
|
+
</section>
|
|
165
|
+
<script src="web components/recognition component.js"></script>
|
|
166
|
+
<script src="js/clean_chat_mysql.js"></script>
|
|
167
|
+
<script src="js/loby.js"></script>
|
|
168
|
+
<script src="web components/rasa component.js"></script>
|
|
169
|
+
|
|
170
|
+
</body>
|
|
171
|
+
</html>
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
const socket = io();
|
|
2
|
+
//Obteniendo los elementos del from
|
|
3
|
+
const $messageForm = $('#message-form');
|
|
4
|
+
const $messageBox = $('#message');
|
|
5
|
+
const $chat = $('#chat');
|
|
6
|
+
const $clearChatButton = $('#clear-chat');
|
|
7
|
+
const $toggleDarkModeButton = $('#toggle-dark-mode');
|
|
8
|
+
const $menuButton = $('#menu-button');
|
|
9
|
+
const $menu = $('#menu');
|
|
10
|
+
const $clearChatButtonToMove = $('#clear-chat');
|
|
11
|
+
$clearChatButton.click(function() {
|
|
12
|
+
// Eliminar atributo de datos para permitir la creación de nuevos botones de confirmación
|
|
13
|
+
$clearChatButton.removeData('confirm-buttons');
|
|
14
|
+
|
|
15
|
+
// Verificar si los botones de confirmación ya están presentes
|
|
16
|
+
if (!$clearChatButton.data('confirm-buttons')) {
|
|
17
|
+
// Eliminar botones de confirmación anteriores
|
|
18
|
+
$clearChatButton.find('.clear-chat-confirm').remove();
|
|
19
|
+
|
|
20
|
+
// Agregar botones de confirmación
|
|
21
|
+
$clearChatButton.append('<div class="clear-chat-confirm flex">' +
|
|
22
|
+
'<button id="clear-chat-yes" class="bg-transparent ml-12">' +
|
|
23
|
+
'<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block align-middle mr-2" viewBox="0 0 20 20" fill="currentColor">' +
|
|
24
|
+
'<path d="M0 11l2-2 5 5L18 3l2 2L7 18z"/>' +
|
|
25
|
+
'</svg>' +
|
|
26
|
+
'</button>' +
|
|
27
|
+
'<button id="clear-chat-no" class="bg-transparent ml-2">' +
|
|
28
|
+
'<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block align-middle mr-2" viewBox="0 0 20 20" fill="currentColor">' +
|
|
29
|
+
'<path fill-rule="evenodd" d="M10 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16zm2.12 9.88a1 1 0 1 1-1.41 1.41L10 11.41l-1.71 1.71a1 1 0 1 1-1.41-1.41L8.59 10l-1.7-1.71a1 1 0 1 1 1.41-1.41L10 8.59l1.71-1.71a1 1 0 0 1 1.41 1.41L11.41 10l1.71 1.71z" clip-rule="evenodd"/>' +
|
|
30
|
+
'</svg>' +
|
|
31
|
+
'</button>' +
|
|
32
|
+
'</div>');
|
|
33
|
+
|
|
34
|
+
// Establecer el atributo de datos para indicar que los botones ya están presentes
|
|
35
|
+
$clearChatButton.data('confirm-buttons', true);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
// Mostrar botones de confirmación y ocultar ícono
|
|
39
|
+
$clearChatButton.find('.clear-chat-confirm').show();
|
|
40
|
+
$clearChatButton.find('.clear-chat-icon').hide();
|
|
41
|
+
|
|
42
|
+
// Eliminar eventos click anteriores
|
|
43
|
+
$('#clear-chat-yes, #clear-chat-no').off('click');
|
|
44
|
+
|
|
45
|
+
// Agregar eventos a los botones de confirmación
|
|
46
|
+
$('#clear-chat-yes').click(function() {
|
|
47
|
+
$chat.empty();
|
|
48
|
+
socket.emit('clear messages');
|
|
49
|
+
// Ocultar botones de confirmación y mostrar ícono de confirmación
|
|
50
|
+
$clearChatButton.find('.clear-chat-confirm').hide();
|
|
51
|
+
$clearChatButton.find('.clear-chat-icon.success').show();
|
|
52
|
+
|
|
53
|
+
// Eliminar botones de confirmación
|
|
54
|
+
$clearChatButton.find('.clear-chat-confirm').remove();
|
|
55
|
+
});
|
|
56
|
+
|
|
57
|
+
$('#clear-chat-no').click(function() {
|
|
58
|
+
// Ocultar botones de confirmación y mostrar ícono de cancelación
|
|
59
|
+
$clearChatButton.find('.clear-chat-confirm').hide();
|
|
60
|
+
$clearChatButton.find('.clear-chat-icon.cancel').show();
|
|
61
|
+
|
|
62
|
+
// Eliminar botones de confirmación
|
|
63
|
+
$clearChatButton.find('.clear-chat-confirm').remove();
|
|
64
|
+
});
|
|
65
|
+
|
|
66
|
+
$('#clear-chat-yes').click(function() {
|
|
67
|
+
$chat.empty();
|
|
68
|
+
socket.emit('clear messages');
|
|
69
|
+
chat.innerHTML = '';
|
|
70
|
+
|
|
71
|
+
// Ocultar botones de confirmación y mostrar ícono de confirmación
|
|
72
|
+
$clearChatButton.find('.clear-chat-confirm').hide();
|
|
73
|
+
$clearChatButton.find('.clear-chat-icon.success').show();
|
|
74
|
+
|
|
75
|
+
// Esperar un segundo antes de eliminar los botones de confirmación
|
|
76
|
+
setTimeout(function() {
|
|
77
|
+
// Eliminar botones de confirmación
|
|
78
|
+
$clearChatButton.find('.clear-chat-confirm').remove();
|
|
79
|
+
}, 1000);
|
|
80
|
+
});
|
|
81
|
+
|
|
82
|
+
$('#clear-chat-no').click(function() {
|
|
83
|
+
|
|
84
|
+
// Ocultar botones de confirmación y mostrar ícono de confirmación
|
|
85
|
+
$clearChatButton.find('.clear-chat-confirm').hide();
|
|
86
|
+
$clearChatButton.find('.clear-chat-icon.success').show();
|
|
87
|
+
|
|
88
|
+
// Esperar un segundo antes de eliminar los botones de confirmación
|
|
89
|
+
setTimeout(function() {
|
|
90
|
+
// Eliminar botones de confirmación
|
|
91
|
+
$clearChatButton.find('.clear-chat-confirm').remove();
|
|
92
|
+
}, 500);
|
|
93
|
+
});
|
|
94
|
+
});
|
|
File without changes
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
// Obtener los contenedores de la introducción y del chat
|
|
2
|
+
var introContainer = document.getElementById("intro-container");
|
|
3
|
+
var chatContainer = document.getElementById("modoTotal");
|
|
4
|
+
var Helpmebtn = document.getElementById("clear-chat");
|
|
5
|
+
|
|
6
|
+
Helpmebtn.setAttribute("disabled", "");
|
|
7
|
+
|
|
8
|
+
var enChat = false;
|
|
9
|
+
|
|
10
|
+
const newConversationButton = document.getElementById("menu-button");
|
|
11
|
+
|
|
12
|
+
newConversationButton.addEventListener("click", () => {
|
|
13
|
+
if (enChat) {
|
|
14
|
+
chatContainer.style.display = "none";
|
|
15
|
+
introContainer.style.display = "block";
|
|
16
|
+
Helpmebtn.setAttribute("disabled", "");
|
|
17
|
+
newConversationButton.innerHTML = `<svg class="w-4 text-gray-500 inline-block mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
18
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
|
|
19
|
+
</svg> Iniciar conversación`;
|
|
20
|
+
enChat = false;
|
|
21
|
+
} else {
|
|
22
|
+
chatContainer.style.display = "block";
|
|
23
|
+
introContainer.style.display = "none";
|
|
24
|
+
Helpmebtn.removeAttribute("disabled");
|
|
25
|
+
newConversationButton.innerHTML = `
|
|
26
|
+
<svg id="Lobyr" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 mr-2 text-gray-500" viewBox="0 0 24 24" fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
27
|
+
<path stroke="currentColor" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
|
|
28
|
+
</svg>
|
|
29
|
+
Regresar`;
|
|
30
|
+
enChat = true;
|
|
31
|
+
}
|
|
32
|
+
});
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
$(document).ready(function() {
|
|
2
|
+
const socket = io();
|
|
3
|
+
|
|
4
|
+
const $messageForm = $('#message-form');
|
|
5
|
+
const $messageBox = $('#message');
|
|
6
|
+
const $chat = $('#chat');
|
|
7
|
+
const $clearChatButton = $('#clear-chat');
|
|
8
|
+
const $toggleDarkModeButton = $('#toggle-dark-mode');
|
|
9
|
+
const $menuButton = $('#menu-button');
|
|
10
|
+
const $menu = $('#menu');
|
|
11
|
+
const $clearChatButtonToMove = $('#clear-chat');
|
|
12
|
+
|
|
13
|
+
const sunIcon = document.getElementById("sun");
|
|
14
|
+
const moonIcon = document.getElementById("moon");
|
|
15
|
+
|
|
16
|
+
sunIcon.classList.add("hidden");
|
|
17
|
+
// Eventos
|
|
18
|
+
$('#toggle-dark-mode').click(function() {
|
|
19
|
+
$('body').toggleClass('dark-mode');
|
|
20
|
+
if ($('body').hasClass('dark-mode')) {
|
|
21
|
+
$('#dark-mode-text').text('Modo claro');
|
|
22
|
+
sunIcon.style.display = "block";
|
|
23
|
+
moonIcon.style.display = "none";
|
|
24
|
+
} else {
|
|
25
|
+
$('#dark-mode-text').text('Modo oscuro');
|
|
26
|
+
sunIcon.style.display = "none";
|
|
27
|
+
moonIcon.style.display = "block";
|
|
28
|
+
}
|
|
29
|
+
});
|
|
30
|
+
|
|
31
|
+
$menuButton.click(function() {
|
|
32
|
+
$menu.slideToggle('fast', function() {
|
|
33
|
+
const marginTop = $menu.is(':visible') ? $menu.height() + 20 : 0;
|
|
34
|
+
$clearChatButtonToMove.css('margin-top', marginTop);
|
|
35
|
+
});
|
|
36
|
+
});
|
|
37
|
+
|
|
38
|
+
$(window).resize(function() {
|
|
39
|
+
const marginTop = $menu.is(':visible') ? $menu.height() + 20 : 0;
|
|
40
|
+
$clearChatButtonToMove.css('margin-top', marginTop);
|
|
41
|
+
});
|
|
42
|
+
|
|
43
|
+
socket.on('clear messages', function() {
|
|
44
|
+
$chat.empty();
|
|
45
|
+
})
|
|
46
|
+
|
|
47
|
+
const scrollDownBtn = document.getElementById('scrollDownBtn');
|
|
48
|
+
const chatContainer = document.getElementById('chat');
|
|
49
|
+
|
|
50
|
+
scrollDownBtn.addEventListener('click', () => {
|
|
51
|
+
chatContainer.scrollTo({ top: chatContainer.scrollHeight, behavior: 'smooth' });
|
|
52
|
+
checkScrollPosition();
|
|
53
|
+
});
|
|
54
|
+
|
|
55
|
+
function checkScrollPosition() {
|
|
56
|
+
const isAtBottom = chatContainer.scrollTop === (chatContainer.scrollHeight - chatContainer.clientHeight);
|
|
57
|
+
if (isAtBottom) {
|
|
58
|
+
scrollDownBtn.style.display = 'none';
|
|
59
|
+
} else {
|
|
60
|
+
scrollDownBtn.style.display = 'block';
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
chatContainer.addEventListener('scroll', () => {
|
|
64
|
+
checkScrollPosition();
|
|
65
|
+
});
|
|
66
|
+
|
|
67
|
+
|
|
68
|
+
//
|
|
69
|
+
////
|
|
70
|
+
////WEB COMPONENT DEL FILTRO DE BUSQUEDA DE CONVERSACIÓN
|
|
71
|
+
////
|
|
72
|
+
//
|
|
73
|
+
|
|
74
|
+
//BUSQUEDA DE CONVERSACIÓN
|
|
75
|
+
const searchInput = document.getElementById('search-input');
|
|
76
|
+
const messages = document.getElementsByClassName('message-text');
|
|
77
|
+
const messageContainer = document.getElementById('message-container');
|
|
78
|
+
const originalMessages = Array.from(messages);
|
|
79
|
+
const noResultsMessage = document.getElementById('no-results');
|
|
80
|
+
|
|
81
|
+
searchInput.addEventListener('input', function() {
|
|
82
|
+
const searchTerm = searchInput.value.toLowerCase();
|
|
83
|
+
let hasResults = false;
|
|
84
|
+
|
|
85
|
+
for (let i = 0; i < messages.length; i++) {
|
|
86
|
+
const messageText = messages[i].textContent.toLowerCase();
|
|
87
|
+
|
|
88
|
+
if (messageText.includes(searchTerm)) {
|
|
89
|
+
messages[i].classList.remove('hidden');
|
|
90
|
+
hasResults = true;
|
|
91
|
+
} else {
|
|
92
|
+
messages[i].classList.add('hidden');
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
if (!hasResults) {
|
|
97
|
+
noResultsMessage.classList.remove('hidden');
|
|
98
|
+
} else {
|
|
99
|
+
noResultsMessage.classList.add('hidden');
|
|
100
|
+
}
|
|
101
|
+
});
|
|
102
|
+
searchInput.addEventListener('keyup', function(event) {
|
|
103
|
+
if (event.keyCode === 27 || event.code === 'Escape') {
|
|
104
|
+
searchInput.value = '';
|
|
105
|
+
for (let i = 0; i < originalMessages.length; i++) {
|
|
106
|
+
originalMessages[i].classList.remove('hidden');
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
noResultsMessage.classList.add('hidden');
|
|
110
|
+
}
|
|
111
|
+
});
|
|
112
|
+
//
|
|
113
|
+
////
|
|
114
|
+
////WEB COMPONENT DEL FILTRO DE BUSQUEDA DE CONVERSACIÓN
|
|
115
|
+
////
|
|
116
|
+
//
|
|
117
|
+
});
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
/*socket.on('new message', function(data) {
|
|
2
|
+
const now = new Date();
|
|
3
|
+
const time = now.getHours() + ':' + (now.getMinutes() < 10 ? '0' : '') + now.getMinutes();
|
|
4
|
+
|
|
5
|
+
$chat.append('<div class="flex flex-col message-text">' +
|
|
6
|
+
'<div class="bg-blue-500 p-6 w-96 rounded-3xl rounded-br-none self-end">' +
|
|
7
|
+
'<small class="text-white rounded font-light">' + data.message + '</small>' +
|
|
8
|
+
'</div>' +
|
|
9
|
+
'<small class="text-gray-500 font-light self-end">' + time + '</small>' +
|
|
10
|
+
'</div>' +
|
|
11
|
+
'<div class="flex flex-col message-text">' +
|
|
12
|
+
'<div id="Chatbot" class="bg-gray-200 p-6 w-96 rounded-3xl rounded-bl-none self-start">' +
|
|
13
|
+
'<small class="text-gray-600 rounded font-light">' + data.response + '</small>' +
|
|
14
|
+
'</div>' +
|
|
15
|
+
'<small class="text-gray-500 font-light self-start">' + time + '</small>' +
|
|
16
|
+
'</div>'
|
|
17
|
+
);
|
|
18
|
+
});*/
|
|
19
|
+
|
|
20
|
+
class ChatComponent extends HTMLElement {
|
|
21
|
+
constructor() {
|
|
22
|
+
super();
|
|
23
|
+
|
|
24
|
+
const template = document.querySelector('#chat-template');
|
|
25
|
+
const content = template.content.cloneNode(true);
|
|
26
|
+
this.appendChild(content);
|
|
27
|
+
|
|
28
|
+
const chatContainer = this.querySelector('#chat-container');
|
|
29
|
+
const scrollDownButton = this.querySelector('#scrollDownBtn');
|
|
30
|
+
|
|
31
|
+
scrollDownButton.addEventListener('click', () => {
|
|
32
|
+
chatContainer.scrollTop = chatContainer.scrollHeight;
|
|
33
|
+
});
|
|
34
|
+
|
|
35
|
+
// Listen for new messages and add them to the chat
|
|
36
|
+
socket.on('new message', function(data) {
|
|
37
|
+
const now = new Date();
|
|
38
|
+
const time = now.getHours() + ':' + (now.getMinutes() < 10 ? '0' : '') + now.getMinutes();
|
|
39
|
+
|
|
40
|
+
const messageContainer = document.createElement('div');
|
|
41
|
+
messageContainer.classList.add('flex', 'flex-col', 'message-text');
|
|
42
|
+
|
|
43
|
+
const userMessage = document.createElement('div');
|
|
44
|
+
userMessage.classList.add('bg-blue-500', 'p-6', 'w-96', 'rounded-3xl', 'rounded-br-none', 'self-end');
|
|
45
|
+
userMessage.innerHTML = `
|
|
46
|
+
<small class="text-white rounded font-light">${data.message}</small>
|
|
47
|
+
`;
|
|
48
|
+
|
|
49
|
+
const userMessageTime = document.createElement('small');
|
|
50
|
+
userMessageTime.classList.add('text-gray-500', 'font-light', 'self-end');
|
|
51
|
+
userMessageTime.textContent = time;
|
|
52
|
+
|
|
53
|
+
const botMessage = document.createElement('div');
|
|
54
|
+
botMessage.classList.add('bg-gray-200', 'p-6', 'w-96', 'rounded-3xl', 'rounded-bl-none', 'self-start');
|
|
55
|
+
botMessage.innerHTML = `
|
|
56
|
+
<small class="text-gray-600 rounded font-light">${data.response}</small>
|
|
57
|
+
`;
|
|
58
|
+
|
|
59
|
+
const botMessageTime = document.createElement('small');
|
|
60
|
+
botMessageTime.classList.add('text-gray-500', 'font-light', 'self-start');
|
|
61
|
+
botMessageTime.textContent = time;
|
|
62
|
+
|
|
63
|
+
messageContainer.appendChild(userMessage);
|
|
64
|
+
messageContainer.appendChild(userMessageTime);
|
|
65
|
+
|
|
66
|
+
if (data.response) {
|
|
67
|
+
messageContainer.appendChild(botMessage);
|
|
68
|
+
messageContainer.appendChild(botMessageTime);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
chatContainer.appendChild(messageContainer);
|
|
72
|
+
chatContainer.scrollTop = chatContainer.scrollHeight;
|
|
73
|
+
});
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
customElements.define('chat-component', ChatComponent);
|
|
78
|
+
|
|
@@ -0,0 +1,168 @@
|
|
|
1
|
+
//
|
|
2
|
+
////
|
|
3
|
+
////WEB COMPONENT DEL envio de mensajes
|
|
4
|
+
////
|
|
5
|
+
//
|
|
6
|
+
document.addEventListener('DOMContentLoaded', function() {
|
|
7
|
+
$(document).ready(function() {
|
|
8
|
+
class MessageBox extends HTMLElement {
|
|
9
|
+
constructor() {
|
|
10
|
+
super();
|
|
11
|
+
const template = document.getElementById('message-box-template');
|
|
12
|
+
const content = template.content.cloneNode(true);
|
|
13
|
+
this.attachShadow({ mode: 'open' }).appendChild(content);
|
|
14
|
+
this.messageInput = this.shadowRoot.querySelector('#message');
|
|
15
|
+
this.messageForm = this.shadowRoot.querySelector('#message-form');
|
|
16
|
+
this.messageBoxKeyPress = this.messageBoxKeyPress.bind(this);
|
|
17
|
+
this.messageFormSubmit = this.messageFormSubmit.bind(this);
|
|
18
|
+
this.btnSend = this.shadowRoot.querySelector('#btnSend');
|
|
19
|
+
this.btnSend.addEventListener('click', this.messageFormSubmit);
|
|
20
|
+
|
|
21
|
+
const recognition = new webkitSpeechRecognition();
|
|
22
|
+
recognition.lang = 'es-ES';
|
|
23
|
+
recognition.continuous = true;
|
|
24
|
+
recognition.interimResults = false;
|
|
25
|
+
|
|
26
|
+
const btnStartStopRecord = this.shadowRoot.getElementById('btn2');
|
|
27
|
+
const recognitionText = this.shadowRoot.getElementById('recognition');
|
|
28
|
+
const recordingStatus = this.shadowRoot.getElementById('recording-status');
|
|
29
|
+
const microIcon = this.shadowRoot.getElementById('micro');
|
|
30
|
+
const pauseIcon = this.shadowRoot.getElementById('pause');
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
let isRecording = false;
|
|
34
|
+
let recognizedMessage = '';
|
|
35
|
+
|
|
36
|
+
recognition.onstart = () => {
|
|
37
|
+
// Comprobar si los elementos están presentes antes de acceder a sus propiedades
|
|
38
|
+
if (recordingStatus && microIcon && pauseIcon) {
|
|
39
|
+
// Crear el contexto de audio
|
|
40
|
+
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
|
|
41
|
+
|
|
42
|
+
// Crear el nodo oscilador
|
|
43
|
+
const oscillator = audioCtx.createOscillator();
|
|
44
|
+
oscillator.type = 'sine'; // Cambiar el tipo de onda
|
|
45
|
+
oscillator.frequency.value = 600; // Cambiar la frecuencia
|
|
46
|
+
|
|
47
|
+
// Conectar el nodo oscilador a la salida de audio
|
|
48
|
+
oscillator.connect(audioCtx.destination);
|
|
49
|
+
|
|
50
|
+
// Iniciar la oscilación
|
|
51
|
+
oscillator.start();
|
|
52
|
+
|
|
53
|
+
// Detener la oscilación después de 1 segundo
|
|
54
|
+
setTimeout(() => {
|
|
55
|
+
oscillator.stop();
|
|
56
|
+
}, 200);
|
|
57
|
+
|
|
58
|
+
// Resto del código de inicio de grabación
|
|
59
|
+
this.messageInput.style.display = 'none';
|
|
60
|
+
recordingStatus.classList.add('recording');
|
|
61
|
+
recordingStatus.innerText = 'Grabando...';
|
|
62
|
+
microIcon.classList.add('hidden');
|
|
63
|
+
pauseIcon.classList.remove('hidden');
|
|
64
|
+
}
|
|
65
|
+
new Notification('Grabación iniciada', {
|
|
66
|
+
body: 'Comenzó la grabación de voz.'
|
|
67
|
+
});
|
|
68
|
+
};
|
|
69
|
+
|
|
70
|
+
recognition.onresult = (event) => {
|
|
71
|
+
const results = event.results;
|
|
72
|
+
const frase = results[results.length - 1][0].transcript;
|
|
73
|
+
this.messageInput.value += frase;
|
|
74
|
+
recognizedMessage += frase;
|
|
75
|
+
};
|
|
76
|
+
|
|
77
|
+
recognition.onend = () => {
|
|
78
|
+
// Comprobar si los elementos están presentes antes de acceder a sus propiedades
|
|
79
|
+
if (recordingStatus && microIcon && pauseIcon) {
|
|
80
|
+
// Mostrar el cuadro de texto y ocultar la animació
|
|
81
|
+
this.messageInput.style.display = 'block';
|
|
82
|
+
recordingStatus.classList.remove('recording');
|
|
83
|
+
recordingStatus.innerText = '';
|
|
84
|
+
microIcon.classList.remove('hidden');
|
|
85
|
+
pauseIcon.classList.add('hidden');
|
|
86
|
+
};
|
|
87
|
+
new Notification('Grabación finalizada', {
|
|
88
|
+
body: 'Se detuvo la grabación de voz.'
|
|
89
|
+
});
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
btnStartStopRecord.addEventListener('click', () => {
|
|
93
|
+
if (!isRecording) {
|
|
94
|
+
recognition.start();
|
|
95
|
+
isRecording = true;
|
|
96
|
+
btnStartStopRecord.classList.add('active');
|
|
97
|
+
} else {
|
|
98
|
+
if (isRecording) {
|
|
99
|
+
recognition.stop();
|
|
100
|
+
isRecording = false;
|
|
101
|
+
btnStartStopRecord.classList.remove('active');
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
});
|
|
105
|
+
|
|
106
|
+
this.messageInput.addEventListener('input', function() {
|
|
107
|
+
const regex = /[\u{1F300}-\u{1F5FF}\u{1F900}-\u{1F9FF}\u{2600}-\u{26FF}\u{2700}-\u{27BF}\u{1F600}-\u{1F64F}\u{1F680}-\u{1F6FF}]/gu;
|
|
108
|
+
if (regex.test(this.value)) {
|
|
109
|
+
this.value = this.value.replace(regex, '');
|
|
110
|
+
try {
|
|
111
|
+
const notification = new Notification('ADVERTENCIA!', {
|
|
112
|
+
body: 'No se permiten emoticones en el mensaje'
|
|
113
|
+
});
|
|
114
|
+
} catch (err) {
|
|
115
|
+
console.log('No se pudo mostrar la notificación:', err);
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
} else {
|
|
119
|
+
|
|
120
|
+
}
|
|
121
|
+
});
|
|
122
|
+
|
|
123
|
+
this.messageForm.addEventListener('submit', function(event) {
|
|
124
|
+
const regex = /[\u{1F300}-\u{1F5FF}\u{1F900}-\u{1F9FF}\u{2600}-\u{26FF}\u{2700}-\u{27BF}\u{1F600}-\u{1F64F}\u{1F680}-\u{1F6FF}]/gu;
|
|
125
|
+
if (regex.test(this.messageInput.value)) {
|
|
126
|
+
event.preventDefault();
|
|
127
|
+
try {
|
|
128
|
+
const notification = new Notification('Error', {
|
|
129
|
+
body: 'No se permiten emoticones en el mensaje'
|
|
130
|
+
});
|
|
131
|
+
} catch (err) {
|
|
132
|
+
console.log('No se pudo mostrar la notificación:', err);
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
});
|
|
136
|
+
|
|
137
|
+
}
|
|
138
|
+
connectedCallback() {
|
|
139
|
+
this.messageInput = document.querySelector('#message');
|
|
140
|
+
this.messageInput.addEventListener('keypress', this.messageBoxKeyPress.bind(this));
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
messageBoxKeyPress(event) {
|
|
144
|
+
if (event.keyCode === 13) {
|
|
145
|
+
event.preventDefault();
|
|
146
|
+
this.messageFormSubmit(event);
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
messageFormSubmit(event) {
|
|
151
|
+
event.preventDefault();
|
|
152
|
+
const message = this.messageInput.value.trim();
|
|
153
|
+
if (message !== '') {
|
|
154
|
+
socket.emit('Send message', message);
|
|
155
|
+
this.messageInput.value = '';
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
customElements.define('message-box', MessageBox);
|
|
161
|
+
//
|
|
162
|
+
////
|
|
163
|
+
////WEB COMPONENT FIN
|
|
164
|
+
////
|
|
165
|
+
//
|
|
166
|
+
// Código para crear la clase MessageBox y registrarla como un elemento personalizado.
|
|
167
|
+
});
|
|
168
|
+
});
|
package/src/index.js
ADDED
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
const express = require('express');
|
|
2
|
+
const app = express();
|
|
3
|
+
const http = require('http');
|
|
4
|
+
const path = require('path');
|
|
5
|
+
const server = http.createServer(app);
|
|
6
|
+
const socketio = require('socket.io');
|
|
7
|
+
const io = socketio(server);
|
|
8
|
+
const bodyParser = require('body-parser');
|
|
9
|
+
const Typo = require('typo-js');
|
|
10
|
+
|
|
11
|
+
app.use(bodyParser.json());
|
|
12
|
+
|
|
13
|
+
const dictionary = new Typo('en_US');
|
|
14
|
+
|
|
15
|
+
app.post('/check-spelling', (req, res) => {
|
|
16
|
+
const message = req.body.message;
|
|
17
|
+
const words = message.split(' ');
|
|
18
|
+
const misspelledWords = words.filter((word) => !dictionary.check(word));
|
|
19
|
+
const suggestions = misspelledWords.map((word) => dictionary.suggest(word)[0]);
|
|
20
|
+
res.json(suggestions);
|
|
21
|
+
});
|
|
22
|
+
|
|
23
|
+
require = require("esm")(module)
|
|
24
|
+
app.set('port', process.env.PORT||3000);
|
|
25
|
+
|
|
26
|
+
const sockets = require('./sockets');
|
|
27
|
+
sockets(io);
|
|
28
|
+
app.use(express.static(path.join(__dirname, 'Public')));
|
|
29
|
+
|
|
30
|
+
server.listen(app.get('port'), ()=>{
|
|
31
|
+
console.log('server on port', app.get('port'))
|
|
32
|
+
});
|
package/src/sockets.js
ADDED
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
/*const mysql = require('mysql');
|
|
2
|
+
|
|
3
|
+
const connectionB = mysql.createConnection({
|
|
4
|
+
host: 'localhost',
|
|
5
|
+
user: 'root',
|
|
6
|
+
password: '',
|
|
7
|
+
database: 'chat'
|
|
8
|
+
});
|
|
9
|
+
|
|
10
|
+
connectionB.connect(function(err) {
|
|
11
|
+
if (err) {
|
|
12
|
+
console.error('Error al conectarse a la base de datos: ' + err.stack);
|
|
13
|
+
return;
|
|
14
|
+
}
|
|
15
|
+
console.log('Conectado a la base de datos como el ID ' + connectionB.threadId);
|
|
16
|
+
});
|
|
17
|
+
|
|
18
|
+
module.exports = function(io) {
|
|
19
|
+
io.on('connection', (socket) => {
|
|
20
|
+
console.log('Un usuario se ha conectado');
|
|
21
|
+
connectionB.query('SELECT * FROM messages ORDER BY msg_id ASC', function(error, results, fields) {
|
|
22
|
+
if (error) throw error;
|
|
23
|
+
results.forEach(function(result) {
|
|
24
|
+
socket.emit('new message', { message: result.msg, response: result.bots });
|
|
25
|
+
});
|
|
26
|
+
});
|
|
27
|
+
|
|
28
|
+
socket.on('Send message', function(data) {
|
|
29
|
+
const https = require('https');
|
|
30
|
+
const options = {
|
|
31
|
+
hostname: '25a0-200-24-154-53.ngrok.io/',
|
|
32
|
+
port: 443,
|
|
33
|
+
path: '/webhooks/rest/webhook',
|
|
34
|
+
method: 'POST',
|
|
35
|
+
headers: { 'Content-Type': 'application/json' }
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
const req = https.request(options, (res) => {
|
|
39
|
+
let responseBody = '';
|
|
40
|
+
res.on('data', (chunk) => {
|
|
41
|
+
responseBody += chunk;
|
|
42
|
+
});
|
|
43
|
+
res.on('end', () => {
|
|
44
|
+
try {
|
|
45
|
+
const response = JSON.parse(responseBody);
|
|
46
|
+
const responseData = response[0].text;
|
|
47
|
+
io.emit('new message', { message: data, response: responseData });
|
|
48
|
+
const cleanMsg = responseData.replace(/\p{Emoji}/gu, '');
|
|
49
|
+
connectionB.query('INSERT INTO messages (incoming_msg_id, outgoing_msg_id, msg, bots) VALUES (?, ?, ?, ?)', [2, 3, data, cleanMsg], function(error, results, fields) {
|
|
50
|
+
if (error) throw error;
|
|
51
|
+
console.log('Mensaje insertado correctamente!');
|
|
52
|
+
});
|
|
53
|
+
} catch (error) {
|
|
54
|
+
console.error(error);
|
|
55
|
+
}
|
|
56
|
+
});
|
|
57
|
+
});
|
|
58
|
+
|
|
59
|
+
req.on('error', (error) => {
|
|
60
|
+
console.error(error);
|
|
61
|
+
});
|
|
62
|
+
|
|
63
|
+
req.write(JSON.stringify({ message: data }));
|
|
64
|
+
req.end();
|
|
65
|
+
});
|
|
66
|
+
socket.on('clear messages', function() {
|
|
67
|
+
try {
|
|
68
|
+
connectionB.query('DELETE FROM messages', function(error, results, fields) {
|
|
69
|
+
if (error) throw error;
|
|
70
|
+
console.log('Mensajes eliminados correctamente!');
|
|
71
|
+
socket.emit('clear chat');
|
|
72
|
+
});
|
|
73
|
+
} catch (error) {
|
|
74
|
+
console.log('Error al eliminar mensajes:', error);
|
|
75
|
+
}
|
|
76
|
+
});
|
|
77
|
+
});
|
|
78
|
+
};*/
|
|
79
|
+
module.exports = function(io) {
|
|
80
|
+
io.on('connection', (socket) => {
|
|
81
|
+
console.log('Un usuario se ha conectado');
|
|
82
|
+
|
|
83
|
+
socket.on('Send message', function(data) {
|
|
84
|
+
io.emit('new message', { message: data });
|
|
85
|
+
const https = require('https');
|
|
86
|
+
const options = {
|
|
87
|
+
hostname: '25a0-200-24-154-53.ngrok.io/',
|
|
88
|
+
port: 443,
|
|
89
|
+
path: '/webhooks/rest/webhook',
|
|
90
|
+
method: 'POST',
|
|
91
|
+
headers: { 'Content-Type': 'application/json' }
|
|
92
|
+
};
|
|
93
|
+
|
|
94
|
+
const req = https.request(options, (res) => {
|
|
95
|
+
let responseBody = '';
|
|
96
|
+
res.on('data', (chunk) => {
|
|
97
|
+
responseBody += chunk;
|
|
98
|
+
});
|
|
99
|
+
res.on('end', () => {
|
|
100
|
+
try {
|
|
101
|
+
const response = JSON.parse(responseBody);
|
|
102
|
+
const responseData = response[0].text;
|
|
103
|
+
io.emit('new message', { message: responseData });
|
|
104
|
+
const cleanMsg = responseData.replace(/\p{Emoji}/gu, '');
|
|
105
|
+
console.log('Mensaje insertado correctamente!');
|
|
106
|
+
} catch (error) {
|
|
107
|
+
console.error(error);
|
|
108
|
+
}
|
|
109
|
+
});
|
|
110
|
+
});
|
|
111
|
+
|
|
112
|
+
req.on('error', (error) => {
|
|
113
|
+
console.error(error);
|
|
114
|
+
});
|
|
115
|
+
|
|
116
|
+
req.write(JSON.stringify({ message: data }));
|
|
117
|
+
req.end();
|
|
118
|
+
});
|
|
119
|
+
|
|
120
|
+
socket.on('clear messages', function() {
|
|
121
|
+
console.log('Mensajes eliminados correctamente!');
|
|
122
|
+
socket.emit('clear chat');
|
|
123
|
+
});
|
|
124
|
+
});
|
|
125
|
+
};
|
package/README.md
DELETED
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
# Security holding package
|
|
2
|
-
|
|
3
|
-
This package contained malicious code and was removed from the registry by the npm security team. A placeholder was published to ensure users are not affected in the future.
|
|
4
|
-
|
|
5
|
-
Please refer to www.npmjs.com/advisories?search=firtssocketia2 for more information.
|