Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <title>APIM Chat</title>
- <meta name="viewport" content="width=device-width, initial-scale=1" />
- <style>
- body {
- font-family: "Roboto", Arial, sans-serif;
- margin: 0;
- padding: 0;
- background-color: #f5f5f5;
- }
- .chat-container {
- max-width: 600px;
- height: 90vh;
- margin: 20px auto;
- background-color: #fff;
- border-radius: 5px;
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
- display: flex;
- flex-direction: column;
- }
- .chat-header {
- background-color: #128c7e;
- color: #fff;
- padding: 15px;
- border-top-left-radius: 5px;
- border-top-right-radius: 5px;
- }
- .chat-header h2 {
- margin: 0;
- font-size: 18px;
- }
- .chat-messages {
- flex-grow: 1;
- overflow-y: scroll;
- padding: 15px;
- }
- .message {
- margin-bottom: 10px;
- }
- .message .author {
- font-weight: bold;
- color: #128c7e;
- }
- .message .time {
- font-size: 12px;
- color: #888;
- }
- .message.current-user {
- background-color: #dcf8c6;
- align-self: flex-end;
- border-radius: 5px;
- padding: 8px;
- }
- .input-container {
- display: flex;
- padding: 15px;
- border-top: 1px solid #ddd;
- }
- .input-container input {
- flex-grow: 1;
- padding: 10px;
- border: none;
- border-radius: 5px;
- margin-right: 10px;
- }
- .input-container button {
- padding: 10px 15px;
- background-color: #128c7e;
- color: #fff;
- border: none;
- border-radius: 5px;
- cursor: pointer;
- }
- .settings {
- display: flex;
- justify-content: space-between;
- padding: 15px;
- border-top: 1px solid #ddd;
- }
- .settings input {
- padding: 10px;
- border: 1px solid #ddd;
- border-radius: 5px;
- margin-right: 10px;
- }
- .settings button {
- padding: 10px 15px;
- background-color: #128c7e;
- color: #fff;
- border: none;
- border-radius: 5px;
- cursor: pointer;
- }
- .settings label {
- padding: 10px 15px;
- display: block;
- }
- .settings .new-chat-setting {
- min-width: max-content;
- display: flex;
- flex-direction: column;
- }
- </style>
- </head>
- <body>
- <div class="chat-container">
- <div class="chat-header">
- <h2>APIM Chat Interface</h2>
- </div>
- <div class="chat-messages" id="chatMessages"></div>
- <div class="input-container">
- <input type="text" id="messageInput" placeholder="Enter your message" />
- <button onclick="sendMessage()">Send</button>
- </div>
- <div class="settings">
- <div>
- <input
- type="text"
- id="usernameInput"
- placeholder="Enter your username"
- />
- <button onclick="setUsername()">Set Username</button>
- </div>
- <div>
- <input type="text" id="chatIdInput" placeholder="Enter chat ID" />
- <button onclick="setChatId()">Set Chat ID</button>
- <button onclick="setRandomChatId()">Set Random</button>
- </div>
- <div class="new-chat-setting">
- <label for="isNewChatCheckbox">New Chat</label>
- <input
- type="checkbox"
- name="isNewChatCheckbox"
- id="isNewChatCheckbox"
- oninput="setIsNewChat()"
- />
- </div>
- </div>
- </div>
- <script>
- let currentUsername = "";
- let currentChatId = "";
- let isNewChat = false;
- let numberOfMessages = 0;
- let updateIntervalId;
- function appendMessage(username, message, time) {
- const chatMessages = document.getElementById("chatMessages");
- const messageElement = document.createElement("div");
- messageElement.classList.add("message");
- if (username === currentUsername) {
- messageElement.classList.add("current-user");
- }
- messageElement.innerHTML = `
- <span class="author">${username}</span>
- <span class="time">${time}</span>
- <p>${message}</p>
- `;
- chatMessages.appendChild(messageElement);
- chatMessages.scrollTop = chatMessages.scrollHeight;
- return messageElement;
- }
- function clearChat() {
- const chatMessages = document.getElementById("chatMessages");
- chatMessages.innerText = "";
- }
- function sendMessage() {
- const messageInput = document.getElementById("messageInput");
- const message = messageInput.value.trim();
- if (message !== "" && currentUsername !== "" && currentChatId !== "") {
- const currentTime = new Date().toLocaleString();
- const newMessageComponent = appendMessage(
- currentUsername,
- message,
- currentTime
- );
- messageInput.value = "";
- const url = `https://poc-apim01.azure-api.net/text-relay/chatCache?new-chat=${isNewChat.toString()}&chat-id=${currentChatId}`;
- fetch(url, {
- method: "post",
- headers: {
- "Content-Type": "application/json",
- },
- body: JSON.stringify({
- message: message,
- username: currentUsername,
- }),
- }).then((response) => {
- if (!response.ok) {
- newMessageComponent.remove();
- } else {
- if (isNewChatCheckbox.checked) {
- isNewChatCheckbox.click();
- }
- }
- });
- }
- }
- function updateChat(despiteSameLength = false) {
- if (currentChatId !== "" && !isNewChat) {
- const url = `https://poc-apim01.azure-api.net/text-relay/getChatCache?chat-id=${currentChatId}`;
- fetch(url, {
- method: "get",
- })
- .then((response) => {
- return response.json();
- })
- .then((chatObject) => {
- const messages = chatObject["messages"];
- if (messages.length === numberOfMessages && !despiteSameLength) {
- return;
- }
- numberOfMessages = messages.length;
- clearChat();
- messages.forEach((messageObject) => {
- const [username, message, time] = [
- messageObject["author"],
- messageObject["message"],
- new Date(messageObject["created-at"]).toLocaleString(),
- ];
- appendMessage(username, message, time);
- });
- updateChat();
- });
- }
- }
- function setUsername() {
- const usernameInput = document.getElementById("usernameInput");
- currentUsername = usernameInput.value.trim();
- updateChat(true);
- }
- function setChatId() {
- const chatIdInput = document.getElementById("chatIdInput");
- currentChatId = chatIdInput.value.trim();
- updateChat(true);
- }
- function setRandomChatId(){
- const randomId = Math.random().toString(16).substr(2, 8);
- const chatIdInput = document.getElementById("chatIdInput");
- chatIdInput.value = randomId;
- }
- function setIsNewChat() {
- console.log("Checkbox event");
- const isNewChatCheckbox = document.getElementById("isNewChatCheckbox");
- isNewChat = isNewChatCheckbox.checked;
- if (isNewChat && updateIntervalId !== 0) {
- clearInterval(updateIntervalId);
- updateIntervalId = 0;
- } else if (!isNewChat && updateIntervalId == 0) {
- console.log("restart polling");
- updateIntervalId = setInterval(updateChat, 1000);
- }
- }
- document.addEventListener("DOMContentLoaded", () => {
- updateIntervalId = setInterval(updateChat, 1000);
- });
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement