时间戳

首页 > 解决方案 > 在 GUI 中交错的聊天机器人查询和回复

javascript - 在 GUI 中交错的聊天机器人查询和回复

问题描述

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

我想解决这个问题，但将屏幕从中间分成两半，以便机器人输出在右侧，用户在左侧。我只需要让他们来回交替。

我已经尝试用边缘顶部锚定最新的盒子，尝试设置一个计数器变量来更新每个新盒子的位置等，但是在将它们相对于彼此隔开时遇到了麻烦。

下面是没有后端工作的代码。所以，这不会完美运行，但它应该得到我的设置......这是CSS代码：

body {
    font-family: Cambria;
    color: rgb(122, 4, 4);
    background-color: rgb(136, 175, 175);
}

h1 {
    color: black;
    margin-bottom: 0;
    margin-top: 0;
    text-align: center;
    font-size: 40px;
}

h2 {
    color: black;
    font-size: 20px;
    margin-top: 3px;
    text-align: center;
}

#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%;

    /* height: 80%; */
    /* background-color: pink; */
    /* border-radius: 10px; */
}

#userInput {
    margin-left: auto;
    margin-right: auto;
    width: 95%;
    margin-top: 150px;
}

#textInput {
    width: 92%;
    border: 3px solid Black;
    border-bottom: 3px solid #660096;
    font-family: Cambria;
    font-size: 16px;
}

#buttonInput {
    padding: 10px;
    font-family: Cambria;
    font-size: 72;
}

.userText {
    color: rgb(0, 0, 0);
    font-family: Georgia;
    font-size: 16px;
    text-align: left;
    line-height: 20px;
}

.userText span {
    display:block;
    width:auto;
    background-color: rgb(87, 201, 152);
    padding: 10px;
    border-radius: 10px;
    /* counter-increment: var(--chatbox_spacing); */
}

.botText {
    color: Black;
    font-family: Consolas, monaco, monospace;
    font-size: 16px;
    text-align: left;
    /* line-height: calc(29 + var(--chatbox_spacing))px; */
    line-height: 20px;
  }

.botText span {
    display:block;
    width:auto;
    background-color: rgb(73,196,199);
    padding: 10px;
    border-radius: 10px;
    /* counter-increment: var(--chatbox_spacing); */
}

...这里是带有 .js 代码（在 index.html 中）的 .html，它使用新信息（来自用户的输入和来自机器人的回复）更新要打印的块：

<!DOCTYPE html>

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="/static/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  </head>

  <body>
    <h1>Analysis Chatbot</h1>

    <!-- The main chat environment for interacting with the bot. -->
    <div>

      <!-- The text of the bot. -->
      <div id="bot_chatbox">
        <p class="botText"><span>Welcome! How can I help you analyze your dataset?</span></p>
      </div>

      <div id="user_chatbox"></div>

      <!-- The input text of the user interacting with the bot. -->
      <div id="userInput">
        <input id="textInput" type="text" name="msg" placeholder="Message">
        <input id="buttonInput" type="submit" value="Send">
      </div>

      <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>
    </div>
  </body>
</html>

没有任何问题，但我在当前输出下方附上了一些图片。同样，现在的回复不是基本的，而是我希望显示的文本块从机器人（右侧）到用户（左侧）交替显示，同时保持屏幕在中间分割.

输出不交替的示例。 应该是右边然后左边然后右边然后左边的一个块......

我希望该图像是：右边的顶部蓝色（欢迎......）然后左边的第一个绿色（你能找到我的销售......）然后右边的下一个蓝色等等......

标签： javascripthtmlcss

解决方案

我整理了一个基本示例，说明您正在尝试使用 100% 宽度的包装器来保存消息。包装器使内部display:flex;的<div>s 不会扩展。看看这个：

$(document).ready(function() {
    $('#sendUser').click(function(){
      if($('#userText').val()!=""){
        $('#chatbox').append('<div class="message user"><div>'+$('#userText').val()+'</div></div>');
        $('#userText').val('');
      }
    });
    $('#sendBot').click(function(){
      if($('#userText').val()!=""){
        $('#chatbox').append('<div class="message bot"><div>'+$('#userText').val()+'</div></div>');
        $('#userText').val('');
      }
    });
});
#chatbox{
  width: 300px;
  height: 400px;
  border: 1px solid black;
  margin: auto;
  margin-top: 20px;
  overflow-y: scroll;
}

#inputs{
  display: grid;
  padding: 10px 0;
  width: 300px;
  margin: auto;
  grid-template-columns: auto 40px 40px;
  grid-gap: 4px;
}

.button{
  text-align: center;
  border: 1px solid #a0a0a0;
  cursor: pointer;
}

.button:hover{
  background-color: grey;
  color: white;
}

.message{
  display: flex;
}

.message.user{
  text-align: left;
}


.message > div{
  margin: 10px 10px 0;
  padding: 6px 8px;
  border-radius: 15px;
  color: white;
}

.message.bot > div{
  margin-left: auto;
  background-color: teal;
}

.message.user > div{
  background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="chatbox">
  <div class="message bot">
    <div>
      hello
    </div>
  </div>
  <div class="message user">
    <div>
      hello!
    </div>
  </div>
</div>
<div id="inputs">
  <input type="text" id="userText">
  <div class="button" id="sendBot">Bot</div>
  <div class="button" id="sendUser">User</div>
</div>

如果你想弄乱它，这里是CodePen 。

推荐阅读