API tools faq
paste
Advertisement
charis2324

chat-interface

charis2324
Apr 17th, 2024
566
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 8.18 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>APIM Chat</title>
  5.     <meta name="viewport" content="width=device-width, initial-scale=1" />
  6.     <style>
  7.       body {
  8.         font-family: "Roboto", Arial, sans-serif;
  9.         margin: 0;
  10.         padding: 0;
  11.         background-color: #f5f5f5;
  12.       }
  13.  
  14.       .chat-container {
  15.         max-width: 600px;
  16.         height: 90vh;
  17.         margin: 20px auto;
  18.         background-color: #fff;
  19.         border-radius: 5px;
  20.         box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  21.         display: flex;
  22.         flex-direction: column;
  23.       }
  24.  
  25.       .chat-header {
  26.         background-color: #128c7e;
  27.         color: #fff;
  28.         padding: 15px;
  29.         border-top-left-radius: 5px;
  30.         border-top-right-radius: 5px;
  31.       }
  32.  
  33.       .chat-header h2 {
  34.         margin: 0;
  35.         font-size: 18px;
  36.       }
  37.  
  38.       .chat-messages {
  39.         flex-grow: 1;
  40.         overflow-y: scroll;
  41.         padding: 15px;
  42.       }
  43.  
  44.       .message {
  45.         margin-bottom: 10px;
  46.       }
  47.  
  48.       .message .author {
  49.         font-weight: bold;
  50.         color: #128c7e;
  51.       }
  52.  
  53.       .message .time {
  54.         font-size: 12px;
  55.         color: #888;
  56.       }
  57.  
  58.       .message.current-user {
  59.         background-color: #dcf8c6;
  60.         align-self: flex-end;
  61.         border-radius: 5px;
  62.         padding: 8px;
  63.       }
  64.  
  65.       .input-container {
  66.         display: flex;
  67.         padding: 15px;
  68.         border-top: 1px solid #ddd;
  69.       }
  70.  
  71.       .input-container input {
  72.         flex-grow: 1;
  73.         padding: 10px;
  74.         border: none;
  75.         border-radius: 5px;
  76.         margin-right: 10px;
  77.       }
  78.  
  79.       .input-container button {
  80.         padding: 10px 15px;
  81.         background-color: #128c7e;
  82.         color: #fff;
  83.         border: none;
  84.         border-radius: 5px;
  85.         cursor: pointer;
  86.       }
  87.  
  88.       .settings {
  89.         display: flex;
  90.         justify-content: space-between;
  91.         padding: 15px;
  92.         border-top: 1px solid #ddd;
  93.       }
  94.  
  95.       .settings input {
  96.         padding: 10px;
  97.         border: 1px solid #ddd;
  98.         border-radius: 5px;
  99.         margin-right: 10px;
  100.       }
  101.  
  102.       .settings button {
  103.         padding: 10px 15px;
  104.         background-color: #128c7e;
  105.         color: #fff;
  106.         border: none;
  107.         border-radius: 5px;
  108.         cursor: pointer;
  109.       }
  110.       .settings label {
  111.         padding: 10px 15px;
  112.         display: block;
  113.       }
  114.       .settings .new-chat-setting {
  115.         min-width: max-content;
  116.         display: flex;
  117.         flex-direction: column;
  118.       }
  119.     </style>
  120.   </head>
  121.   <body>
  122.     <div class="chat-container">
  123.       <div class="chat-header">
  124.         <h2>APIM Chat Interface</h2>
  125.       </div>
  126.  
  127.       <div class="chat-messages" id="chatMessages"></div>
  128.  
  129.       <div class="input-container">
  130.         <input type="text" id="messageInput" placeholder="Enter your message" />
  131.         <button onclick="sendMessage()">Send</button>
  132.       </div>
  133.  
  134.       <div class="settings">
  135.         <div>
  136.           <input
  137.            type="text"
  138.            id="usernameInput"
  139.            placeholder="Enter your username"
  140.          />
  141.           <button onclick="setUsername()">Set Username</button>
  142.         </div>
  143.         <div>
  144.           <input type="text" id="chatIdInput" placeholder="Enter chat ID" />
  145.           <button onclick="setChatId()">Set Chat ID</button>
  146.           <button onclick="setRandomChatId()">Set Random</button>
  147.         </div>
  148.         <div class="new-chat-setting">
  149.           <label for="isNewChatCheckbox">New Chat</label>
  150.           <input
  151.            type="checkbox"
  152.            name="isNewChatCheckbox"
  153.            id="isNewChatCheckbox"
  154.            oninput="setIsNewChat()"
  155.          />
  156.         </div>
  157.       </div>
  158.     </div>
  159.  
  160.     <script>
  161.       let currentUsername = "";
  162.       let currentChatId = "";
  163.       let isNewChat = false;
  164.       let numberOfMessages = 0;
  165.       let updateIntervalId;
  166.       function appendMessage(username, message, time) {
  167.         const chatMessages = document.getElementById("chatMessages");
  168.         const messageElement = document.createElement("div");
  169.         messageElement.classList.add("message");
  170.         if (username === currentUsername) {
  171.           messageElement.classList.add("current-user");
  172.         }
  173.         messageElement.innerHTML = `
  174.         <span class="author">${username}</span>
  175.         <span class="time">${time}</span>
  176.         <p>${message}</p>
  177.       `;
  178.         chatMessages.appendChild(messageElement);
  179.         chatMessages.scrollTop = chatMessages.scrollHeight;
  180.         return messageElement;
  181.       }
  182.       function clearChat() {
  183.         const chatMessages = document.getElementById("chatMessages");
  184.         chatMessages.innerText = "";
  185.       }
  186.       function sendMessage() {
  187.         const messageInput = document.getElementById("messageInput");
  188.         const message = messageInput.value.trim();
  189.         if (message !== "" && currentUsername !== "" && currentChatId !== "") {
  190.          const currentTime = new Date().toLocaleString();
  191.           const newMessageComponent = appendMessage(
  192.             currentUsername,
  193.             message,
  194.             currentTime
  195.           );
  196.           messageInput.value = "";
  197.           const url = `https://poc-apim01.azure-api.net/text-relay/chatCache?new-chat=${isNewChat.toString()}&chat-id=${currentChatId}`;
  198.           fetch(url, {
  199.             method: "post",
  200.             headers: {
  201.               "Content-Type": "application/json",
  202.             },
  203.             body: JSON.stringify({
  204.               message: message,
  205.               username: currentUsername,
  206.             }),
  207.           }).then((response) => {
  208.             if (!response.ok) {
  209.               newMessageComponent.remove();
  210.             } else {
  211.               if (isNewChatCheckbox.checked) {
  212.                 isNewChatCheckbox.click();
  213.               }
  214.             }
  215.           });
  216.         }
  217.       }
  218.       function updateChat(despiteSameLength = false) {
  219.         if (currentChatId !== "" && !isNewChat) {
  220.          const url = `https://poc-apim01.azure-api.net/text-relay/getChatCache?chat-id=${currentChatId}`;
  221.           fetch(url, {
  222.             method: "get",
  223.           })
  224.             .then((response) => {
  225.               return response.json();
  226.             })
  227.             .then((chatObject) => {
  228.               const messages = chatObject["messages"];
  229.               if (messages.length === numberOfMessages && !despiteSameLength) {
  230.                return;
  231.               }
  232.               numberOfMessages = messages.length;
  233.               clearChat();
  234.               messages.forEach((messageObject) => {
  235.                 const [username, message, time] = [
  236.                   messageObject["author"],
  237.                   messageObject["message"],
  238.                   new Date(messageObject["created-at"]).toLocaleString(),
  239.                 ];
  240.                 appendMessage(username, message, time);
  241.               });
  242.               updateChat();
  243.             });
  244.         }
  245.       }
  246.       function setUsername() {
  247.         const usernameInput = document.getElementById("usernameInput");
  248.         currentUsername = usernameInput.value.trim();
  249.         updateChat(true);
  250.       }
  251.  
  252.       function setChatId() {
  253.         const chatIdInput = document.getElementById("chatIdInput");
  254.         currentChatId = chatIdInput.value.trim();
  255.         updateChat(true);
  256.       }
  257.       function setRandomChatId(){
  258.         const randomId = Math.random().toString(16).substr(2, 8);
  259.         const chatIdInput = document.getElementById("chatIdInput");
  260.         chatIdInput.value = randomId;
  261.       }
  262.       function setIsNewChat() {
  263.         console.log("Checkbox event");
  264.         const isNewChatCheckbox = document.getElementById("isNewChatCheckbox");
  265.         isNewChat = isNewChatCheckbox.checked;
  266.         if (isNewChat && updateIntervalId !== 0) {
  267.          clearInterval(updateIntervalId);
  268.           updateIntervalId = 0;
  269.         } else if (!isNewChat && updateIntervalId == 0) {
  270.          console.log("restart polling");
  271.           updateIntervalId = setInterval(updateChat, 1000);
  272.         }
  273.       }
  274.       document.addEventListener("DOMContentLoaded", () => {
  275.         updateIntervalId = setInterval(updateChat, 1000);
  276.       });
  277.     </script>
  278.   </body>
  279. </html>
  280.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!