Scribd
Upload
29 views3 pages

Project

The document is an HTML code for a Cybercrime Chatbot interface. It includes a chat container for displaying messages, an input field for user messages, and a button to send messages. The JavaScript code handles user input, fetches responses from a chatbot API, and maintains conversation history.

Uploaded by

22ada20
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
29 views3 pages

Project

The document is an HTML code for a Cybercrime Chatbot interface. It includes a chat container for displaying messages, an input field for user messages, and a button to send messages. The JavaScript code handles user input, fetches responses from a chatbot API, and maintains conversation history.

Uploaded by

22ada20
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

<!

DOCTYPE html>
<html>
<head>
<title>Cybercrime Chatbot</title>
<style>
body {
font-family: sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f4f4f4;
}

#chat-container {
width: 400px;
border: 1px solid #ccc;
background-color: white;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
height: 600px;
}

#chat-messages {
flex-grow: 1;
padding: 10px;
overflow-y: auto;
}

.message {
padding: 8px;
margin-bottom: 5px;
border-radius: 5px;
max-width: 80%;
}

.user-message {
background-color: #e0f7fa;
align-self: flex-end;
}

.bot-message {
background-color: #f0f0f0;
align-self: flex-start;
}

#input-container {
display: flex;
padding: 10px;
border-top: 1px solid #ccc;
}

#user-input {
flex-grow: 1;
padding: 8px;
border: 1px solid #ccc;
border-radius: 5px;
}

#send-button {
padding: 8px 15px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
margin-left: 5px;
cursor: pointer;
}
</style>
</head>
<body>

<div id="chat-container">
<div id="chat-messages"></div>
<div id="input-container">
<input type="text" id="user-input" placeholder="Type your message...">
<button id="send-button">Send</button>
</div>
</div>

<script>
const chatMessages = document.getElementById('chat-messages');
const userInput = document.getElementById('user-input');
const sendButton = document.getElementById('send-button');
let conversationHistory = [];

function addMessage(message, sender) {


const messageDiv = document.createElement('div');
messageDiv.classList.add('message', `${sender}-message`);
messageDiv.textContent = message;
chatMessages.appendChild(messageDiv);
chatMessages.scrollTop = chatMessages.scrollHeight;
conversationHistory.push({ role: sender, content: message });
}

async function getChatbotResponse(userMessage) {


const apiUrl = 'YOUR_API_ENDPOINT'; // Replace with your API endpoint
const apiKey = 'YOUR_API_KEY'; // Replace with your API key

try {
const response = await fetch(apiUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${apiKey}` // If needed
},
body: JSON.stringify({
messages: conversationHistory,
user_input: userMessage
})
});

if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
return data.response; // Adjust based on your API's response structure.

} catch (error) {
console.error('Error fetching chatbot response:', error);
return "Sorry, I'm having trouble connecting. Please try again later.";
}
}

async function handleUserInput() {


const userMessage = userInput.value;
if (userMessage.trim() !== '') {
addMessage(userMessage, 'user');
userInput.value = '';

const chatbotResponse = await getChatbotResponse(userMessage);


addMessage(chatbotResponse, 'bot');

//Example of storing the data.


if(conversationHistory.length > 5 && !localStorage.getItem("stored")) {
//replace with your actual server call.
console.log(JSON.stringify(conversationHistory));
localStorage.setItem("stored", "true");
}
}
}

sendButton.addEventListener('click', handleUserInput);
userInput.addEventListener('keypress', (event) => {
if (event.key === 'Enter') {
handleUserInput();
}
});

addMessage("Hello! I'm here to help with cybercrime. How can I assist you?",
"bot");
</script>

</body>
</html>

You might also like