File size: 2,233 Bytes
42b93cf |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
document.addEventListener('DOMContentLoaded', () => {
const messageForm = document.getElementById('message-form');
const messageInput = document.getElementById('message-input');
const chatMessages = document.getElementById('chat-messages');
// Sample AI responses
const aiResponses = [
"I'm analyzing your request...",
"That's an interesting question!",
"Let me think about that for a moment.",
"Based on my knowledge, here's what I found...",
"I'd be happy to help with that!"
];
// Add a sample welcome message
addMessage('ai', "Hello! I'm your AI assistant. How can I help you today?");
messageForm.addEventListener('submit', (e) => {
e.preventDefault();
const message = messageInput.value.trim();
if (message) {
// Add user message
addMessage('user', message);
messageInput.value = '';
// Simulate AI thinking
setTimeout(() => {
const randomResponse = aiResponses[Math.floor(Math.random() * aiResponses.length)];
addMessage('ai', randomResponse);
}, 1000 + Math.random() * 2000);
}
});
function addMessage(sender, text) {
const messageElement = document.createElement('div');
messageElement.classList.add('message');
if (sender === 'user') {
messageElement.innerHTML = `
<div class="flex justify-end">
<div class="max-w-xs md:max-w-md lg:max-w-lg bg-indigo-600 text-white rounded-2xl px-4 py-2">
${text}
</div>
</div>
`;
} else {
messageElement.innerHTML = `
<div class="flex justify-start">
<div class="max-w-xs md:max-w-md lg:max-w-lg bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 rounded-2xl px-4 py-2">
${text}
</div>
</div>
`;
}
chatMessages.appendChild(messageElement);
chatMessages.scrollTop = chatMessages.scrollHeight;
}
}); |