79 lines
3.2 KiB
JavaScript
79 lines
3.2 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
|
lucide.createIcons();
|
|
|
|
const messagesContainer = document.getElementById('chat-messages');
|
|
const messageInput = document.getElementById('message-input');
|
|
const sendButton = document.getElementById('send-button');
|
|
|
|
const kaikaiAvatar = 'https://r2.flowith.net/files/o/1752574406770-thoughtful_kaikai_character_generation_index_1@1024x1024.png';
|
|
|
|
const kaikaiResponses = [
|
|
'你好，我是开开，很高兴能在这里陪你聊天。',
|
|
'有什么心事都可以和我说哦，我一直在听。',
|
|
'今天过得怎么样？我很关心你。',
|
|
'在呢在呢，随时都在。',
|
|
'能和你聊天，感觉真好。',
|
|
'嗯嗯，我在听，请继续说。',
|
|
'这是一个很有趣的想法！可以多和我说说吗？'
|
|
];
|
|
|
|
function addMessage(text, sender) {
|
|
const messageWrapper = document.createElement('div');
|
|
messageWrapper.className = `flex w-full items-end message-animate ${sender === 'user' ? 'justify-end' : 'justify-start'}`;
|
|
|
|
let messageBubble;
|
|
const sanitizedText = text.replace(/</g, "<").replace(/>/g, ">");
|
|
|
|
if (sender === 'user') {
|
|
messageBubble = `
|
|
<div class="max-w-xs md:max-w-md lg:max-w-lg">
|
|
<div class="bg-tech-blue text-white rounded-l-2xl rounded-tr-2xl p-3 px-4 shadow-md inline-block">
|
|
<p class="leading-relaxed">${sanitizedText}</p>
|
|
</div>
|
|
</div>
|
|
`;
|
|
} else { // sender === 'kaikai'
|
|
messageBubble = `
|
|
<img src="${kaikaiAvatar}" alt="开开" class="w-10 h-10 rounded-full mr-3 self-start flex-shrink-0">
|
|
<div class="max-w-xs md:max-w-md lg:max-w-lg">
|
|
<div class="bg-white text-text-dark rounded-r-2xl rounded-tl-2xl p-3 px-4 shadow-md inline-block border border-gray-100">
|
|
<p class="leading-relaxed">${sanitizedText}</p>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
messageWrapper.innerHTML = messageBubble;
|
|
messagesContainer.appendChild(messageWrapper);
|
|
messagesContainer.scrollTop = messagesContainer.scrollHeight;
|
|
}
|
|
|
|
function sendUserMessage() {
|
|
const messageText = messageInput.value.trim();
|
|
if (messageText) {
|
|
addMessage(messageText, 'user');
|
|
messageInput.value = '';
|
|
messageInput.focus();
|
|
|
|
sendButton.disabled = true;
|
|
setTimeout(() => {
|
|
const randomResponse = kaikaiResponses[Math.floor(Math.random() * kaikaiResponses.length)];
|
|
addMessage(randomResponse, 'kaikai');
|
|
sendButton.disabled = false;
|
|
}, Math.random() * 1000 + 1000);
|
|
}
|
|
}
|
|
|
|
sendButton.addEventListener('click', sendUserMessage);
|
|
messageInput.addEventListener('keypress', (e) => {
|
|
if (e.key === 'Enter' && !e.shiftKey) {
|
|
e.preventDefault();
|
|
sendUserMessage();
|
|
}
|
|
});
|
|
|
|
setTimeout(() => {
|
|
addMessage('你好呀，我是开开，你的情绪陪伴使者。有什么想对我说的吗？', 'kaikai');
|
|
}, 500);
|
|
});
|