javascript - 如何在 html 和 css 中的聊天机器人响应中进行动态间距

Question

每当我在 div 中发布内容时，我都有一个聊天机器人 UI，问题出现在我请求的请求和我从聊天机器人 ui 获得的响应的边缘。此外，每当我的聊天机器人的响应出现延迟时，我想加载或输入效果类型的屏幕块

我已经制作了用户界面，您可以查看它。这是我的 JS 代码：-

/**
Custom functions goes below
 **/
var GLOBAL = {};
GLOBAL.RESULT = {};
GLOBAL.RESULT.mres = {};
var code_rates = {};
var chat = [];
var chat_id = 0;

$(document).ready(function () {

/* if(!window.hasOwnProperty('webkitSpeechRecognition')) {
$('.btnmic').remove();
} */
$('.lazy').Lazy();
if ($('.stickyheadhome').html()) {
sessionStorage.removeItem('nlp');
sessionStorage.removeItem('multipropcriteria');
}

    $('.increaseroom').click(function(){
        console.log('plus clicked');
        var cnt = Number($('.roomlabel').val());
        console.log('cnt='+cnt)
        cnt=cnt+1;
        console.log('cnt1='+cnt);
        $('.roomlabel').val(cnt<10?cnt:cnt-1);
    });

    $('.btnchat').click(function(e) {
        /*if($('.fltmenufront').hasClass('chatboxpuller')){
            $('.fltmenufront').removeClass('chatboxpuller');
            $('.chatbox').removeClass('chatboxexpand');

        }else{
            $('.fltmenufront').addClass('chatboxpuller'); 

            $('.chatbox').addClass('chatboxexpand');
        }*/
    });

    $('.decreaseroom').click(function(){
        console.log('minus clicked');
        var cnt = Number($('.roomlabel').val());
        console.log('cnt='+cnt)
        cnt=cnt-1;
        console.log('cnt1='+cnt);
        $('.roomlabel').val(cnt>0?cnt:cnt+1);
    });

    /*$('#chatbutton').draggable({
        containment: '.stickyheadhome'
    });*/

    $('#testChatModal').on('hidden.bs.modal', function () {
      $('.chat-body').html('');
    });

    function getChatResponse(requestStringForChat){

                var value={

                  'DestinationBot': "iSearchBot",

                  'SenderID': "12345",

                  'botAlias': "iSearchBotBeta",

                  'message': {

                                'text': requestStringForChat

                  }

                };

                console.log(value);

                value=JSON.stringify(value);

                $.ajax({

                  url:'https://ym4j4pt5mf.execute-api.us-east-1.amazonaws.com/Beta/',

                  method:'POST',

                  dataType:'application/json',

                  data:value,

                  dataType: 'json',

                  success:function(msg){
                            console.log(msg);
                            console.log('inside getchatresponse: ',requestStringForChat);
        chat_id++;
        var chatitem={};
        chatitem['chatID']=chat_id;
        chatitem['chatType']='Response';
            chatitem['chatText']=msg['message'];
if(msg.hasOwnProperty('responseCard')&&msg['responseCard']['genericAttachments'].length!=0)
{
var content=msg['responseCard']['genericAttachments'].map(
attachment=>'<div id="cards" class="card"><img class="card-img-top" src='+attachment.imageUrl+' alt="Card image cap"><div class="card-body"><div class="card-title">Card title</div><p class="card-text">'+attachment.title+'</p>"'+attachment.buttons.map(button => 
'<a href="#" class="btn btn-primary" id='+button.value+'>'+button.text+'</a>').join('')+'"</div></div>').join('');
chatitem['htmlContent']='<span class="chat-response pull-right">'+content+'</span><br/><br/>';
}
else{
        chatitem['htmlContent']='<span class="chat-response pull-right">'+msg['message']+'</span><br><br>';
}
        chat.push(chatitem);
        console.log(chat);
print();
        //return chat;

}});


    }
  $('#cards').children().on('click',function(e){
   var id=this.id;
   chatitem['htmlContent']='<span class="chat-response pull-right">'+id+'</span><br><br>';
   chat.push(chatitem);
   print();
  });


function iChat(){    
var chatMsg=$("#input-chat-text").val();    
        console.log($('#input-chat-text').val());
        chat_id++;
        var chatitem={};

        chatitem['chatID']=chat_id;
        chatitem['chatType']='Request';
        chatitem['chatText']=$('#input-chat-text').val();
        chatitem['htmlContent']='<span class="chat-request pull-left">'+$('#input-chat-text').val()+'</span><br><br>';
        chat.push(chatitem);
        console.log(chat);
        getChatResponse(chatMsg);
    }
    $('#chat-button-send').click(function(){
iChat();
console.log('clicked!')
        //console.log('chat is = '+JSON.stringify(iChat()));
        var msgBody='';

console.log(chat.length);
        for(var myobject in chat){
            console.log(chat[myobject]["htmlContent"]);
            msgBody+=chat[myobject]["htmlContent"];
        }
console.log('Printing msgBody'+msgBody)
        $('.chat-body').html(msgBody);
        $('#input-chat-text').val('');
    });
function print()
{
var msgBody='';
console.log(chat.length);
        for(var myobject in chat){
            console.log(chat[myobject]["htmlContent"]);
            msgBody+=chat[myobject]["htmlContent"];
        }
console.log('Printing msgBody'+msgBody)
        $('.chat-body').html(msgBody);
}

这是我的聊天响应和聊天请求 css

.chat-response{
        background: #4285f4!important;
        padding-left: 4%;
        padding-right: 4%;
        border-bottom-left-radius: 6px;
        border-top-left-radius: 6px;
        border-bottom-right-radius: 15px;
        color: white;
        font-size: 12px !important;
        padding-bottom: 1%;
        padding-top: 1%;
        word-wrap:break-word;
        position: relative;
        max-width: 100%;
    }

}

.

chat-request{
    background: grey;
    padding-left: 4%;
    padding-right: 4%;
    border-bottom-right-radius: 6px;
    border-top-right-radius: 6px;
    border-bottom-left-radius: 15px;
    color: white;
    padding-bottom: 1%;
    padding-top: 1%;
    border-color: black;
    font-size: 22px;
    position: relative;
    word-wrap:break-word;
    max-width: 100%;
}