- + Build Context As You Chat? @@ -150,6 +154,9 @@

+ Characters: 0 | Words: 0 +

@@ -210,6 +217,30 @@ chatContainer.scrollTop = chatContainer.scrollHeight; // Auto-scroll to the bottom } + // Function to format milliseconds into a readable format + function formatDuration(duration) { + const seconds = Math.floor(duration / 1000); + const milliseconds = duration % 1000; + return `${seconds}.${Math.floor(milliseconds / 10)} seconds`; // Display seconds and milliseconds + } + + // Function to update the character and word count + function updateCounter() { + const userInput = document.getElementById("user-input"); + const charCount = document.getElementById("char-count"); + const wordCount = document.getElementById("word-count"); + + const text = userInput.value; + const characters = text.length; + const words = text.trim() ? text.trim().split(/\s+/).length : 0; // Count words + + charCount.textContent = characters; + wordCount.textContent = words; + } + + // Event listener to update the counter on input + document.getElementById("user-input").addEventListener("input", updateCounter); + // Function to handle sending the message async function sendMessage() { const userInput = document.getElementById("user-input"); @@ -217,17 +248,33 @@ if (!userMessage) return; - // Check for dark mode toggle command + // Check for slash commands if (userMessage.toLowerCase() === '/darkmode') { toggleDarkMode(); userInput.value = ""; // Clear input after command return; } + if (userMessage.toLowerCase() === '/clear') { + clearChat(); + userInput.value = ""; // Clear input after command + return; + } + + if (userMessage.toLowerCase() === '/help') { + displayHelp(); + userInput.value = ""; // Clear input after command + return; + } + addMessage(userMessage, "user"); conversationHistory.push({ role: "user", content: userMessage }); // Add user message to history userInput.value = ""; + // Reset the counter + document.getElementById("char-count").textContent = "0"; + document.getElementById("word-count").textContent = "0"; + // Create and add loading indicator const loadingIndicator = document.createElement("div"); loadingIndicator.id = "loading-indicator"; @@ -238,6 +285,8 @@ // Start animation for this specific indicator const animationInterval = animateLoadingIndicator(loadingIndicator); + const startTime = Date.now(); // Capture the start time + try { const modelSelect = document.getElementById("model-select"); const selectedModel = modelSelect.value; @@ -276,6 +325,9 @@ if (data.choices && data.choices.length > 0) { const botResponse = data.choices[0].message.content; + // Calculate the duration + const duration = Date.now() - startTime; // Time taken in milliseconds + // Clear loading indicator clearInterval(animationInterval); loadingIndicator.remove(); @@ -283,6 +335,14 @@ // Add bot's response to chat addMessage(botResponse, "bot"); conversationHistory.push({ role: "bot", content: botResponse }); // Add bot response to history + + // Display the time taken + const timeTakenMessage = formatDuration(duration); + const timeDisplay = document.createElement("div"); + timeDisplay.classList.add("bot-time"); + timeDisplay.textContent = `Response time: ${timeTakenMessage}`; + timeDisplay.style.textAlign = "center"; // Center the text + document.getElementById("chat-container").appendChild(timeDisplay); // Append the time display } else { console.error("No response from API"); loadingIndicator.remove(); @@ -354,6 +414,24 @@ toggleDarkMode(); // Activate dark mode if preference is set } }); + + // Function to clear the chat + function clearChat() { + const chatContainer = document.getElementById("chat-container"); + chatContainer.innerHTML = ""; // Clear all messages + conversationHistory = []; // Clear the conversation history + } + + // Function to display help information + function displayHelp() { + const helpMessage = ` + Available commands: + /darkmode - Toggle dark mode + /clear - Clear the chat history + /help - Show this help message + `; + addMessage(helpMessage, "bot"); // Display help message as a bot message + } -- cgit 1.4.1-2-gfad0