teganmosi
Deploy Aria application with fixes for database, TTS, and WebSocket (LFS tracking applied)
f6d0a88 | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>WebSocket Chat</title> | |
| <style> | |
| body { | |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; | |
| margin: 0; | |
| padding: 0; | |
| background: #0f172a; | |
| color: #f8fafc; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| height: 100vh; | |
| } | |
| .chat-container { | |
| width: 100%; | |
| max-width: 500px; | |
| height: 80vh; | |
| background: #1e293b; | |
| border-radius: 16px; | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.3); | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| border: 1px solid #334155; | |
| } | |
| .header { | |
| padding: 20px; | |
| background: #334155; | |
| text-align: center; | |
| border-bottom: 1px solid #475569; | |
| } | |
| .header h2 { | |
| margin: 0; | |
| font-size: 1.25rem; | |
| font-weight: 600; | |
| } | |
| #chat-box { | |
| flex: 1; | |
| padding: 20px; | |
| overflow-y: auto; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| scrollbar-width: thin; | |
| scrollbar-color: #475569 transparent; | |
| } | |
| #chat-box::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| #chat-box::-webkit-scrollbar-thumb { | |
| background: #475569; | |
| border-radius: 10px; | |
| } | |
| .message { | |
| max-width: 80%; | |
| padding: 10px 14px; | |
| border-radius: 12px; | |
| font-size: 14px; | |
| line-height: 1.5; | |
| position: relative; | |
| animation: fadeIn 0.2s ease-out; | |
| } | |
| .me { | |
| align-self: flex-end; | |
| background: #2563eb; | |
| color: #ffffff; | |
| border-bottom-right-radius: 4px; | |
| } | |
| .other { | |
| align-self: flex-start; | |
| background: #334155; | |
| color: #e2e8f0; | |
| border-bottom-left-radius: 4px; | |
| } | |
| .user-id { | |
| font-size: 10px; | |
| opacity: 0.7; | |
| margin-bottom: 4px; | |
| display: block; | |
| } | |
| #chat-form { | |
| padding: 20px; | |
| background: #1e293b; | |
| border-top: 1px solid #334155; | |
| display: flex; | |
| gap: 10px; | |
| } | |
| #chat-input { | |
| flex: 1; | |
| background: #0f172a; | |
| border: 1px solid #475569; | |
| color: #f8fafc; | |
| padding: 10px 16px; | |
| border-radius: 8px; | |
| outline: none; | |
| transition: border-color 0.2s; | |
| } | |
| #chat-input:focus { | |
| border-color: #3b82f6; | |
| } | |
| button { | |
| background: #2563eb; | |
| color: #ffffff; | |
| border: none; | |
| padding: 0 16px; | |
| border-radius: 8px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: background 0.2s; | |
| } | |
| button:hover { | |
| background: #1d4ed8; | |
| } | |
| @keyframes fadeIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(5px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .status { | |
| font-size: 12px; | |
| padding: 4px 12px; | |
| border-radius: 20px; | |
| margin-top: 8px; | |
| display: inline-block; | |
| } | |
| .connected { | |
| background: #064e3b; | |
| color: #6ee7b7; | |
| } | |
| .disconnected { | |
| background: #7f1d1d; | |
| color: #fecaca; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="chat-container"> | |
| <div class="header"> | |
| <h2>WebSocket Chat Room</h2> | |
| <div id="status" class="status disconnected">Disconnected</div> | |
| </div> | |
| <div id="chat-box"></div> | |
| <form id="chat-form"> | |
| <input type="text" id="chat-input" placeholder="Type a message..." autocomplete="off" required> | |
| <button type="submit">Send</button> | |
| </form> | |
| </div> | |
| <script> | |
| const myUserId = 9; | |
| const prod = "wss://uat-consultation-portal.aisha.ng"; | |
| const token = ""; // ADD TOKEN HERE | |
| const socket = new WebSocket(`${prod}/ws/consultation/room/?token=${token}`); | |
| const chatBox = document.getElementById('chat-box'); | |
| const chatForm = document.getElementById('chat-form'); | |
| const chatInput = document.getElementById('chat-input'); | |
| const statusEl = document.getElementById('status'); | |
| socket.onmessage = function (event) { | |
| const data = JSON.parse(event.data); | |
| const messageElement = document.createElement("div"); | |
| messageElement.classList.add("message", data.user_id === myUserId ? "me" : "other"); | |
| messageElement.innerHTML = ` | |
| <span class="user-id">${data.email || 'User ' + data.user_id}</span> | |
| <div>${data.message}</div> | |
| `; | |
| chatBox.appendChild(messageElement); | |
| chatBox.scrollTop = chatBox.scrollHeight; | |
| }; | |
| socket.onopen = function (e) { | |
| console.log("WebSocket connected."); | |
| statusEl.innerText = "Connected"; | |
| statusEl.className = "status connected"; | |
| }; | |
| socket.onclose = function (e) { | |
| console.log("WebSocket closed."); | |
| statusEl.innerText = "Disconnected"; | |
| statusEl.className = "status disconnected"; | |
| }; | |
| chatForm.onsubmit = function (e) { | |
| e.preventDefault(); | |
| const message = chatInput.value; | |
| if (message.trim() === "") return; | |
| // Optimistic UI | |
| const messageElement = document.createElement("div"); | |
| messageElement.classList.add("message", "me"); | |
| messageElement.innerHTML = `<span class="user-id">Me</span><div>${message}</div>`; | |
| chatBox.appendChild(messageElement); | |
| chatBox.scrollTop = chatBox.scrollHeight; | |
| socket.send(JSON.stringify({ message })); | |
| chatInput.value = ""; | |
| }; | |
| </script> | |
| </body> | |
| </html> |