64 lines
1.6 KiB
JavaScript
64 lines
1.6 KiB
JavaScript
/**
|
|
* 聊天消息渲染器
|
|
*
|
|
* 提供通用的气泡创建、DOM 操作和滚动功能。
|
|
*/
|
|
import { escapeHtml } from '../utils.js';
|
|
|
|
/**
|
|
* 获取聊天消息容器
|
|
*/
|
|
export function getChatMessages() {
|
|
return document.getElementById('chat-messages');
|
|
}
|
|
|
|
/**
|
|
* 滚动聊天容器到底部
|
|
*/
|
|
export function scrollToBottom() {
|
|
const chatMessages = getChatMessages();
|
|
if (chatMessages) {
|
|
chatMessages.scrollTop = chatMessages.scrollHeight;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 创建聊天消息气泡
|
|
*
|
|
* @param {string} text - 消息内容
|
|
* @param {string} type - 消息类型（影响气泡样式）
|
|
* @param {boolean} isUser - 是否为用户消息
|
|
* @returns {HTMLElement} wrapper 元素
|
|
*/
|
|
export function createChatBubble(text, type, isUser) {
|
|
const wrapper = document.createElement('div');
|
|
wrapper.className = `chat-message${isUser ? ' user' : ''}`;
|
|
wrapper.innerHTML = `
|
|
<div class="ai-avatar"><img src="/static/icon/${isUser ? 'user' : 'agent'}.svg" alt=""></div>
|
|
<div class="chat-bubble ${isUser ? 'user' : (type || 'processing')}">${escapeHtml(text)}</div>
|
|
`;
|
|
return wrapper;
|
|
}
|
|
|
|
/**
|
|
* 创建带系统头像的气泡
|
|
*
|
|
* @param {string} text - 消息内容
|
|
* @param {string} type - 消息类型
|
|
* @returns {HTMLElement} wrapper 元素
|
|
*/
|
|
export function createSystemBubble(text, type) {
|
|
return createChatBubble(text, type, false);
|
|
}
|
|
|
|
/**
|
|
* 将消息追加到聊天容器
|
|
*
|
|
* @param {HTMLElement} wrapper - 消息 wrapper 元素
|
|
*/
|
|
export function appendMessage(wrapper) {
|
|
const chatMessages = getChatMessages();
|
|
if (!chatMessages) return;
|
|
chatMessages.appendChild(wrapper);
|
|
scrollToBottom();
|
|
} |