<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();
}
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.