Added simple chat bot
This commit is contained in:
211
repo_chat_bots/OOP_Chatbot.html
Normal file
211
repo_chat_bots/OOP_Chatbot.html
Normal file
@@ -0,0 +1,211 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>OOP ChatBot</title>
|
||||
<style>
|
||||
#chatbox {
|
||||
border: 1px solid #ccc;
|
||||
height: 300px;
|
||||
overflow-y: scroll;
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
.user {
|
||||
text-align: right;
|
||||
color: blue;
|
||||
margin: 5px 0;
|
||||
}
|
||||
.bot {
|
||||
text-align: left;
|
||||
color: green;
|
||||
margin: 5px 0;
|
||||
/* }
|
||||
.input-area {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
#userInput {
|
||||
flex: 1;
|
||||
padding: 8px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
}
|
||||
button {
|
||||
padding: 8px 16px;
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0056b3;
|
||||
}*/
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h2>OOP ChatBot</h2>
|
||||
<div id="chatbox"></div>
|
||||
<div class="input-area">
|
||||
<input type="text" id="userInput" placeholder="Ask me something...">
|
||||
<button id="sendButton">Send</button>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Message Class - Represents a single message
|
||||
class Message {
|
||||
constructor(sender, text = new Date()) {
|
||||
this.sender = sender; // 'user' or 'bot'
|
||||
this.text = text;
|
||||
}
|
||||
|
||||
getFormattedText() {
|
||||
return `${this.sender.charAt(0).toUpperCase() + this.sender.slice(1)}: ${this.text}`;
|
||||
}
|
||||
}
|
||||
|
||||
// MessageProcessor Class - Handles bot response logic
|
||||
class MessageProcessor {
|
||||
constructor() {
|
||||
this.rules = [
|
||||
{
|
||||
pattern: (input) => input.includes("hello") || input.includes("hi"),
|
||||
response: "Hello! How can I help you?"
|
||||
},
|
||||
{
|
||||
pattern: (input) => input.includes("bye") || input.includes("goodbye"),
|
||||
response: "Goodbye! Have a great day!"
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
processInput(input) {
|
||||
const cleanInput = input.toLowerCase().trim();
|
||||
|
||||
if (!cleanInput) {
|
||||
return "Please type something!";
|
||||
}
|
||||
|
||||
// Find the first matching rule
|
||||
const matchingRule = this.rules.find(rule => rule.pattern(cleanInput));
|
||||
|
||||
return matchingRule ? matchingRule.response : "I'm not sure how to answer that yet.";
|
||||
}
|
||||
|
||||
addRule(pattern, response) {
|
||||
this.rules.push({ pattern, response });
|
||||
}
|
||||
}
|
||||
|
||||
// ChatInterface Class - Manages UI interactions
|
||||
class ChatInterface {
|
||||
constructor() {
|
||||
this.chatbox = document.getElementById('chatbox');
|
||||
this.userInput = document.getElementById('userInput');
|
||||
this.sendButton = document.getElementById('sendButton');
|
||||
}
|
||||
|
||||
displayMessage(message) {
|
||||
const messageElement = document.createElement('div');
|
||||
messageElement.classList.add(message.sender);
|
||||
messageElement.textContent = message.getFormattedText();
|
||||
|
||||
this.chatbox.appendChild(messageElement);
|
||||
this.chatbox.scrollTop = this.chatbox.scrollHeight;
|
||||
}
|
||||
|
||||
getInputText() {
|
||||
return this.userInput.value;
|
||||
}
|
||||
|
||||
clearInput() {
|
||||
this.userInput.value = '';
|
||||
}
|
||||
|
||||
setupEventListeners(onSendMessage) {
|
||||
this.sendButton.addEventListener('click', onSendMessage);
|
||||
|
||||
this.userInput.addEventListener('keypress', (e) => {
|
||||
if (e.key === 'Enter') {
|
||||
onSendMessage();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Main ChatBot Application Class
|
||||
class ChatBotApp {
|
||||
constructor() {
|
||||
this.interface = new ChatInterface();
|
||||
this.processor = new MessageProcessor();
|
||||
this.messageHistory = [];
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
// Set up event listeners with bound context
|
||||
this.interface.setupEventListeners(() => this.handleUserMessage());
|
||||
|
||||
// Welcome message
|
||||
const welcomeMessage = new Message('bot', "Welcome! I'm your rule-based chatbot. Try saying 'hello'!");
|
||||
this.interface.displayMessage(welcomeMessage);
|
||||
this.messageHistory.push(welcomeMessage);
|
||||
}
|
||||
|
||||
handleUserMessage() {
|
||||
const userText = this.interface.getInputText();
|
||||
|
||||
if (!userText.trim()) return;
|
||||
|
||||
// Create and display user message
|
||||
const userMessage = new Message('user', userText);
|
||||
this.interface.displayMessage(userMessage);
|
||||
this.messageHistory.push(userMessage);
|
||||
|
||||
// Process and display bot response
|
||||
const botResponse = this.processor.processInput(userText);
|
||||
const botMessage = new Message('bot', botResponse);
|
||||
|
||||
// Small delay for more natural conversation flow
|
||||
setTimeout(() => {
|
||||
this.interface.displayMessage(botMessage);
|
||||
this.messageHistory.push(botMessage);
|
||||
}, 500);
|
||||
|
||||
this.interface.clearInput();
|
||||
}
|
||||
|
||||
// Public method to add custom rules
|
||||
addCustomRule(pattern, response) {
|
||||
this.processor.addRule(pattern, response);
|
||||
}
|
||||
|
||||
// Public method to get conversation history
|
||||
getConversationHistory() {
|
||||
return [...this.messageHistory];
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize the chatbot when the page loads
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const chatBot = new ChatBotApp();
|
||||
|
||||
// Example of adding custom rules dynamically
|
||||
chatBot.addCustomRule(
|
||||
(input) => input.includes("weather"),
|
||||
"I don't have access to weather data, but I hope it's nice where you are!"
|
||||
);
|
||||
|
||||
chatBot.addCustomRule(
|
||||
(input) => input.includes("help"),
|
||||
"I can respond to greetings, questions about how I am, farewells, and more! Just try talking to me."
|
||||
);
|
||||
|
||||
// Make chatbot globally available for testing in console
|
||||
window.chatBot = chatBot;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user