Javascript 如何在用户进入聊天机器人后交替显示文本框，以便它们来回移动？

我目前正在开发一个聊天机器人，并试图将我一直使用的GUI连接到该项目。 它运行平稳，但我的输出有点混乱；特别是，聊天框应该在用户和机器人之间交替使用，但它们堆叠在顶部，格式不正确

我试着用一个边距顶部锚定最新的框，试着设置一个计数器变量来更新每个新框的位置，等等，但是我很难将它们彼此隔开

以下是一般流程中最适用的CSS代码：

#user_chatbox {
    margin-left: 0;
    margin-right: auto;
    width: 50%;
    margin-top: 30%;
}

#bot_chatbox {
    margin-left: 50%;
    margin-right: auto;
    width: 50%;
    margin-top: 10%;
}

。。。下面是.js代码（在index.html中），它用新信息（用户输入和机器人回复）更新要打印的块：

函数getBotResponse（）{
var rawText=$（“#textInput”）.val（）；
var userHtml='
'+rawText+'
'；
$（“#textInput”）.val（“”）；
$（“#user_chatbox”）.append（userHtml）；
document.getElementById（'userInput'）.scrollIntoView（{block:'start'，behavior:'smooth'}）；
$.get（“/get”，{msg:rawText}）.done（函数（数据）{
var botHtml='
'+data+'
'；
$（“#bot_chatbox”）.append（botHtml）；
document.getElementById（'userInput'）.scrollIntoView（{block:'start'，behavior:'smooth'}）；
});
}
$（“#文本输入”）。按键（功能（e）{
如果（e.which==13）{
getBotResponse（）；
}
});
$（“#按钮输入”）。单击（函数（）{
getBotResponse（）；
})

没有中断，但我在下面附加了一些当前输出的图像。同样，现在的回复并不是基本的，而是我希望显示的文本blob在bot（右侧）和user（左侧）之间交替

---

下面是一个示例，介绍如何在对话中使用所需的备选气泡。让我知道这是否有帮助，或者我理解错了你需要什么

document.getElementById（'send'）。onclick=function（）{
//使用者
让输入=document.getElementById（'userInput'）；
让divNode=document.createElement（'div'）；
divNode.classList.add（“消息”）；
divNode.classList.add（“右”）；
设textNode=document.createTextNode（input.value）；
appendChild（textNode）；
让chatbox=document.getElementById（'chatbox'）；
appendChild（divNode）；
//答复
让divNodeAnswer=document.createElement（'div'）；
divNodeAnswer.classList.add（“消息”）；
divNodeAnswer.classList.add（“左”）；
让textNodeAnswer=document.createTextNode（“BLA-BLA-BLA”）；
divNodeAnswer.appendChild（textNodeAnswer）；
聊天室.appendChild（divNodeAnswer）；
};
#聊天室{
宽度：200px；
高度：400px；
背景：灰色；
}
.留言{
显示：内联块；
宽度：150px；
边界半径：4px；
边缘顶部：5px；
边缘底部：5px；
}
.左{
背景：绿色；
}
.对{
背景：红色；
浮动：对；
}
div#用户{
宽度：200px；
}

你好
胡闹
呜呜呜呜呜呜呜呜呜呜
布尔布尔布尔布尔布尔布尔布尔布尔布尔布尔布尔布尔布尔布尔布尔布尔布尔布尔布尔布尔布尔布尔布尔布尔布尔布尔布尔布尔布尔布尔布尔布尔布尔布尔布尔布尔布尔布尔布尔布尔布尔布尔布尔布尔布尔布尔布尔布尔布尔布尔布尔布尔布尔布尔布尔布尔布尔布尔布尔布尔布尔布尔布尔布尔布尔布尔布尔布尔布尔布尔布尔
布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉
发送
我很困惑，在我看来，机器人在右边，用户在左边，至少在你的图像中是这样。问题可能是因为消息在不同的容器中？如果没有html，将无法清楚地反转您的选择器？@Laif-Yea如果我不够挑剔，我很抱歉；这件事的结局对我来说是相当新鲜的，所以我想我遗漏了一些重要的部分。机器人在右边，用户在左边；我的目标是保持这样，但让消息仍然交错（有点像iphone文本聊天）。@mthrsj这就是它使用单个容器的原因，但直到我制作了两个单独的容器，我才知道如何拆分消息。这起了作用，但却引发了这个新问题。。。如果你知道如何仍然像这样分开两个容器的话，你肯定可以避免使用两个容器；基本上是我想要的结果，但随着程序的进行，我正在尝试更新每个消息blob的内容。让我稍微修改一下。如您所见，顶部当前使用两个容器。不需要保持这种方式，因为也许这就是为什么它现在有点时髦的原因，但我不想失去上面的.js源代码的滚动功能和类似功能。@sawezo，我构建示例的方式是首先编写基本的HTML。然后，我编写了CSS，同时考虑到我会向元素添加/删除类以影响它们的行为，最后实现了JavaScript.Awesome；是的，从只使用Python编写代码到尝试使用像这样的交互部分来降低流程有点奇怪。再次感谢！
<script>
        function getBotResponse() {
          var rawText = $("#textInput").val();
          var userHtml = '<p class="userText"><span>' + rawText + '</span></p>';
          $("#textInput").val("");
          $("#user_chatbox").append(userHtml);
          document.getElementById('userInput').scrollIntoView({block: 'start', behavior: 'smooth'});
          $.get("/get", { msg: rawText }).done(function(data) {
            var botHtml = '<p class="botText"><span>' + data + '</span></p>';
            $("#bot_chatbox").append(botHtml);
            document.getElementById('userInput').scrollIntoView({block: 'start', behavior: 'smooth'});
          });
        }

        $("#textInput").keypress(function(e) {
            if(e.which == 13) {
                getBotResponse();
            }
        });

        $("#buttonInput").click(function() {
          getBotResponse();
        })
</script>