Replying to
@@ -334,45 +477,188 @@
let ws;
let autocompleteActive = false;
let replyToId = -1;
+ let reconnectAttempts = 0;
+ let reconnectTimeout;
+ let typingTimeout;
+ let isUserAtBottom = true;
+ let unreadCount = 0;
const allUsernames = {{.AllUsernames}};
const currentUsername = "{{.CurrentUsername}}";
+ const maxReconnectDelay = 30000; // 30 seconds max
+
+ // Update connection status
+ function updateConnectionStatus(status) {
+ const dot = document.getElementById('connection-dot');
+ const text = document.getElementById('connection-text');
+ dot.className = 'connection-dot ' + status;
+
+ if (status === 'connected') {
+ text.textContent = 'Connected';
+ reconnectAttempts = 0;
+ } else if (status === 'connecting') {
+ text.textContent = 'Connecting...';
+ } else if (status === 'disconnected') {
+ text.textContent = 'Disconnected';
+ }
+ }
function connectWebSocket() {
const boardID = {{.Board.ID}};
+ updateConnectionStatus('connecting');
+
ws = new WebSocket('ws://' + window.location.host + '{{.BasePath}}/chat/?ws=true&id=' + boardID);
+
+ ws.onopen = function() {
+ updateConnectionStatus('connected');
+ reconnectAttempts = 0;
+ };
+
ws.onmessage = function(event) {
const msg = JSON.parse(event.data);
+
+ // Handle typing indicator
+ if (msg.type === 'typing') {
+ showTypingIndicator(msg.username);
+ return;
+ }
+
+ // Handle regular message
appendMessage(msg);
};
ws.onclose = function() {
+ updateConnectionStatus('disconnected');
console.log("WebSocket closed, reconnecting...");
- setTimeout(connectWebSocket, 5000);
+ scheduleReconnect();
};
ws.onerror = function(error) {
console.error("WebSocket error:", error);
+ updateConnectionStatus('disconnected');
};
}
+
+ // Reconnect with exponential backoff
+ function scheduleReconnect() {
+ if (reconnectTimeout) clearTimeout(reconnectTimeout);
+
+ const delay = Math.min(1000 * Math.pow(2, reconnectAttempts), maxReconnectDelay);
+ reconnectAttempts++;
+
+ console.log(`Reconnecting in ${delay}ms (attempt ${reconnectAttempts})...`);
+ reconnectTimeout = setTimeout(connectWebSocket, delay);
+ }
function sendMessage() {
const input = document.getElementById('chat-input-text');
const content = input.value.trim();
if (content === '') return;
+
+ const tempId = 'temp-' + Date.now();
const msg = {
type: 'message',
content: content,
replyTo: replyToId
};
+
+ // Show message immediately with "sending" status
+ const tempMsg = {
+ id: tempId,
+ content: content,
+ username: currentUsername,
+ timestamp: new Date().toISOString(),
+ replyTo: replyToId,
+ status: 'sending'
+ };
+ appendMessage(tempMsg, true);
+
if (ws && ws.readyState === WebSocket.OPEN) {
ws.send(JSON.stringify(msg));
input.value = '';
cancelReply();
+
+ // Update status to "sent" after a brief delay
+ setTimeout(() => {
+ const msgElement = document.getElementById('msg-' + tempId);
+ if (msgElement) {
+ const statusSpan = msgElement.querySelector('.message-status');
+ if (statusSpan) {
+ statusSpan.className = 'message-status sent';
+ statusSpan.textContent = '✓';
+ }
+ }
+ }, 500);
} else {
+ // Mark as failed if not connected
+ setTimeout(() => {
+ const msgElement = document.getElementById('msg-' + tempId);
+ if (msgElement) {
+ const statusSpan = msgElement.querySelector('.message-status');
+ if (statusSpan) {
+ statusSpan.className = 'message-status failed';
+ statusSpan.textContent = '✗ Failed - Click to retry';
+ statusSpan.onclick = () => {
+ msgElement.remove();
+ sendMessage();
+ };
+ }
+ }
+ }, 500);
console.error("WebSocket is not open. Current state:", ws ? ws.readyState : 'undefined');
}
}
+
+ // Typing indicator
+ let typingUsers = new Set();
+
+ function sendTypingIndicator() {
+ if (ws && ws.readyState === WebSocket.OPEN) {
+ ws.send(JSON.stringify({ type: 'typing', username: currentUsername }));
+ }
+ }
+
+ function showTypingIndicator(username) {
+ if (username === currentUsername) return;
+
+ typingUsers.add(username);
+ updateTypingDisplay();
+
+ // Clear after 3 seconds
+ setTimeout(() => {
+ typingUsers.delete(username);
+ updateTypingDisplay();
+ }, 3000);
+ }
+
+ function updateTypingDisplay() {
+ const indicator = document.getElementById('typing-indicator');
+ const usersSpan = document.getElementById('typing-users');
+
+ if (typingUsers.size === 0) {
+ indicator.classList.remove('visible');
+ } else {
+ const users = Array.from(typingUsers);
+ if (users.length === 1) {
+ usersSpan.textContent = `${users[0]} is typing`;
+ } else if (users.length === 2) {
+ usersSpan.textContent = `${users[0]} and ${users[1]} are typing`;
+ } else {
+ usersSpan.textContent = `${users[0]}, ${users[1]}, and ${users.length - 2} other${users.length - 2 > 1 ? 's' : ''} are typing`;
+ }
+ indicator.classList.add('visible');
+ }
+ }
- function appendMessage(msg) {
+ function appendMessage(msg, isOptimistic = false) {
const messages = document.getElementById('chat-messages');
+
+ // Don't duplicate if this is a real message and we already have the optimistic one
+ if (!isOptimistic && document.getElementById('msg-temp-' + msg.id)) {
+ const tempMsg = document.getElementById('msg-temp-' + msg.id);
+ tempMsg.remove();
+ }
+
+ // Check if user is at bottom before adding message
+ const wasAtBottom = isUserAtBottom;
+
const msgDiv = document.createElement('div');
let highlightClass = '';
if (msg.mentions && msg.mentions.includes(currentUsername)) {
@@ -386,11 +672,17 @@
}
let replyHTML = msg.replyTo > 0 ? `
Replying to message...
` : '';
+ let statusHTML = '';
+ if (isOptimistic) {
+ statusHTML = `
⋯`;
+ }
+
msgDiv.innerHTML = `
${replyHTML}
${msg.content}
@@ -399,8 +691,59 @@
`;
messages.appendChild(msgDiv);
- messages.scrollTop = messages.scrollHeight;
+
+ // Scroll handling
+ if (wasAtBottom) {
+ messages.scrollTop = messages.scrollHeight;
+ unreadCount = 0;
+ updateUnreadBadge();
+ } else {
+ // User is not at bottom, increment unread
+ if (!isOptimistic && msg.username !== currentUsername) {
+ unreadCount++;
+ updateUnreadBadge();
+ }
+ }
}
+
+ // Jump to bottom functionality
+ function updateUnreadBadge() {
+ const badge = document.getElementById('unread-badge');
+ if (unreadCount > 0) {
+ badge.textContent = unreadCount > 99 ? '99+' : unreadCount;
+ badge.style.display = 'flex';
+ } else {
+ badge.style.display = 'none';
+ }
+ }
+
+ function jumpToBottom() {
+ const messages = document.getElementById('chat-messages');
+ messages.scrollTo({
+ top: messages.scrollHeight,
+ behavior: 'smooth'
+ });
+ unreadCount = 0;
+ updateUnreadBadge();
+ }
+
+ // Detect if user is at bottom
+ function checkScrollPosition() {
+ const messages = document.getElementById('chat-messages');
+ const jumpButton = document.getElementById('jump-to-bottom');
+ const threshold = 100;
+
+ isUserAtBottom = messages.scrollHeight - messages.scrollTop - messages.clientHeight < threshold;
+
+ if (isUserAtBottom) {
+ jumpButton.classList.remove('visible');
+ unreadCount = 0;
+ updateUnreadBadge();
+ } else {
+ jumpButton.classList.add('visible');
+ }
+ }
+
function replyToMessage(id, username) {
replyToId = id;
@@ -533,7 +876,28 @@
window.onload = function() {
connectWebSocket();
- document.getElementById('chat-messages').scrollTop = document.getElementById('chat-messages').scrollHeight;
+ const messagesContainer = document.getElementById('chat-messages');
+ messagesContainer.scrollTop = messagesContainer.scrollHeight;
+
+ // Add scroll event listener
+ messagesContainer.addEventListener('scroll', checkScrollPosition);
+
+ // Add jump to bottom button click handler
+ document.getElementById('jump-to-bottom').addEventListener('click', jumpToBottom);
+
+ // Add typing indicator on input
+ const chatInput = document.getElementById('chat-input-text');
+ let lastTypingTime = 0;
+ chatInput.addEventListener('input', () => {
+ const now = Date.now();
+ if (now - lastTypingTime > 2000) {
+ sendTypingIndicator();
+ lastTypingTime = now;
+ }
+ });
+
+ // Initial check for scroll position
+ checkScrollPosition();
};