可以在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;
}
!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

原文地址: http://www.cveoy.top/t/topic/bhPC 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录