Question

如何将用户发送的消息与AI给出的响应分开，创建一个像附加图像上的聊天框的现代设计？我不能在包含消息内容的“input”和“response”变量上应用属性。 “addClass（）”和“innerHTML”不起作用，我要求另一种选择。谢谢！

设计：https://i.stack.imgur.com/ZxF61.jpg

代码：

var accessToken = "36e3b0fabc8a4c44a8b8b557a3c3f40b";
var baseUrl = "https://api.api.ai/v1/";

var conversation = [];
$(document).ready(function() {
  $("#input").keypress(function(event) {
    if (event.which == 13) {
      event.preventDefault();
      send();
      event.currentTarget.value = "";
    }
  });
});

function setInput(text) {
  $("#input").val(text);
  send();
}

function updateRec() {
  $("#rec").text(recognition ? "Stop" : "Speak");
}

function send() {

  var user_input = $("#input").val();
  conversation.push("Me: " + user_input + '\r\n');
  $.ajax({
    type: "POST",
    url: baseUrl + "query?v=20150910",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    headers: {
      "Authorization": "Bearer " + accessToken
    },
    data: JSON.stringify({
      query: user_input,
      lang: "en",
      sessionId: "somerandomthing"
    }),
    success: function(data) {

      setResponse(JSON.stringify(data.result.fulfillment.speech, undefined, 2));
      if (data.result.actionIncomplete) {

      } else {

      }

    },
    error: function() {
      setResponse("Internal Server Error");
    }
  });
  //setResponse("Loading...");
}

function setResponse(val) {
  conversation.push("AI: " + val + '\r\n');
  //$("#response").addClass("messageboard"); //changes the color of texts from black to red
  $("#response").text(val);
  $("#response").text(conversation.join(""));
}

.messageboard {
  color: red;
  font-size: 14px;
}

textarea {
  width: 100%;
  height: 58%;
  resize: none;
  border-radius: 10px;
  padding: 10px;
}

div {
  margin: 5px;
  padding: 5px;
}

textarea::-webkit-scrollbar {
  width: 10px;
}

textarea::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: rgba(0, 0, 0, .1);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <title>Chatbot UI</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0" />

  <!-- CSS -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection" />

</head>

<body>

  <div class="container">
    <div class="card-panel grey lighten-4">
      <div class="textbox">
        <textarea id="response" cols="40" rows="20" readonly> </textarea>
      </div>


      <div class="row">
        <div class="col m10 center">
          <input id="input" type="text">
        </div>

        <div class="col m1 center">
          <button class="btn waves-effect waves-light" type="submit" name="action" id="rec">Speak</button>

        </div>
      </div>

    </div>
  </div>
</body>

</html>

如何在聊天机器人UI上应用css属性？

0 个答案: