js 类似微信气泡

<div id="chat-container">
  <div class="message received">
    <span class="message-content">Hello!</span>
  </div>
  <div class="message sent">
    <span class="message-content">Hi there!</span>
  </div>
</div>

#chat-container {
  width: 300px;
  height: 400px;
  border: 1px solid #ccc;
  padding: 10px;
  overflow-y: scroll;
}

.message {
  max-width: 70%;
  margin: 5px;
  padding: 10px;
  border-radius: 15px;
  position: relative;
}

.received {
  background-color: #e1ffc7;
  align-self: flex-start;
}

.sent {
  background-color: #c7e1ff;
  align-self: flex-end;
}

.message::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 0;
  height: 0;
}

.received::after {
  left: -10px;
  border: 10px solid transparent;
  border-right-color: #e1ffc7;
  border-left: 0;
  margin-bottom: -10px;
}

.sent::after {
  right: -10px;
  border: 10px solid transparent;
  border-left-color: #c7e1ff;
  border-right: 0;
  margin-bottom: -10px;
}

function addMessage(content, isSent) {
  const chatContainer = document.getElementById('chat-container');
  const messageDiv = document.createElement('div');
  messageDiv.classList.add('message');
  if (isSent) {
    messageDiv.classList.add('sent');
  } else {
    messageDiv.classList.add('received');
  }
  const messageContent = document.createElement('span');
  messageContent.classList.add('message-content');
  messageContent.textContent = content;
  messageDiv.appendChild(messageContent);
  chatContainer.appendChild(messageDiv);
  chatContainer.scrollTop = chatContainer.scrollHeight;
}

// 示例调用
addMessage('Hello!', false);
addMessage('Hi there!', true);