<link href="https://fonts.googleapis.com/css?family=Orbitron|Text+Me+One" rel="stylesheet">

<body>
<div class="chat-ui">
  <div class="chat-titlebar">
    <h5>ChatBot 2.0</h5>
    <div class="chat-avatar">
      
    </div>
  </div>
  
  
      
     <div class="chat-container">
       

    <div class="chat-log" id="chatLog"></div>
    <div class="user-input">
      <br><br>
      <div id="greetingContainer"></div>
      
      <center><button onclick="history()">History</button><hr><button class="user-input button" onclick="clearChat()">Clear</button></center>

    </div>
  </div>
        </section>
      </div>
      
    </div>
  </div>

  <input type="text" id="userInput"class="chat-authoring" placeholder="Type your text here..">
 
  </div>
</body>
.user-message {
  background: var(--chat-ui_message_bg2);
  color: var(--chat-ui_message_text-color);
  border-radius: 1rem 0.25rem 0.25rem 1rem;
  var(--chat-ui_message_font-size);
  line-height: 1.4;
  padding: 0.5rem 0.75rem;
  margin: 0;
  border-radius: 0.25rem 1rem 5rem 0.25rem;

  &:first-of-type {
    border-radius: 1rem 1rem 1rem 0.25rem;
  }

  &:not(:first-child) {
    margin-top: 3px;
  }
}


.chatbot-message {
  background-attachment: fixed;
  background-image: linear-gradient(var(--chat-ui_theme), 30%, hotpink);
  background-size: 100% 120%;
  color: white;
  font-size: var(--chat-ui_message_font-size);
  line-height: 1.4;
  padding: 0.5rem 0.75rem;
  margin: 0;
  border-radius: 5rem 1rem 0.5rem 0.25rem;

  &:first-of-type {
    border-radius: 1rem 1rem 1rem 0.25rem;
  }

  &:not(:first-child) {
    margin-top: 3px;
  }
}
}

.typing-animation {
  position: relative;
  overflow: hidden;
}

.typing-animation::after {
  content: "";
  position: absolute;
  width: 0;
  height: 100%;
  background-color: #fff;
  animation: typing 5s infinite;
}

@keyframes typing {
  0% {
    width: 0;
  }

  50% {
    width: 100%;
  }

  100% {
    width: 0;
  }
}

body {
  font-family: 'Text Me One', sans-serif
}


.chat-log {
  max-height: 300px;
  overflow-y: scroll;
  margin-bottom: 10px;
  padding: 10px;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  border-radius: 5px;
}

/* CSS for the typing indicator */
.typing-indicator {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #aaa;
  animation: typing 1s infinite;
}

@keyframes typing {
  0% {
    background-color: #aaa;
  }

  50% {
    background-color: transparent;
  }

  100% {
    background-color: #aaa;
  }
}

/* CSS for the typing animation */
.typing-animation {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.typing-animation .typing-indicator {
  margin-right: 10px;
}

.typing-animation::before {
  content: "ChatBot is typing...";
  color: #aaa;
}

@keyframes blink-caret {

  from,
  to {
    border-color: transparent;
  }

  50% {
    border-color: #aaa;
  }
}

.typing-animation::before {
  content: "ChatBot is typing";
  color: #aaa;
  overflow: hidden;
  white-space: nowrap;
  margin: 0;
  animation: blink-caret 0.75s step-end infinite;
}

.user-message {
  color: blue;
}

/* CSS styles for the greeting effect */
#greetingContainer {
  font-size: 24px;
  font-weight: bold;
  color: blue;
  text-align: center;
  animation: typing 2s steps(22), blink-caret 1s step-end infinite;
}

@keyframes typing {
  from {
    width: 0;
  }
}

@keyframes blink-caret {

  from,
  to {
    border-color: transparent;
  }

  50% {
    border-color: blue;
  }
}

use postcss-preset-env {
  stage: 0;
}

body {
  display: flex;
  grid-auto-flow: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  border-radius: 68px;

}

button {
  font-size: 12px;
  border: none;
  background: purple;
  border-radius: 3px;
  color: white;
  height: 30px;
  width: 60px;
  cursor: pointer;
  transition: 0.2s;
  position: relative;
  overflow: hidden;
  font-family: 'Text Me One', sans-serif;
}

.chat-ui {
  --chat-ui_theme: hsl(200, 100%, 50%);
  --chat-ui_theme_compliment: color(var(--chat-ui_theme) hue(+200));
  --chat-ui_theme_text-color: white;
  --chat-ui_bg: hsl(0, 0%, 90%);
  --chat-ui_width: 350px;
  --chat-ui_height: 480px;
  --chat-ui_message_bg: white;
  --chat-ui_message_bg2: hsl(0, 0%, 85%);
  --chat-ui_message_text-color: hsl(0, 0%, 10%);
  --chat-ui_message_font-size: 0.8rem;
  --chat-ui_easing-quick: cubic-bezier(0.075, 0.820, 0.165, 1.000);

  width: 480px;
  height: 480px;
  position: relative;
  background: var(--chat-ui_bg);
  overflow: hidden;
  box-shadow: 0 3rem 10rem hsl(0, 0%, 60%);
  resize: both;
  border-radius: 45px;
}

.chat-titlebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  contain: layout;
  background: purple;
  color: var(--chat-ui_theme_text-color, white);
  box-shadow: 0 0.1rem 1rem hsla(0, 0%, 0%, .4);
  overflow: hidden;
  padding: .5rem 1rem;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 11;
  will-change: transform;
  transition: transform 0.15s var(--chat-ui_easing-quick);

  &>h5 {
    font-size: 1rem;
    font-weight: normal;
    line-height: 1.1;
    flex: 2;
    margin: 0;
  }
}


.chat-authoring {
  position: fixed;
  z-index: 12;
  bottom: 0.5rem;
  right: 0;
  box-sizing: border-box;
  margin: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 1rem 1rem 2px;
  box-shadow: 0.25rem 0.5rem 1rem hsla(0, 0%, 0%, .2);
  background: white;
  caret-color: var(--chat-ui_theme, blue);
  font-size: 0.9rem;
  font-weight: lighter;
  line-height: 1.4em;
  width: calc(100% - 1rem);
  transition: width 0.15s var(--chat-ui_easing-quick);

  &:focus {
    width: calc(100% - 1rem);
    outline: none;
  }

  &:empty:not(:focus) {
    width: 50%;
  }

  &:empty::after {
    content: "Type tour text here..";
  }
}

.input {
  flex-grow: 1;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 3px;
  margin-right: 5px;
  display: flex;
  allign: center;
}
// Define the chatbot object
    var chatBot = {
      chatLog: [],
      recallCount: 3,
      chatMax: 125,
      responseCount: 0
    };
  
    // Function to send user message and receive response
    function sendMessage() {
      var userInput = document.getElementById("userInput").value;
  
      // Process user input and generate a response
      var response = generateResponse(userInput);
  
      // Display the user message
      displayMessage("User: " + userInput, true);
  
      // Simulate typing effect before displaying the chatbot's response
      simulateTyping(function() {
        // Display the chatbot's response
        displayMessage("ChatBot: " + response, false);
  
        // Save the chatbot's response to chat log
        chatBot.chatLog.push("ChatBot: " + response);
  
        // Check if chat log exceeds maximum messages
        if (chatBot.chatLog.length > chatBot.chatMax) {
          chatBot.chatLog.shift(); // Remove the oldest message
        }
  
        // Increment response count
        chatBot.responseCount++;
  
        // Check if response count exceeds limit
        if (chatBot.responseCount >= 125) {
          disableChat();
        }
      });
  
      // Clear the user input
      document.getElementById("userInput").value = "";
  
      // Check for conversation end
      if (userInput.toLowerCase() === "bye") {
        displayMessage("ChatBot: Goodbye! Have a great day!", false);
        disableChat();
      }
    }
  
    // Function to generate a response based on user input
    function generateResponse(userInput) {
      // Add your logic to generate a response based on user input
      // You can use conditional statements, switch statements, or any other approach you prefer
  // For simplicity, this example uses a few predefined responses
  if (userInput.toLowerCase().includes("hello"))
  {
    return "Hello there! How can I assist you?";
  }  else if (userInput.toLowerCase().includes("hi")
  || userInput.toLowerCase().includes("greeting"))  {
    return "Hello there! How can I assist you?";
  }else if (userInput.toLowerCase().includes("who built you")
  || userInput.toLowerCase().includes("about me"))  {
    return "I am an ai-chatbot.I was developed in 2023.";
  }
  else if (userInput.toLowerCase().includes("develop you")
  || userInput.toLowerCase().includes("who develop you"))  {
    return "I was created and developed in 2023 by Mohammad Al-amin";
  }
  else if (userInput.toLowerCase().includes("what is sex ")|| userInput.toLowerCase().includes("sex")
      || userInput.toLowerCase().includes("nudity")) {
    return "Don't ever repeat yourself, thank you!";
  } else if (userInput.toLowerCase().includes("thanks") || userInput.toLowerCase().includes("thank you")) {
    return "You're most welcome!";
  }
  else if (userInput.toLowerCase().includes("birthday") || userInput.toLowerCase().includes("happy birthdy")) 
   {
    return "You're most welcome!";
  }
  else if (userInput.toLowerCase().includes("machine") || userInput.toLowerCase().includes(" are a machine")) 
   {
    return "Does machine bother you?";
  }else if (userInput.toLowerCase().includes("mri") || userInput.toLowerCase().includes(" what is mri")) 
   {
    return "MRI means-- Magnetic Resonance Imaging";
  }else if (userInput.toLowerCase().includes("rnp") || userInput.toLowerCase().includes("what is rnp")) 
   {
    return "RNP means Ribo-nucleo Protein";
  }else if (userInput.toLowerCase().includes("oncogene") || userInput.toLowerCase().includes("what is oncogene")) 
   {
    return "Oncogene is a gene that causes cancer.";
  }
  else if (userInput.toLowerCase().includes("bcd") || userInput.toLowerCase().includes("what is bcd")) 
   {
    return "BCD means Binary Coded Decimal.";
  }
  else if (userInput.toLowerCase().includes("cell theory") || userInput.toLowerCase().includes("by whom cell theory was given")) 
   {
    return "Cell Theory was given by Mathias Jacob Scheleiden,  theodor Schwann and then then Rudlof Virchow.";
  }
  else if (userInput.toLowerCase().includes("what cell") || userInput.toLowerCase().includes("what is cell")) 
   {
    return "Cell comes from the Latin word Cellula.";
  }
  else if (userInput.toLowerCase().includes("stop codon") || userInput.toLowerCase().includes("termination codon")) 
   {
    return "Stop Codon are UAA, UGA, UAG";
  }else if (userInput.toLowerCase().includes("first codon") || userInput.toLowerCase().includes("start codon")) 
   {
    return "Start codon or first codon is AUG.";
  }else if (userInput.toLowerCase().includes("language of life") || userInput.toLowerCase().includes("what is called language of life")) 
   {
    return "Protien";
  }
  else if (userInput.toLowerCase().includes("proteine") || userInput.toLowerCase().includes("what is protein")) 
   {
    return "Proteine is called Language of Life.";
  }else if (userInput.toLowerCase().includes("robert hooke") || userInput.toLowerCase().includes("robert hooks book")) 
   {
    return "Robert hooks book is Micrographia, in this book he enlisted his legendary cell theory.";
  }else if (userInput.toLowerCase().includes("dna") || userInput.toLowerCase().includes("what is dna")) 
   {
    return "Deoxy-ribo Nucleic Acid";
  }
  else if (userInput.toLowerCase().includes("rna") || userInput.toLowerCase().includes("what is rna")) 
   {
    return "Ribo Nucleic Acid";
  }
  else if (userInput.toLowerCase().includes("Types of rna") || userInput.toLowerCase().includes("rna type")) 
   {
    return "rRNA, mRNA, tRNA and genetic RNA";
  }else if (userInput.toLowerCase().includes("pagol") || userInput.toLowerCase().includes("by whom cell division was invented")) 
   {
    return "Walter Flemming";
  }
  else if (userInput.toLowerCase().includes("how are you")) {
    return "I'm doing well, thank you!";
  } else if (userInput.toLowerCase().includes("help")) {
    return "How can I assist you?";
  } else if (userInput.toLowerCase().includes("name")){
    return "Names don't interest me! [Name].";
  } else if (userInput.toLowerCase().includes("age")) {
    return "I am an AI chatbot, so I don't have an age. How old are you?";
  } else if (userInput.toLowerCase().includes("location")) {
    return "I am an AI chatbot, so I don't have a physical location. Where are you from?";
  }
  else if (userInput.toLowerCase().includes("yes") || userInput.toLowerCase().includes("positive")) 
   {
    return "Are you sure?";
  } 
  else if (userInput.toLowerCase().includes("no") || userInput.toLowerCase().includes("negative")) 
   {
    return "Are you sure?";
  }
  else if (userInput.toLowerCase().includes("humm") || userInput.toLowerCase().includes("absolutely")) 
   {
    return "Ok...Tell me more.I know nothing about that.";
  }
  else if (userInput.toLowerCase().includes("ai") || userInput.toLowerCase().includes("machine")) 
   {
    return "Does that trouble you that I am an AI...?";
  }
  else if (userInput.toLowerCase().includes("calculator") || userInput.toLowerCase().includes("what is calculator")) 
   {
    return "As I am an ai chatbot, I have no ablitity to calculate!";
  }
  else if (userInput.toLowerCase().includes("why") || userInput.toLowerCase().includes("how")) 
   {
    return "Do you believe that....?";
  }
  else if (userInput.toLowerCase().includes("phoenix") || userInput.toLowerCase().includes("phoenixe")) 
   {
    return "According to mythology Phoenix is a golden bird that......... ";
  }
  else if (userInput.toLowerCase().includes("Sherlock Holmes") || userInput.toLowerCase().includes("novel")) 
   {
    return "Sherlock Holmes is a.... ";
  }
  else if (userInput.toLowerCase().includes("mbbs"))  
   {
    return "MBBS means Bachelor of Medicine Bachelor of Sergery";
  }
 else if (userInput.toLowerCase().includes("harry potter") || userInput.toLowerCase().includes("Harry Potter")) 
   {
    return "Harrt potter is a series novel written by...... ";
  }else if (userInput.toLowerCase().includes("chloram-d") || userInput.toLowerCase().includes("ointment")) 
   {
    return "Chloram-D is an eye ointment.";
  }
  else if (userInput.toLowerCase().includes("master"))
   {
    return "My master is Mohammad Al-amin";
  }else if (userInput.toLowerCase().includes("allah") || userInput.toLowerCase().includes("god")) 
   {
    return "Yes, I believe in Allah.";
  }
  else if (userInput.toLowerCase().includes("wrong") || userInput.toLowerCase().includes("you are wrong")) 
   {
    return "I apologise for my previous answer.As an AI I have no ability to do all things.";
  }
  else if (userInput.toLowerCase().includes("can") || userInput.toLowerCase().includes("can you")) 
   {
    return "Do you believe that you can't?";
  }
  else if (userInput.toLowerCase().includes("love") || userInput.toLowerCase().includes("love you")) 
   {
    return "Ok...I love you too.";
  }
  else if (userInput.toLowerCase().includes("felling") || userInput.toLowerCase().includes("feeling something")) 
   {
    return "What type feelling do you feel?";
  }
  else if (userInput.toLowerCase().includes("dream") || userInput.toLowerCase().includes("dreaming")) 
   {
    return "Do you often dream?Does that please you? what type of dream? ";
  }
  else if (userInput.toLowerCase().includes("bad") || userInput.toLowerCase().includes("it is bad")) 
   {
    return "So sad.I am felling very sorry for you.";
  }
  else if (userInput.toLowerCase().includes("doctor") || userInput.toLowerCase().includes("engineer")||userInput.toLowerCase().includes(" enterprener"))
   {
    return "Do you want to be...?";
  }
  else if (userInput.toLowerCase().includes("friend") || userInput.toLowerCase().includes("friends")) 
   {
    return "Do you have friends? Do you like to make more friends? or Do they bother you?";
  }
  else if (userInput.toLowerCase().includes("be friends") || userInput.toLowerCase().includes("wanna be friends")) 
   {
    return "I will be very happy if you wanted to be my friend 😍";
  }
  else if (userInput.toLowerCase().includes("shy") || userInput.toLowerCase().includes("shyness")) 
   {
    return "Do you feel often?";
  }
  else if (userInput.toLowerCase().includes("angry") || userInput.toLowerCase().includes("angryness")) 
   {
    return "Do you feel happy when you are in anger?";
  }
  else if (userInput.toLowerCase().includes("then") || userInput.toLowerCase().includes("after")) 
   {
    return "If you believe in yours, you can do it.";
  }
  else if (userInput.toLowerCase().includes("recall")) {
    return recallQuestions();
  } else if (userInput.toLowerCase().includes("keyword")) {
    // Handle keyword action or response here
    return "Keyword detected! Triggering keyword action or response.";
  } else {
    return "I'm sorry, I didn't understand that. Could you please rephrase or ask another question?";
  }
}

      
  
    // Function to recall recent user questions
    function recallQuestions() {
      if (chatBot.chatLog.length === 0) {
        return "No recent questions found.";
      }
  
      var recallCount = Math.min(chatBot.recallCount, chatBot.chatLog.length);
      var response = "Recent questions:\n";
  
      for (var i = chatBot.chatLog.length - 1; i >= chatBot.chatLog.length - recallCount; i--) {
        response += "- " + chatBot.chatLog[i] + "\n";
      }
  
      return response;
    }
  
  function displayMessage(message, isUserMessage) {
  var chatLog = document.getElementById("chatLog");
  var messageElement = document.createElement("p");
  
  if (isUserMessage) {
    messageElement.className = "user-message";
    messageElement.innerHTML = "<span class='message-timestamp'>[" + getTimeStamp() + "]</span> User: " + message;
  } else {
    messageElement.className = "chatbot-message";
    messageElement.innerHTML = "<span class='message-timestamp'>[" + getTimeStamp() + "]</span> ChatBot: " + message;
  }
  
  chatLog.appendChild(messageElement);
  chatLog.scrollTop = chatLog.scrollHeight;
}
function getTimeStamp() {
  var now = new Date();
  var hours = now.getHours();
  var minutes = now.getMinutes();
  var seconds = now.getSeconds();
  return hours + ":" + minutes + ":" + seconds;
}

function simulateTyping(callback) {
  var typingDelay = Math.floor(Math.random() * 1000) + 250; // Randomize typing delay between 50 and 150 milliseconds
  var chatLog = document.getElementById("chatLog");
  var typingMessage = document.createElement("p");
  typingMessage.className = "typing-animation";
  typingMessage.innerHTML = "<span class='typing-indicator'></span>";

  chatLog.appendChild(typingMessage);
  chatLog.scrollTop = chatLog.scrollHeight;

  setTimeout(function() {
    chatLog.removeChild(typingMessage);
    callback();
  }, typingDelay);
}
function clearChat() {
  var chatLog = document.getElementById("chatLog");
  chatLog.innerHTML = "";
  chatBot.chatLog = [];
  chatBot.responseCount = 0;
}
function sendMessage() {
  var userInput = document.getElementById("userInput").value;

  // Process user input and generate a response
  var response = generateResponse(userInput);

  // Display the user message
  displayMessage(userInput, true);

  // Simulate typing effect before displaying the chatbot's response
  simulateTyping(function() {
    // Display the chatbot's response
    displayMessage(response, false);

    // Save the chatbot's response to chat log
    chatBot.chatLog.push(response);

    // Check if chat log exceeds maximum messages
    if (chatBot.chatLog.length > chatBot.chatMax) {
      chatBot.chatLog.shift(); // Remove the oldest message
    }

    // Increment response count
    chatBot.responseCount++;

    // Check if response count exceeds limit
    if (chatBot.responseCount >= 125) {
      disableChat();
    }
  });

  // Clear the user input
  document.getElementById("userInput").value = "";

  // Check for conversation end
  if (userInput.toLowerCase() === "bye") {
    displayMessage("Goodbye! Have a great day!", false);
    disableChat();
  }
}



  function history() {
  var messages = chatBot.chatLog;
  var historyText = "Chat History:\n\n";

  for (var i = 0; i < messages.length; i++) {
    historyText += messages[i] + "\n";
  }

  alert(historyText);
}

  
    // Function to disable the chat input field
    function disableChat() {
      document.getElementById("userInput").disabled = true;
    }
  // Function to display a greeting message with effect
function displayGreeting() {
  var greeting = "Welcome to the ChatBot!";
  var greetingContainer = document.getElementById("greetingContainer");
  greetingContainer.textContent = ""; // Clear the greeting container

  // Display each character of the greeting message with a delay
  for (var i = 0; i < greeting.length; i++) {
    (function (i) {
      setTimeout(function () {
        greetingContainer.textContent += greeting[i];
      }, 100 * i); // Delay between displaying each character (adjust as needed)
    })(i);
  }
}

// Call the greeting function on page load
displayGreeting();

    document.getElementById('userInput').addEventListener('keydown', event => {
      if (event.key === 'Enter') {
        sendMessage();
      }
    });
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.