|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<title>Chatbot</title> |
|
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> |
|
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> |
|
<style> |
|
#chatbot { |
|
position: fixed; |
|
bottom: 0; |
|
right: 0; |
|
width: 300px; |
|
height: 400px; |
|
background-color: white; |
|
border: 1px solid black; |
|
border-radius: 10px 0 0 0; |
|
overflow: hidden; |
|
} |
|
#chatbot .header { |
|
background-color: #007bff; |
|
color: white; |
|
padding: 10px; |
|
font-size: 20px; |
|
font-weight: bold; |
|
text-align: center; |
|
} |
|
#chatbot .messages { |
|
height: 300px; |
|
overflow-y: scroll; |
|
padding: 10px; |
|
} |
|
#chatbot .input { |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
padding: 10px; |
|
} |
|
#chatbot .input input { |
|
flex: 1; |
|
margin-right: 10px; |
|
} |
|
#chatbot .input button { |
|
background-color: #007bff; |
|
color: white; |
|
border: none; |
|
border-radius: 5px; |
|
padding: 5px 10px; |
|
cursor: pointer; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<div id="chatbot"> |
|
<div class="header">Chatbot</div> |
|
<div class="messages"> |
|
<div v-for="message in messages" :key="message.id"> |
|
<div v-if="message.type === 'bot'" style="font-weight: bold;">{{ message.text }}</div> |
|
<div v-else>{{ message.text }}</div> |
|
</div> |
|
</div> |
|
<div class="input"> |
|
<input type="text" v-model="input" @keyup.enter="sendMessage" /> |
|
<button @click="sendMessage">Send</button> |
|
</div> |
|
</div> |
|
<script> |
|
new Vue({ |
|
el: '#chatbot', |
|
data: { |
|
messages: [], |
|
input: '', |
|
}, |
|
methods: { |
|
sendMessage() { |
|
if (this.input.trim() === '') { |
|
return; |
|
} |
|
this.messages.push({ |
|
id: Date.now(), |
|
type: 'user', |
|
text: this.input, |
|
}); |
|
axios |
|
.post('/api/chatbot', { message: this.input }) |
|
.then((response) => { |
|
this.messages.push({ |
|
id: Date.now(), |
|
type: 'bot', |
|
text: response.data.message, |
|
}); |
|
}) |
|
.catch((error) => { |
|
console.error(error); |
|
}); |
|
this.input = ''; |
|
}, |
|
}, |
|
}); |
|
</script> |
|
</body> |
|
</html> |
