Created
January 20, 2023 07:50
-
-
Save Kd-Here/a123319d33bcd688b2883989e65c39a9 to your computer and use it in GitHub Desktop.
JS Chatbot
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div id="container" class="container"> | |
<img src="https://cdn.pixabay.com/photo/2020/01/02/16/38/chatbot-4736275_960_720.png" height="400vh" alt="Chatbot clipart"> | |
<div id="chat" class="chat"> | |
<div id="messages" class="messages"></div> | |
<input id="input" type="text" placeholder="Write something..." autocomplete="off" autofocus="true" /> | |
</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const inputField = document.getElementById("input"); | |
inputField.addEventListener("keydown", (e) => { | |
if (e.code === "Enter") { | |
let input = inputField.value; | |
inputField.value = ""; | |
output(input); | |
} | |
}); | |
function output(input) { | |
let product; | |
let text = input.toLowerCase().replace(/[^\w\s\d]/gi, ""); | |
text = text | |
.replace(/ a /g, " ") | |
.replace(/whats/g, "what is") | |
.replace(/please /g, "") | |
.replace(/ please/g, "") | |
.replace(/r u/g, "are you"); | |
if (compare(utterances, answers, text)) { | |
// Search for exact match in triggers | |
product = compare(utterances, answers, text); | |
} | |
else { | |
product = alternatives[Math.floor(Math.random() * alternatives.length)]; | |
} | |
addChatEntry(input, product); | |
} | |
function compare(utterancesArray, answersArray, string) { | |
let reply; | |
let replyFound = false; | |
for (let x = 0; x < utterancesArray.length; x++) { | |
for (let y = 0; y < utterancesArray[x].length; y++) { | |
if (utterancesArray[x][y] === string) { | |
let replies = answersArray[x]; | |
reply = replies[Math.floor(Math.random() * replies.length)]; | |
replyFound = true; | |
break; | |
} | |
} | |
if (replyFound) { | |
break; | |
} | |
} | |
return reply; | |
} | |
function addChatEntry(input, product) { | |
const messagesContainer = document.getElementById("messages"); | |
let userDiv = document.createElement("div"); | |
userDiv.id = "user"; | |
userDiv.className = "user response"; | |
userDiv.innerHTML = `<span>${input}</span>`; | |
messagesContainer.appendChild(userDiv); | |
let botDiv = document.createElement("div"); | |
let botText = document.createElement("span"); | |
botDiv.id = "bot"; | |
botDiv.className = "bot response"; | |
botText.innerText = "Typing..."; | |
botDiv.appendChild(botText); | |
messagesContainer.appendChild(botDiv); | |
messagesContainer.scrollTop = | |
messagesContainer.scrollHeight - messagesContainer.clientHeight; | |
setTimeout(() => { | |
botText.innerText = `${product}`; | |
}, 2000); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://codepen.io/tariq01/pen/yLVMQdw.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* { | |
box-sizing: border-box; | |
} | |
html { | |
height: 100%; | |
} | |
body { | |
font-family: 'Roboto', 'Oxygen', | |
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, Helvetica, | |
sans-serif; | |
-webkit-font-smoothing: antialiased; | |
-moz-osx-font-smoothing: grayscale; | |
background-color: silver; | |
height: 100%; | |
margin: 0; | |
} | |
span { | |
padding-right: 15px; | |
padding-left: 15px; | |
} | |
.container { | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
width: 100%; | |
height: 100%; | |
} | |
.chat { | |
height: 300px; | |
width: 50vw; | |
display: flex; | |
flex-direction: column; | |
justify-content: center; | |
align-items: center; | |
} | |
::-webkit-input-placeholder { | |
color: .711 | |
} | |
input { | |
border: 0; | |
padding: 15px; | |
margin-left: auto; | |
border-radius: 10px; | |
} | |
.messages { | |
display: flex; | |
flex-direction: column; | |
overflow: scroll; | |
height: 90%; | |
width: 100%; | |
background-color: white; | |
padding: 15px; | |
margin: 15px; | |
border-radius: 10px; | |
} | |
#bot { | |
margin-right: auto; | |
} | |
#user { | |
margin-left: auto; | |
} | |
.bot { | |
font-family: Consolas, 'Courier New', Menlo, source-code-pro, Monaco, | |
monospace; | |
} | |
.avatar { | |
height: 25px; | |
} | |
.response { | |
display: flex; | |
align-items: center; | |
margin: 1%; | |
} | |
/* Mobile */ | |
@media only screen and (max-width: 980px) { | |
.container { | |
flex-direction: column; | |
justify-content: flex-start; | |
} | |
.chat { | |
width: 75vw; | |
margin: 10vw; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment