211 lines
7.1 KiB
HTML
211 lines
7.1 KiB
HTML
<!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> |