-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathasistente.html
141 lines (129 loc) · 6.54 KB
/
asistente.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Component con Tailwind CSS y DaisyUI</title>
<!-- Include Tailwind CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
<!-- Include DaisyUI CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css" rel="stylesheet">
<style>
code {
background-color: #000;
color: #fff;
border-radius: 5px;
padding: 2px 4px;
font-family: 'Courier New', monospace;
}
</style>
<!-- Script para enviar una pregunta por SSE a /strean-chat -->
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
const sendQuestionBtn = document.getElementById('send-question-btn');
// const assistantAnswer = document.getElementById('assitant-answer');
const chatContainerBubbles = document.getElementById('chat-container-bubbles');
sendQuestionBtn.addEventListener('click', () => {
// enviar una pregunta por EventSource a /strean-chat
const questionInput = document.getElementById('question-input');
const question = questionInput.value;
const chatContainer = document.getElementById('chat-container');
// Crea un nuevo elemento de pregunta del usuario
const userQuestion = document.createElement('div');
userQuestion.className = 'flex mb-2 justify-end';
userQuestion.innerHTML = `
<div class="mr-2">
<div class="bg-gray-200 rounded-lg p-2">
<p class="text-sm">${question}</p>
</div>
</div>
<div class="flex-shrink-0">
<img class="h-8 w-8 rounded-full" src="https://cdn-icons-png.flaticon.com/512/4079/4079259.png" alt="Usuario">
</div>
`;
chatContainerBubbles.appendChild(userQuestion);
// Crear un nuevo elemento de respuesta del asistente
const assistantAnswer = document.createElement('div');
assistantAnswer.className = 'flex mb-2';
assistantAnswer.innerHTML = `
<div class="flex-shrink-0">
<img class="h-8 w-8 rounded-full" src="https://cdn-icons-png.flaticon.com/512/10479/10479785.png" alt="Asistente">
</div>
<div class="ml-2">
<div class="bg-blue-400 text-white rounded-lg p-2">
<p class="text-sm assistant-answer-bubble"></p>
</div>
</div>
`;
chatContainerBubbles.appendChild(assistantAnswer);
const assistantAnswerBubble = assistantAnswer.querySelector('.assistant-answer-bubble');
const roomId = '123'
const eventSource = new EventSource(`http://localhost:3000/stream-chat/${roomId}?message=${question}`);
let assistantAnswerText = '';
eventSource.addEventListener('response-chat', (event) => {
const data = decodeURIComponent(event.data).replace(/\+/g, ' '); // reemplazar los + por espacios
console.log(data);
assistantAnswerBubble.innerText += data;
chatContainer.scrollTop = chatContainer.scrollHeight;
questionInput.value = '';
questionInput.focus();
});
eventSource.addEventListener('end-chat', (event) => {
console.log('Fin del chat');
assistantAnswerBubble.innerHTML = marked.parse(assistantAnswerBubble.innerText);
eventSource.close();
});
});
});
</script>
</head>
<body>
<div class="bg-gray-200 min-h-screen flex items-center justify-center px-4 sm:px-6 lg:px-8">
<div class="bg-white rounded-lg shadow-lg p-6 mx-auto w-full sm:w-full lg:w-full">
<div class="mb-4">
<h2 class="text-2xl font-bold mb-2">Chatbot</h2>
</div>
<div id='chat-container' class="bg-gray-100 p-4 mb-4 rounded-lg overflow-y-auto max-h-full">
<div id="chat-container-bubbles" class="flex flex-col">
<div class="flex mb-2">
<div class="flex-shrink-0">
<img class="h-8 w-8 rounded-full" src="https://cdn-icons-png.flaticon.com/512/10479/10479785.png" alt="Asistente">
</div>
<div class="ml-2">
<div class="bg-blue-400 text-white rounded-lg p-2">
<p class="text-sm">Hola, en que te puedo ayudar hoy?</p>
</div>
</div>
</div>
<div class="flex mb-2 justify-end" id="user-question">
<div class="mr-2">
<div class="bg-gray-200 rounded-lg p-2">
<p class="text-sm">Pregunta del Usuario</p>
</div>
</div>
<div class="flex-shrink-0">
<img class="h-8 w-8 rounded-full" src="https://cdn-icons-png.flaticon.com/512/4079/4079259.png" alt="Usuario">
</div>
</div>
<div class="flex mb-2" id="assitant-answer">
<div class="flex-shrink-0">
<img class="h-8 w-8 rounded-full" src="https://cdn-icons-png.flaticon.com/512/10479/10479785.png" alt="Asistente">
</div>
<div class="ml-2">
<div class="bg-blue-400 text-white rounded-lg p-2">
<p class="text-sm">Respuesta del Bot</p>
</div>
</div>
</div>
<!-- Add more chat messages here -->
</div>
</div>
<div class="flex items-center">
<input id="question-input" type="text" placeholder="Ingresa tu pregunta..." class="flex-grow border border-gray-300 rounded-md py-2 px-4">
<button id="send-question-btn" class="ml-2 py-2 px-4 bg-blue-500 text-white font-semibold rounded-md">Enviar</button>
</div>
</div>
</div>
</body>
</html>