Update static/index.html

static/index.html

@@ -27,6 +27,7 @@
   --outgoing-chat-border: #343541;
   --incoming-chat-border: #444654;
 }
+
 .light-mode {
   --text-color: #343541;
   --icon-color: #a9a9bc;
@@ -37,6 +38,7 @@
   --outgoing-chat-border: #FFFFFF;
   --incoming-chat-border: #D9D9E3;
 }
+
 body {
   background: var(--outgoing-chat-bg);
 }
@@ -47,17 +49,21 @@ body {
   max-height: 100vh;
   padding-bottom: 150px;
 }
+
 :where(.chat-container, textarea)::-webkit-scrollbar {
   width: 6px;
 }
+
 :where(.chat-container, textarea)::-webkit-scrollbar-track {
   background: var(--incoming-chat-bg);
   border-radius: 25px;
 }
+
 :where(.chat-container, textarea)::-webkit-scrollbar-thumb {
   background: var(--icon-color);
   border-radius: 25px;
 }
+
 .default-text {
   display: flex;
   align-items: center;
@@ -68,27 +74,33 @@ body {
   text-align: center;
   color: var(--text-color);
 }
+
 .default-text h1 {
   font-size: 3.3rem;
 }
+
 .default-text p {
   margin-top: 10px;
   font-size: 1.1rem;
 }
+
 .chat-container .chat {
   padding: 25px 10px;
   display: flex;
   justify-content: center;
   color: var(--text-color);
 }
+
 .chat-container .chat.outgoing {
   background: var(--outgoing-chat-bg);
   border: 1px solid var(--outgoing-chat-border);
 }
+
 .chat-container .chat.incoming {
   background: var(--incoming-chat-bg);
   border: 1px solid var(--incoming-chat-border);
 }
+
 .chat .chat-content {
   display: flex;
   max-width: 1200px;
@@ -96,25 +108,31 @@ body {
   align-items: flex-start;
   justify-content: space-between;
 }
+
 .chat .chat-content span {
   cursor: pointer;
   font-size: 1.3rem;
   color: var(--icon-color);
 }
+
 .chat .chat-content .icons {
   display: flex;
   visibility: hidden;
 }
+
 .chat:hover .chat-content .icons {
   visibility: visible;
 }
+
 .chat .chat-content span:not(:last-child) {
   margin-right: 10px;
 }
+
 .chat .chat-details {
   display: flex;
   align-items: center;
 }
+
 .chat .chat-details img {
   width: 35px;
   height: 35px;
@@ -122,6 +140,7 @@ body {
   object-fit: cover;
   border-radius: 2px;
 }
+
 .chat .chat-details p {
   white-space: pre-wrap;
   font-size: 1.05rem;
@@ -129,10 +148,12 @@ body {
   color: var(--text-color);
   word-break: break-word;
 }
+
 .chat .typing-animation {
   padding-left: 25px;
   display: inline-flex;
 }
+
 .typing-animation .typing-dot {
   height: 7px;
   width: 7px;
@@ -142,24 +163,29 @@ body {
   background: var(--text-color);
   animation: animateDots 1.5s var(--delay) ease-in-out infinite;
 }
+
 .typing-animation .typing-dot:first-child {
   margin-left: 0;
 }
+
 @keyframes animateDots {
   0%,
   44% {
     transform: translateY(0px);
   }
+
   28% {
     opacity: 0.4;
     transform: translateY(-6px);
   }
+
   44% {
     opacity: 0.2;
   }
 }
 
 /* Typing container styling */
+
 .typing-container {
   position: fixed;
   bottom: 0;
@@ -170,17 +196,20 @@ body {
   background: var(--outgoing-chat-bg);
   border-top: 1px solid var(--incoming-chat-border);
 }
+
 .typing-container .typing-content {
   display: flex;
   max-width: 950px;
   width: 100%;
   align-items: flex-end;
 }
+
 .typing-container .typing-textarea {
   width: 100%;
   display: flex;
   position: relative;
 }
+
 .typing-textarea textarea {
   resize: none;
   height: 55px;
@@ -195,9 +224,11 @@ body {
   background: var(--incoming-chat-bg);
   outline: 1px solid var(--incoming-chat-border);
 }
+
 .typing-textarea textarea::placeholder {
   color: var(--placeholder-color);
 }
+
 .typing-content span {
   width: 55px;
   height: 55px;
@@ -208,63 +239,78 @@ body {
   justify-content: center;
   color: var(--icon-color);
 }
+
 .typing-textarea span {
   position: absolute;
   right: 0;
   bottom: 0;
   visibility: hidden;
 }
+
 .typing-textarea textarea:valid ~ span {
   visibility: visible;
 }
+
 .typing-controls {
   display: flex;
 }
+
 .typing-controls span {
   margin-left: 7px;
   font-size: 1.4rem;
   background: var(--incoming-chat-bg);
   outline: 1px solid var(--incoming-chat-border);
 }
+
 .typing-controls span:hover {
   background: var(--icon-hover-bg);
 }
 
 /* Reponsive Media Query */
+
 @media screen and (max-width: 600px) {
   .default-text h1 {
     font-size: 2.3rem;
   }
+
   :where(.default-text p, textarea, .chat p) {
-    font-size: 0.95rem!important;
+    font-size: 0.95rem !important;
   }
+
   .chat-container .chat {
     padding: 20px 10px;
   }
+
   .chat-container .chat img {
     height: 32px;
     width: 32px;
   }
+
   .chat-container .chat p {
     padding: 0 20px;
   }
+
   .chat .chat-content:not(:has(.typing-animation), :has(.error)) span {
     visibility: visible;
   }
+
   .typing-container {
     padding: 15px 10px;
   }
+
   .typing-textarea textarea {
     height: 45px;
     padding: 10px 40px 10px 10px;
   }
+
   .typing-content span {
     height: 45px;
     width: 45px;
     margin-left: 5px;
   }
+
   span.material-symbols-rounded {
-    font-size: 1.25rem!important;
+    font-size: 1.25rem !important;
   }
 }
 </style>
@@ -283,8 +329,10 @@ body {
         <div class="typing-controls">
           <span id="theme-btn" class="material-symbols-rounded">light_mode</span>
           <span id="delete-btn" class="material-symbols-rounded">delete</span>
+        </div>
       </div>
     </div>
+
 <script>
 // Selecting DOM elements
 const chatInput = document.querySelector("#chat-input");
@@ -301,70 +349,70 @@ let chatHistory = [];
 
 // Load data from localStorage on page load
 const loadDataFromLocalStorage = () => {
-    const themeColor = localStorage.getItem("themeColor");
+  const themeColor = localStorage.getItem("themeColor");
 
-    document.body.classList.toggle("light-mode", themeColor === "light_mode");
-    themeButton.innerText = document.body.classList.contains("light-mode") ? "dark_mode" : "light_mode";
+  document.body.classList.toggle("light-mode", themeColor === "light_mode");
+  themeButton.innerText = document.body.classList.contains("light-mode") ? "dark_mode" : "light_mode";
 
-    chatContainer.innerHTML = localStorage.getItem("all-chats") || '<div class="default-text"><h1>Welcome</h1><p>Start a conversation by typing a message.</p></div>';
-    chatContainer.scrollTo(0, chatContainer.scrollHeight);
+  chatContainer.innerHTML = localStorage.getItem("all-chats") || '<div class="default-text"><h1>Welcome</h1><p>Start a conversation by typing a message.</p></div>';
+  chatContainer.scrollTo(0, chatContainer.scrollHeight);
 }
 
 // Function to create a chat message element
 const createChatElement = (content, className) => {
-    const chatDiv = document.createElement("div");
-    chatDiv.classList.add("chat", className);
-    chatDiv.innerHTML = content;
-    return chatDiv;
+  const chatDiv = document.createElement("div");
+  chatDiv.classList.add("chat", className);
+  chatDiv.innerHTML = content;
+  return chatDiv;
 }
 
 // Function to fetch bot response from API
 const getChatResponse = async (message) => {
-    try {
-        const response = await fetch(API_URL, {
-            method: "POST",
-            headers: {
-                "Content-Type": "application/x-www-form-urlencoded"
-            },
-            body: new URLSearchParams({
-                prompt: message,
-                history: "[]",
-                temperature: "0.9",
-                max_new_tokens: "512",
-                top_p: "0.95",
-                repetition_penalty: "1.0"
-            })
-        });
-
-        if (!response.ok) {
-            throw new Error(`HTTP error! Status: ${response.status}`);
-        }
-
-        const data = await response.json();
-        return data.response;
-    } catch (error) {
-        console.error("Error fetching data:", error);
-        return "Oops! Something went wrong while fetching the response.";
+  try {
+    const response = await fetch(API_URL, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded"
+      },
+      body: new URLSearchParams({
+        prompt: message,
+        history: "[]",
+        temperature: "0.9",
+        max_new_tokens: "512",
+        top_p: "0.95",
+        repetition_penalty: "1.0"
+      })
+    });
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! Status: ${response.status}`);
     }
+
+    const data = await response.json();
+    return data.response;
+  } catch (error) {
+    console.error("Error fetching data:", error);
+    return "Oops! Something went wrong while fetching the response.";
+  }
 }
 
 // Function to display user message and bot response
 const showResponse = async (userMessage) => {
-    const userHtml = `<div class="chat-content">
+  const userHtml = `<div class="chat-content">
                         <div class="chat-details">
                             <img src="img/user.jpg">
                             <p>${userMessage}</p>
                         </div>
                     </div>`;
 
-    const outgoingChatDiv = createChatElement(userHtml, "outgoing");
-    chatContainer.querySelector(".default-text")?.remove();
-    chatContainer.appendChild(outgoingChatDiv);
-    chatContainer.scrollTo(0, chatContainer.scrollHeight);
+  const outgoingChatDiv = createChatElement(userHtml, "outgoing");
+  chatContainer.querySelector(".default-text")?.remove();
+  chatContainer.appendChild(outgoingChatDiv);
+  chatContainer.scrollTo(0, chatContainer.scrollHeight);
 
-    const botResponse = await getChatResponse(userMessage);
+  const botResponse = await getChatResponse(userMessage);
 
-    const botHtml = `<div class="chat-content">
+  const botHtml = `<div class="chat-content">
                         <div class="chat-details">
                             <img src="img/chatbot.jpg">
                             <p>${botResponse}</p>
@@ -376,50 +424,50 @@ const showResponse = async (userMessage) => {
                         </div>
                     </div>`;
 
-    const incomingChatDiv = createChatElement(botHtml, "incoming");
-    chatContainer.appendChild(incomingChatDiv);
-    chatContainer.scrollTo(0, chatContainer.scrollHeight);
+  const incomingChatDiv = createChatElement(botHtml, "incoming");
+  chatContainer.appendChild(incomingChatDiv);
+  chatContainer.scrollTo(0, chatContainer.scrollHeight);
 
-    // Update chat history
-    chatHistory.push([userMessage, botResponse]);
-    localStorage.setItem("all-chats", chatContainer.innerHTML);
+  // Update chat history
+  chatHistory.push([userMessage, botResponse]);
+  localStorage.setItem("all-chats", chatContainer.innerHTML);
 }
 
 // Event listener for sending messages
 const handleOutgoingChat = () => {
-    const userMessage = chatInput.value.trim();
-    if (!userMessage) return;
+  const userMessage = chatInput.value.trim();
+  if (!userMessage) return;
 
-    chatInput.value = "";
-    chatInput.style.height = `${initialInputHeight}px`;
+  chatInput.value = "";
+  chatInput.style.height = `${initialInputHeight}px`;
 
-    showResponse(userMessage);
+  showResponse(userMessage);
 }
 
 // Event listeners
 sendButton.addEventListener("click", handleOutgoingChat);
 
 deleteButton.addEventListener("click", () => {
-    localStorage.removeItem("all-chats");
-    loadDataFromLocalStorage();
+  localStorage.removeItem("all-chats");
+  loadDataFromLocalStorage();
 });
 
 themeButton.addEventListener("click", () => {
-    document.body.classList.toggle("light-mode");
-    localStorage.setItem("themeColor", themeButton.innerText);
-    themeButton.innerText = document.body.classList.contains("light-mode") ? "dark_mode" : "light_mode";
+  document.body.classList.toggle("light-mode");
+  localStorage.setItem("themeColor", themeButton.innerText);
+  themeButton.innerText = document.body.classList.contains("light-mode") ? "dark_mode" : "light_mode";
 });
 
 chatInput.addEventListener("input", () => {
-    chatInput.style.height = `${initialInputHeight}px`;
-    chatInput.style.height = `${chatInput.scrollHeight}px`;
+  chatInput.style.height = `${initialInputHeight}px`;
+  chatInput.style.height = `${chatInput.scrollHeight}px`;
 });
 
 chatInput.addEventListener("keydown", (e) => {
-    if (e.key === "Enter" && !e.shiftKey && window.innerWidth > 800) {
-        e.preventDefault();
-        handleOutgoingChat();
-    }
+  if (e.key === "Enter" && !e.shiftKey && window.innerWidth > 800) {
+    e.preventDefault();
+    handleOutgoingChat();
+  }
 });
 
 // Initial input height calculation
@@ -429,32 +477,32 @@ const initialInputHeight = chatInput.scrollHeight;
 loadDataFromLocalStorage();
 
 // Function to copy bot response to clipboard
-const copyToClipboard = (element) => {
-    const botResponse = element.parentElement.querySelector("p").textContent;
-    navigator.clipboard.writeText(botResponse);
-    alert("Bot response copied to clipboard!");
+function copyToClipboard(element) {
+  const botResponse = element.parentElement.querySelector("p").textContent;
+  navigator.clipboard.writeText(botResponse);
+  alert("Bot response copied to clipboard!");
 }
 
 // Function to regenerate bot response
-const regenerateResponse = async (element) => {
-    const userMessage = element.parentElement.previousElementSibling.textContent;
-    const newBotResponse = await getChatResponse(userMessage);
-
+function regenerateResponse(element) {
+  const userMessage = element.parentElement.previousElementSibling.textContent;
+  getChatResponse(userMessage).then(newBotResponse => {
     element.parentElement.querySelector("p").textContent = newBotResponse;
+  });
 }
 
 // Function to undo bot response
-const undoResponse = (element) => {
-    const botResponse = element.parentElement.querySelector("p");
-    const userMessage = element.parentElement.previousElementSibling.textContent;
+function undoResponse(element) {
+  const botResponse = element.parentElement.querySelector("p");
+  const userMessage = element.parentElement.previousElementSibling.textContent;
 
-    const newBotResponse = chatHistory[chatHistory.length - 1][1];
-    const index = chatHistory.findIndex(message => message[0] === userMessage);
-    chatHistory.splice(index, 1);
+  const newBotResponse = chatHistory[chatHistory.length - 1][1];
+  const index = chatHistory.findIndex(message => message[0] === userMessage);
+  chatHistory.splice(index, 1);
 
-    botResponse.textContent = newBotResponse;
-    localStorage.setItem("all-chats", chatContainer.innerHTML);
+  botResponse.textContent = newBotResponse;
+  localStorage.setItem("all-chats", chatContainer.innerHTML);
 }
-        </script>
+</script>
   </body>
-</html>
+</html>