Hugging Face's logo

Spaces:
redfernstech
/
voicechatbot
Sleeping

App Files Community
srinuksv commited on
Commit
9ad25d2
·
verified ·
1 Parent(s): 1a5192d

Update static/index.html

Browse files
Files changed (1) hide show
  1. static/index.html +17 -20
static/index.html CHANGED
@@ -16,24 +16,24 @@
16
  max-width: 500px;
17
  margin: auto;
18
  padding: 20px;
19
- border-radius: 30px; /* Modern rounded corners */
20
  background-color: #fff;
21
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
22
  }
23
  #chat-history {
24
- height: 330px;
25
  overflow-y: auto;
26
  margin-bottom: 10px;
27
  padding: 10px;
28
  background-color: #f9f9f9;
29
- border-radius: 20px; /* Rounded corners for chat history */
30
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
31
  }
32
  .message {
33
  position: relative;
34
  padding: 8px 12px;
35
  margin: 5px 0;
36
- border-radius: 20px; /* Rounded corners for messages */
37
  max-width: 70%;
38
  font-size: 0.85em;
39
  cursor: pointer;
@@ -85,7 +85,7 @@
85
  .timestamp {
86
  font-size: 0.75em;
87
  color: #aaa;
88
- display: none; /* Hidden by default */
89
  margin-top: 5px;
90
  }
91
  </style>
@@ -93,6 +93,7 @@
93
  </head>
94
  <body>
95
  <div id="chat-container" class="rounded p-4 shadow">
 
96
  <div id="chat-history" class="mb-3"></div>
97
  <div id="loading" class="spinner-border text-primary" role="status">
98
  <span class="sr-only">Loading...</span>
@@ -111,7 +112,6 @@
111
  </div>
112
  <script>
113
  let chatHistoryArray = [];
114
-
115
  document.getElementById("send-button").addEventListener("click", sendMessage);
116
  document.getElementById("user-input").addEventListener("keypress", function(event) {
117
  if (event.key === "Enter") {
@@ -119,23 +119,20 @@
119
  sendMessage();
120
  }
121
  });
122
-
123
  document.getElementById("close-button").addEventListener("click", closeChat);
124
-
125
  async function sendMessage() {
126
  const input = document.getElementById("user-input");
 
127
  const message = input.value.trim();
128
  if (message === "") {
129
  return;
130
  }
131
  addMessage("User", message, "user-message");
132
- chatHistoryArray.push({ sender: "User", message: message });
133
  input.value = "";
134
-
135
- // Show loading spinner
136
  document.getElementById("loading").style.display = "block";
137
  showTypingIndicator();
138
-
139
  try {
140
  const response = await fetch("/chat/", {
141
  method: "POST",
@@ -149,17 +146,16 @@
149
  }
150
  const data = await response.json();
151
  addMessage("Bot", data.response, "bot-message");
152
- chatHistoryArray.push({ sender: "Bot", message: data.response });
153
  } catch (error) {
154
  console.error('Error:', error);
155
  addMessage("Bot", "Sorry, something went wrong.", "bot-message");
156
  } finally {
157
- // Hide loading spinner
158
  document.getElementById("loading").style.display = "none";
159
  hideTypingIndicator();
160
  }
161
  }
162
-
163
  function addMessage(sender, message, className) {
164
  const chatHistory = document.getElementById("chat-history");
165
  const messageElement = document.createElement("div");
@@ -173,29 +169,30 @@
173
  chatHistory.appendChild(messageElement);
174
  chatHistory.scrollTop = chatHistory.scrollHeight;
175
  }
176
-
177
  function showTypingIndicator() {
178
  const typingElement = document.createElement("div");
179
  typingElement.className = "typing-indicator";
180
  typingElement.innerText = "Bot is typing...";
181
  document.getElementById("chat-history").appendChild(typingElement);
182
  }
183
-
184
  function hideTypingIndicator() {
185
  const typingIndicator = document.querySelector(".typing-indicator");
186
  if (typingIndicator) {
187
  typingIndicator.remove();
188
  }
189
  }
190
-
191
  async function closeChat() {
 
192
  try {
193
  await fetch("/hist/", {
194
  method: "POST",
195
  headers: {
196
  "Content-Type": "application/json"
197
  },
198
- body: JSON.stringify({ history: chatHistoryArray })
199
  });
200
  } catch (error) {
201
  console.error('Error sending chat history:', error);
@@ -205,4 +202,4 @@
205
  }
206
  </script>
207
  </body>
208
- </html>
 
16
  max-width: 500px;
17
  margin: auto;
18
  padding: 20px;
19
+ border-radius: 30px;
20
  background-color: #fff;
21
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
22
  }
23
  #chat-history {
24
+ height: 416px;
25
  overflow-y: auto;
26
  margin-bottom: 10px;
27
  padding: 10px;
28
  background-color: #f9f9f9;
29
+ border-radius: 20px;
30
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
31
  }
32
  .message {
33
  position: relative;
34
  padding: 8px 12px;
35
  margin: 5px 0;
36
+ border-radius: 20px;
37
  max-width: 70%;
38
  font-size: 0.85em;
39
  cursor: pointer;
 
85
  .timestamp {
86
  font-size: 0.75em;
87
  color: #aaa;
88
+ display: none;
89
  margin-top: 5px;
90
  }
91
  </style>
 
93
  </head>
94
  <body>
95
  <div id="chat-container" class="rounded p-4 shadow">
96
+ <input type="hidden" id="user-id" value="{{ user_id }}">
97
  <div id="chat-history" class="mb-3"></div>
98
  <div id="loading" class="spinner-border text-primary" role="status">
99
  <span class="sr-only">Loading...</span>
 
112
  </div>
113
  <script>
114
  let chatHistoryArray = [];
 
115
  document.getElementById("send-button").addEventListener("click", sendMessage);
116
  document.getElementById("user-input").addEventListener("keypress", function(event) {
117
  if (event.key === "Enter") {
 
119
  sendMessage();
120
  }
121
  });
 
122
  document.getElementById("close-button").addEventListener("click", closeChat);
123
+
124
  async function sendMessage() {
125
  const input = document.getElementById("user-input");
126
+ const userId = document.getElementById("user-id").value;
127
  const message = input.value.trim();
128
  if (message === "") {
129
  return;
130
  }
131
  addMessage("User", message, "user-message");
132
+ chatHistoryArray.push({ userId, sender: "User", message });
133
  input.value = "";
 
 
134
  document.getElementById("loading").style.display = "block";
135
  showTypingIndicator();
 
136
  try {
137
  const response = await fetch("/chat/", {
138
  method: "POST",
 
146
  }
147
  const data = await response.json();
148
  addMessage("Bot", data.response, "bot-message");
149
+ chatHistoryArray.push({ userId, sender: "Bot", message: data.response });
150
  } catch (error) {
151
  console.error('Error:', error);
152
  addMessage("Bot", "Sorry, something went wrong.", "bot-message");
153
  } finally {
 
154
  document.getElementById("loading").style.display = "none";
155
  hideTypingIndicator();
156
  }
157
  }
158
+
159
  function addMessage(sender, message, className) {
160
  const chatHistory = document.getElementById("chat-history");
161
  const messageElement = document.createElement("div");
 
169
  chatHistory.appendChild(messageElement);
170
  chatHistory.scrollTop = chatHistory.scrollHeight;
171
  }
172
+
173
  function showTypingIndicator() {
174
  const typingElement = document.createElement("div");
175
  typingElement.className = "typing-indicator";
176
  typingElement.innerText = "Bot is typing...";
177
  document.getElementById("chat-history").appendChild(typingElement);
178
  }
179
+
180
  function hideTypingIndicator() {
181
  const typingIndicator = document.querySelector(".typing-indicator");
182
  if (typingIndicator) {
183
  typingIndicator.remove();
184
  }
185
  }
186
+
187
  async function closeChat() {
188
+ const userId = document.getElementById("user-id").value;
189
  try {
190
  await fetch("/hist/", {
191
  method: "POST",
192
  headers: {
193
  "Content-Type": "application/json"
194
  },
195
+ body: JSON.stringify({ history: chatHistoryArray, userId })
196
  });
197
  } catch (error) {
198
  console.error('Error sending chat history:', error);
 
202
  }
203
  </script>
204
  </body>
205
+ </html>