62 lines
2.1 KiB
JavaScript
62 lines
2.1 KiB
JavaScript
export function createMessageElement(message, formatTimestamp) {
|
|
const messageDiv = document.createElement('div');
|
|
let messageClass = 'chat-bubble';
|
|
|
|
if (message.type === 'system') {
|
|
messageClass += ' message-system';
|
|
} else if (message.isSelf) {
|
|
messageClass += ' message-self';
|
|
} else {
|
|
messageClass += ' message-other';
|
|
}
|
|
|
|
messageDiv.className = messageClass;
|
|
messageDiv.dataset.messageId = message.id;
|
|
|
|
const contentHTML = message.type === 'file' && message.content.startsWith('data:image/')
|
|
? `
|
|
<div class="message-image-container">
|
|
<img src="${message.content}" class="message-image" alt="${message.fileName || '\u56fe\u7247'}">
|
|
${message.fileName ? `<div class="message-image-name">${message.fileName}</div>` : ''}
|
|
</div>
|
|
`
|
|
: `
|
|
<div class="message-text">
|
|
${message.content}
|
|
</div>
|
|
`;
|
|
|
|
messageDiv.innerHTML = `
|
|
<div class="message-header">
|
|
<img src="${message.senderAvatar}" class="message-avatar">
|
|
<div>
|
|
<span class="message-sender">${message.senderName}</span>
|
|
<span class="message-time">${formatTimestamp(message.timestamp)}</span>
|
|
</div>
|
|
</div>
|
|
<div class="message-content">
|
|
${contentHTML}
|
|
</div>
|
|
`;
|
|
|
|
return messageDiv;
|
|
}
|
|
|
|
export function renderChatMessagesInto(container, messages, formatTimestamp) {
|
|
if (!container) return;
|
|
|
|
container.innerHTML = '';
|
|
|
|
const startTimeElement = document.createElement('div');
|
|
startTimeElement.className = 'text-center text-xs text-gray-500 my-4';
|
|
const startTime = messages[0]?.timestamp || new Date().toISOString();
|
|
startTimeElement.textContent = `\u901a\u8bdd\u5f00\u59cb ${formatTimestamp(startTime)}`;
|
|
container.appendChild(startTimeElement);
|
|
|
|
messages.forEach(message => {
|
|
container.appendChild(createMessageElement(message, formatTimestamp));
|
|
});
|
|
|
|
container.scrollTop = container.scrollHeight;
|
|
}
|