Chat UI

Okay, here's the setup for a clean and sleek chat UI based on your requirements. Chat UI

AI Chat

Hi there! How can I help you today?

:root { --primary-dark: #1a1a2e; /* Dark blue/purple */ --primary: #16213e; /* Slightly lighter dark blue */ --accent: #0f3460; /* Accent blue */ --text-color: #e94560; /* Pinkish accent for text/buttons */ --text-light: #ffffff; --border-radius: 8px; --padding: 15px; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: var(--primary-dark); color: var(--text-light); display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; } .chat-container { background-color: var(--primary); border-radius: var(--border-radius); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); width: 100%; max-width: 600px; display: flex; flex-direction: column; overflow: hidden; /* Ensures children adhere to border-radius */ height: 80vh; /* Limit height */ } .chat-header { background-color: var(--accent); padding: var(--padding); display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--primary-dark); } .chat-header h2 { margin: 0; font-size: 1.2em; } #language-select { padding: 5px 8px; border-radius: 4px; border: 1px solid var(--primary-dark); background-color: var(--primary); color: var(--text-light); cursor: pointer; } .chat-messages { flex-grow: 1; padding: var(--padding); overflow-y: auto; display: flex; flex-direction: column; gap: 10px; } /* Scrollbar styling (optional, for better aesthetics) */ .chat-messages::-webkit-scrollbar { width: 8px; } .chat-messages::-webkit-scrollbar-track { background: var(--primary); } .chat-messages::-webkit-scrollbar-thumb { background-color: var(--accent); border-radius: 4px; border: 2px solid var(--primary); } .message { padding: 10px 15px; border-radius: var(--border-radius); max-width: 80%; word-wrap: break-word; line-height: 1.4; } .message.user { background-color: var(--text-color); color: var(--text-light); align-self: flex-end; border-bottom-right-radius: 2px; /* Slight visual difference */ } .message.ai { background-color: var(--accent); color: var(--text-light); align-self: flex-start; border-bottom-left-radius: 2px; /* Slight visual difference */ } .message.error { background-color: #5c1a1a; /* Dark red for errors */ color: #ffdddd; align-self: flex-start; font-style: italic; } .chat-input-area { display: flex; padding: var(--padding); border-top: 1px solid var(--primary-dark); background-color: var(--accent); } #user-input { flex-grow: 1; padding: 10px; border: 1px solid var(--primary-dark); border-radius: var(--border-radius); background-color: var(--primary); color: var(--text-light); margin-right: 10px; outline: none; } #user-input:focus { border-color: var(--text-color); } #send-button { padding: 10px 20px; background-color: var(--text-color); color: var(--text-light); border: none; border-radius: var(--border-radius); cursor: pointer; font-weight: bold; transition: background-color 0.2s ease; } #send-button:hover { background-color: #d6304a; /* Slightly darker pink */ } const chatMessages = document.getElementById('chat-messages'); const userInput = document.getElementById('user-input'); const sendButton = document.getElementById('send-button'); const languageSelect = document.getElementById('language-select'); // --- Function to add a message to the chat display --- function addMessage(text, sender) { const messageDiv = document.createElement('div'); messageDiv.classList.add('message', sender); // sender should be 'user', 'ai', or 'error' messageDiv.textContent = text; chatMessages.appendChild(messageDiv); // Scroll to the bottom chatMessages.scrollTop = chatMessages.scrollHeight; } // --- Function to handle sending a message --- async function sendMessage() { const query = userInput.value.trim(); const lang = languageSelect.value; if (!query) { return; // Don't send empty messages } // Display user's message addMessage(query, 'user'); userInput.value = ''; // Clear input field userInput.disabled = true; // Disable input while waiting sendButton.disabled = true; // Disable button while waiting // Add a temporary thinking message (optional) const thinkingMessage = document.createElement('div'); thinkingMessage.classList.add('message', 'ai'); thinkingMessage.textContent = 'Thinking...'; thinkingMessage.id = 'thinking-message'; chatMessages.appendChild(thinkingMessage); chatMessages.scrollTop = chatMessages.scrollHeight; try { // Send request to the backend const response = await fetch('/chat', { // Assuming your Flask endpoint is /chat method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ query: query, lang: lang }), }); // Remove thinking message const thinkingElement = document.getElementById('thinking-message'); if (thinkingElement) { thinkingElement.remove(); } if (!response.ok) { // Try to get error details from response body let errorMsg = `Error: ${response.status} ${response.statusText}`; try { const errorData = await response.json(); errorMsg = errorData.error || errorMsg; } catch (jsonError) { // Ignore if response body is not JSON } throw new Error(errorMsg); } const data = await response.json(); if (data.status === 'success') { addMessage(data.response, 'ai'); } else { addMessage(data.error || 'An unknown error occurred.', 'error'); } } catch (error) { // Remove thinking message in case of fetch error const thinkingElement = document.getElementById('thinking-message'); if (thinkingElement) { thinkingElement.remove(); } console.error("Fetch error:", error); addMessage(`Network or server error: ${error.message}`, 'error'); } finally { userInput.disabled = false; // Re-enable input sendButton.disabled = false; // Re-enable button userInput.focus(); // Focus back on input } } // --- Event Listeners --- sendButton.addEventListener('click', sendMessage); userInput.addEventListener('keypress', (event) => { // Send message on Enter key press if (event.key === 'Enter') { sendMessage(); } }); // --- Initial focus --- userInput.focus(); This sets up the HTML structure, CSS styling for the requested look and feel, and JavaScript to handle sending messages to your backend `/chat` endpoint and displaying the conversation. Remember to adapt the `/chat` URL in `script.js` if your backend endpoint is different. You might also want to add more language options to the dropdown in `index.html`.