Hugging Face's logo

Spaces:
triflix
/
openchat
Running

App Files Community
triflix commited on
Commit
199f620
·
verified ·
1 Parent(s): 274fa58

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +84 -17
templates/index.html CHANGED
@@ -3,7 +3,7 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Global Chatbot</title>
7
  <!-- Bootstrap CSS -->
8
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
9
  <!-- Custom CSS -->
@@ -14,34 +14,101 @@
14
  <div class="container mt-4">
15
  <div class="card">
16
  <div class="card-header text-center bg-primary text-white">
17
- <h3>Global Chatbot</h3>
18
- <small>All visitors share this conversation</small>
19
  </div>
20
  <div class="card-body chat-box" id="chat-box">
21
- <!-- Chat messages will be rendered here by Jinja2 -->
22
- {% for entry in chat_history %}
23
- <div class="message-container {% if entry.sender == 'You' %}user-message{% else %}bot-message{% endif %}">
24
- <div class="message-bubble">
25
- <strong>{{ entry.sender }}:</strong> {{ entry.message }}
26
- </div>
27
- </div>
28
- {% endfor %}
29
  </div>
30
  <div class="card-footer">
31
- <form action="/chat" method="post" class="d-flex">
32
- <input type="text" name="message" class="form-control" placeholder="Type your message..." required autofocus>
33
  <button type="submit" class="btn btn-primary ms-2">Send</button>
34
  </form>
35
  </div>
36
  </div>
37
  </div>
38
 
39
- <!-- JavaScript to auto-scroll to the bottom -->
 
 
 
40
  <script>
41
- window.onload = function() {
42
- var chatBox = document.getElementById("chat-box");
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
43
  chatBox.scrollTop = chatBox.scrollHeight;
44
- };
45
  </script>
46
  </body>
47
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Real-Time Global Chat</title>
7
  <!-- Bootstrap CSS -->
8
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
9
  <!-- Custom CSS -->
 
14
  <div class="container mt-4">
15
  <div class="card">
16
  <div class="card-header text-center bg-primary text-white">
17
+ <h3>Real-Time Global Chat</h3>
18
+ <small id="user-id-display">Connecting...</small>
19
  </div>
20
  <div class="card-body chat-box" id="chat-box">
21
+ <!-- Messages will be dynamically inserted here -->
 
 
 
 
 
 
 
22
  </div>
23
  <div class="card-footer">
24
+ <form id="chat-form" class="d-flex">
25
+ <input type="text" id="message-input" class="form-control" placeholder="Type your message..." required autocomplete="off">
26
  <button type="submit" class="btn btn-primary ms-2">Send</button>
27
  </form>
28
  </div>
29
  </div>
30
  </div>
31
 
32
+ <!-- Socket.IO Client Library -->
33
+ <script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
34
+
35
+ <!-- Custom Client-Side Logic -->
36
  <script>
37
+ const chatBox = document.getElementById('chat-box');
38
+ const chatForm = document.getElementById('chat-form');
39
+ const messageInput = document.getElementById('message-input');
40
+ const userIdDisplay = document.getElementById('user-id-display');
41
+
42
+ let currentUserId = '';
43
+
44
+ // Establishes a WebSocket connection
45
+ const socket = io();
46
+
47
+ // --- Event Listeners from Server ---
48
+
49
+ // Fired once on connection to load history and set user ID
50
+ socket.on('load_history', (data) => {
51
+ currentUserId = data.user_id;
52
+ userIdDisplay.textContent = `Your ID: ${currentUserId}`;
53
+
54
+ chatBox.innerHTML = ''; // Clear the chatbox first
55
+ data.history.forEach(message => {
56
+ addMessageToChat(message);
57
+ });
58
+ scrollToBottom();
59
+ messageInput.focus();
60
+ });
61
+
62
+ // Fired whenever a new message is broadcasted
63
+ socket.on('new_message', (message) => {
64
+ addMessageToChat(message);
65
+ scrollToBottom();
66
+ });
67
+
68
+ // --- Event Emitters to Server ---
69
+
70
+ // Handle form submission to send a message
71
+ chatForm.addEventListener('submit', (e) => {
72
+ e.preventDefault();
73
+ const message = messageInput.value;
74
+ if (message.trim()) {
75
+ socket.emit('chat_message', { message: message });
76
+ messageInput.value = ''; // Clear the input field
77
+ }
78
+ });
79
+
80
+ // --- Helper Functions ---
81
+
82
+ // Function to create and append a message bubble to the chat box
83
+ function addMessageToChat(message) {
84
+ const messageContainer = document.createElement('div');
85
+ messageContainer.classList.add('message-container');
86
+
87
+ // Align message left or right based on the sender
88
+ if (message.sender === currentUserId) {
89
+ messageContainer.classList.add('my-message');
90
+ } else {
91
+ messageContainer.classList.add('other-message');
92
+ }
93
+
94
+ const messageBubble = document.createElement('div');
95
+ messageBubble.classList.add('message-bubble');
96
+
97
+ const sender = document.createElement('strong');
98
+ sender.textContent = message.sender;
99
+
100
+ const content = document.createTextNode(`: ${message.message}`);
101
+
102
+ messageBubble.appendChild(sender);
103
+ messageBubble.appendChild(content);
104
+ messageContainer.appendChild(messageBubble);
105
+ chatBox.appendChild(messageContainer);
106
+ }
107
+
108
+ // Function to auto-scroll the chat box to the latest message
109
+ function scrollToBottom() {
110
  chatBox.scrollTop = chatBox.scrollHeight;
111
+ }
112
  </script>
113
  </body>
114
  </html>