!DOCTYPE htmlhtml head meta charset=UTF-8 titleGPT机器人title meta name=viewport content=width=device-width initial-scale=10 user-scalable=no style body font-family Arial sans-s
可以在messageBubble中添加一个复制按钮,并给它添加样式。同时,对于左侧文本逐步显示的需求,可以使用setInterval函数来实现。
修改后的代码如下:
function addMessage(messageText, isUserMessage) {
const messageBubble = document.createElement('div');
messageBubble.classList.add('message-bubble');
if (isUserMessage) {
messageBubble.classList.add('user-bubble');
} else {
messageBubble.classList.add('ai-bubble');
}
messageBubble.innerText = messageText;
// 添加复制按钮
const copyBtn = document.createElement('button');
copyBtn.classList.add('copy-btn');
copyBtn.innerText = '复制';
copyBtn.onclick = () => {
navigator.clipboard.writeText(messageText);
alert('已复制到剪切板!');
}
messageBubble.appendChild(copyBtn);
const lastMessageContainer = userMessageContainer.lastElementChild;
if (lastMessageContainer && lastMessageContainer.classList.contains(isUserMessage ? 'user-message' : 'ai-message')) {
// 左侧文本逐步显示
const existingMessageBubble = lastMessageContainer.querySelector('.message-bubble');
let existingText = existingMessageBubble.innerText;
existingMessageBubble.innerText = '';
const textArr = messageText.split('');
let i = 0;
const intervalId = setInterval(() => {
existingMessageBubble.innerText += textArr[i];
i++;
if (i === textArr.length) {
clearInterval(intervalId);
existingMessageBubble.appendChild(copyBtn);
}
}, 50);
existingMessageBubble.appendChild(copyBtn);
} else {
const messageContainer = document.createElement('div');
messageContainer.classList.add('message-container');
if (isUserMessage) {
messageContainer.classList.add('user-message');
} else {
messageContainer.classList.add('ai-message');
}
// 左侧文本逐步显示
const textArr = messageText.split('');
let i = 0;
const intervalId = setInterval(() => {
messageBubble.innerText += textArr[i];
i++;
if (i === textArr.length) {
clearInterval(intervalId);
messageBubble.appendChild(copyBtn);
}
}, 50);
messageContainer.appendChild(messageBubble);
userMessageContainer.appendChild(messageContainer);
}
userMessageContainer.scrollTop = userMessageContainer.scrollHeight;
}
同时,可以在样式中添加复制按钮的样式:
.copy-btn {
padding: 5px 10px;
border-radius: 5px;
border: none;
background-color: #007bff;
color: #fff;
font-size: 0.8em;
margin-left: 5px;
cursor: pointer;
box-shadow: 0px 2px 5px #ccc;
}
原文地址: http://www.cveoy.top/t/topic/bhPC 著作权归作者所有。请勿转载和采集!