如何在聊天框中让来自不同用户的对立消息

Question

我发送的每条消息都一个接一个地显示，但在一侧，通常在左侧，我需要帮助移动来自对面不同用户的消息，一个在左边，一个在右边，依此类推。这是我的 JavaScript 和 CSS 代码：

我尝试用浮动移动位置但最终并排放置

const chatMessages = document.getElementById("chat-messages");
const chatInput = document.getElementById("chat-input");
const sendButton = document.getElementById("send-button");
const nameInput = document.getElementById("name-input");
const deleteButton = document.getElementById("delete-button");

let lastUser = null;

// funkcija koja generira nasumična imena za korisnike
function generateUserName() {
    const adjectives = ["Homer", "Marge", "Bart", "Lisa", "Maggie"];
    const nouns = ["Simpson"];
    const randomAdjective = adjectives[Math.floor(Math.random() * adjectives.length)];
    const randomNoun = nouns[Math.floor(Math.random() * nouns.length)];
    const userName = nameInput.value.trim();
    if (userName === "") {
        return { name: `${randomAdjective} ${randomNoun}`, color: getRandomColor() };
    } else {
        return { name: userName, color: getRandomColor() };
    }
}

// funkcija koja generira nasumičnu boju
function getRandomColor() {
    const letters = "0123456789ABCDEF";
    let color = "#";
    for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}


function addMessage(message, color, position) {
    const p = document.createElement("p");
    p.textContent = message;

    const messageContainer = document.createElement("div");
    messageContainer.classList.add("message-container");
    messageContainer.style.backgroundColor = color;
    messageContainer.style.block = position;
    messageContainer.style.alignItems = position;
    /*   messageContainer.style.flexDirection = position = "left" ? "row" : "row-reverse"
   */

    messageContainer.appendChild(p);
    chatMessages.appendChild(messageContainer);
}


// funkcija koja šalje poruku

function sendMessage() {
    const message = chatInput.value.trim();
    if (message !== "") {
        const user = generateUserName();
        let position = "right"
        if (lastUser !== null && lastUser !== user.name) {
            position = "left";
        }
        addMessage(`${user.name}: ${message}`, user.color, position);
        lastUser = user;
        chatInput.value = "";
    }
}

// funkcija koja briše cijeli razgovor
function deleteConversation() {
    chatMessages.innerHTML = "";
    lastUser = null;
}

// event listener koji obrađuje klik na gumb "Send"
sendButton.addEventListener("click", sendMessage);

// event listener koji obrađuje pritisak tipke "Enter" dok je input polje aktivno
chatInput.addEventListener("keyup", function (event) {
    if (event.key === "Enter" && chatInput.value.trim() !== "") {
        sendMessage();
    }
});

// event listener koji obrađuje klik na gumb "Delete"
deleteButton.addEventListener("click", deleteConversation);

#chat-container {
    width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0px 0px 10px #ccc;
    background-color: violet;
}

#chat-header {
    background-color: yellow;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
    text-align: center;
}

#chat-messages {
    height: 400px;
    overflow-y: scroll;
    margin-bottom: 15px;
    background-color: blue;
}

.message-container {
    background-color: rgb(22, 12, 12);
    max-width: 35%;
    margin-bottom: 5px;
    padding: 2px;
    border-radius: 5px;
    color: #fff;
    word-wrap: break-word;
    float: inline-start;
}


#chat-input-container {
    background-color: brown;
    display: flex;
    margin-bottom: 10px;
}

#chat-input {
    background-color: aqua;
    flex: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

Answer 1

我会将消息添加到“包装器”

div

，然后每条消息都将是它自己的

div

。从那里，一个人的消息将由指定

text-align:left

的 CSS 类处理，而另一个人的消息将被插入到包装器中，另一个

div

具有不同的类，指定

text-align-right

.

这是一个简化的例子：

.wrapper { 
  background-color:#e0e0e0;
  border: 2px solid #808080;
  padding:5px;
}

.user1{
  color:#373;
  font-size:1.1em;
  font-family:Arial;
  text-align:left; /* not strictly needed as this is the default */
}

.user2{
  color:#00f;
  font-size:1.1em;
  font-family:"Courier New";
  text-align:right;
}

<div class="wrapper">
  <div class="user1">Hello.</div>
  <div class="user2">Hello.</div>
  <div class="user1">How are you?</div>
  <div class="user2">Fine. And you?</div>
  <div class="user1">Pretty good.</div>
  <div class="user2">That's good.</div>
  <div class="user1">Ok, bye.</div>
  <div class="user2">Bye.</div>
</div>