diff --git a/Hubs/ChatHub.cs b/Hubs/ChatHub.cs index 20deb6d..af8d6d7 100644 --- a/Hubs/ChatHub.cs +++ b/Hubs/ChatHub.cs @@ -179,20 +179,18 @@ public async Task SendMessage(string user, string message) // Get the messages from the Database public async Task ChatHistory() { - // Get the language of requesting user var connectionId = Context.ConnectionId; - var language = _userPreferences[connectionId].Language; - - // Get the last 10 messages from the database that match language - var lastMessages = _context.Messages.Where(m => m.Language == language).OrderByDescending(m => m.SentDate).Take(10).ToList(); + var language = _userPreferences.ContainsKey(connectionId) ? _userPreferences[connectionId].Language : "en"; // Default to English if not set + // Fetch the last N messages from the database that match the language + var lastMessages = _context.Messages + .OrderByDescending(m => m.SentDate) + .Take(20) // Adjust the number of messages as needed + .ToList(); + lastMessages.Reverse(); - // Check if the user wants to receive notifications - if (_userPreferences[connectionId].ReceiveNotifications) - { - // Send the messages to the user - await Clients.Client(connectionId).SendAsync("ReceiveChatHistory", lastMessages, _userPreferences[connectionId].Language); - } + // Send the messages to the user + await Clients.Client(connectionId).SendAsync("ReceiveChatHistory", lastMessages); } @@ -288,11 +286,12 @@ private async Task GenerateSummaryAsync(List messages) } // Override OnConnectedAsync to track connections - public override Task OnConnectedAsync() + public override async Task OnConnectedAsync() { _logger.LogInformation("Connection ID: " + Context.ConnectionId); _userPreferences.Add(Context.ConnectionId, new UserPreferences()); - return base.OnConnectedAsync(); + await base.OnConnectedAsync(); + await ChatHistory(); } // Override OnDisconnectedAsync to clean up when a connection is lost diff --git a/Pages/Index.cshtml b/Pages/Index.cshtml index 6e8dcde..3100b70 100644 --- a/Pages/Index.cshtml +++ b/Pages/Index.cshtml @@ -1,26 +1,27 @@ @page
-
-
- @* messages will be inserted here *@ -
-
- Language: - User: -
-
- Message: - -
-
- -
+
+
+ @* messages will be inserted here *@ +
+
+ Language: + + User:
+
+ Message: + +
+ +
diff --git a/Pages/Shared/_Layout.cshtml b/Pages/Shared/_Layout.cshtml index bd97d11..8674089 100644 --- a/Pages/Shared/_Layout.cshtml +++ b/Pages/Shared/_Layout.cshtml @@ -1,32 +1,34 @@  + - @ViewData["Title"] - SignalrChat + @ViewData["Title"] - SupaChat +
@@ -36,11 +38,11 @@
-
-
- © 2024 - SignalrChat - Privacy -
-
+ @*
+
+ © 2024 - SignalrChat - Privacy +
+
*@ @@ -48,4 +50,5 @@ @await RenderSectionAsync("Scripts", required: false) + \ No newline at end of file diff --git a/app.db b/app.db index eeaa3b5..3589a38 100644 Binary files a/app.db and b/app.db differ diff --git a/wwwroot/css/site.css b/wwwroot/css/site.css index 65da7a1..e6a7ab5 100644 --- a/wwwroot/css/site.css +++ b/wwwroot/css/site.css @@ -23,6 +23,14 @@ html { padding: 10px; background-color: #181818; border-radius: 8px; + /* Hide scrollbar for Webkit browsers like Chrome and Safari */ + &::-webkit-scrollbar { + display: none; + } + + /* Hide scrollbar for IE, Edge, and Firefox */ + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ } /* Styles for individual chat messages */ @@ -135,9 +143,8 @@ html { /* Overriding Bootstrap's navbar to fit dark theme */ .navbar { background-color: #242424 !important; /* Dark background for the navbar */ - border-bottom: 1px solid #444; /* Slight contrast for the bottom border */ + border-bottom: 1px solid rgba(68, 68, 68, 0.5) !important; /* Darker border with more transparency */ } - .navbar-brand, .nav-link { color: #e0e0e0 !important; /* Light text color for legibility */ diff --git a/wwwroot/js/chat.js b/wwwroot/js/chat.js index 877e719..157e89b 100644 --- a/wwwroot/js/chat.js +++ b/wwwroot/js/chat.js @@ -45,10 +45,43 @@ connection.on("ReceiveTranslation", function (messageId, translation, language) translatedContent.textContent = `Translation: ${translation}`; }); -connection.on("ReceiveChatHistory", function (messageList, language) { - console.log(messageList); -}); +connection.on("ReceiveChatHistory", function (messages, language) { + console.log("i see messages", messages); + var messagesList = document.getElementById("messagesList"); + messages.forEach(function (message) { + // Create elements for the message, header, and content + var messageContainer = document.createElement("div"); + messageContainer.classList.add("message-container"); + + var messageHeader = document.createElement("div"); + messageHeader.classList.add("message-header"); + var timestamp = new Date(message.sentDate).toLocaleTimeString(); // Assuming 'sentDate' is the correct property + messageHeader.textContent = `${message.senderName} · ${timestamp}`; + + var messageContent = document.createElement("div"); + messageContent.classList.add("message-content"); + messageContent.textContent = message.content; // Assuming 'content' is the correct property + + // Append the header and content to the message container + messageContainer.appendChild(messageHeader); + messageContainer.appendChild(messageContent); + + // Check if translation is needed (based on the current language and message language) + if (language !== currentLanguage && message.language !== currentLanguage) { + var translatedContent = document.createElement("div"); + translatedContent.classList.add("translated-content"); + translatedContent.textContent = "Translation: Loading..."; // Placeholder text + messageContainer.appendChild(translatedContent); + // You might need to handle actual translation loading here + } + + // Append the message container to the message list + messagesList.appendChild(messageContainer); + }); + // Scroll to the bottom of the chat window to show the most recent messages + messagesList.scrollTop = messagesList.scrollHeight; +}); connection.on("ReceiveSummary", function (summary) { var messageContainer = document.createElement("div"); @@ -77,13 +110,16 @@ connection.start().then(function () { document.getElementById("sendButton").addEventListener("click", function (event) { var user = document.getElementById("userInput").value; var message = document.getElementById("messageInput").value; - connection.invoke("SendMessage", user, message).catch(function (err) { - return console.error(err.toString()); - }); - event.preventDefault(); + if (message.trim() !== '') { // Ensure we don't send empty messages + connection.invoke("SendMessage", user, message).catch(function (err) { + return console.error(err.toString()); + }); + // Clear the message input field after sending the message + document.getElementById("messageInput").value = ''; + } + event.preventDefault(); // Prevent the form from submitting in a traditional way }); - -document.getElementById("languageSelect").addEventListener("change", function() { +document.getElementById("languageSelect").addEventListener("change", function () { currentLanguage = this.value; updateLanguagePreference(this.value); }); @@ -96,8 +132,8 @@ function updateLanguagePreference(language) { }); } -document.getElementById("historyButton").addEventListener("click", function() { - connection.invoke("ChatHistory").catch(function (err) { - return console.error(err.toString()); - }); -}); \ No newline at end of file +// document.getElementById("historyButton").addEventListener("click", function () { +// connection.invoke("ChatHistory").catch(function (err) { +// return console.error(err.toString()); +// }); +// }); \ No newline at end of file