Javascript 如何在html和css中的聊天机器人响应中使用动态间距

我有一个聊天机器人用户界面，每当我在div中发布内容时，问题就出现在我请求的请求和我从聊天机器人用户界面得到的响应的空白处。此外，每当聊天机器人的响应出现延迟时，我希望加载或键入效果类型屏幕块

我已经制作了用户界面，你可以查看它。这是我的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);
}

---

你能添加JSFiddle/Codepen来重新创建它吗？事实上，我不能共享全部代码。我所需要的只是为聊天机器人响应提供动态边距/空间，比如“+id+”

”；实际上，我需要的是一个边距计算器，它可以计算请求聊天div和响应聊天div的边距，并根据响应div的大小增加边距。您可以添加JSFiddle/Codepen来重新创建它。实际上，我无法共享全部代码。我需要的只是为聊天机器人响应提供动态边距/空间，如“+id+”

”；实际上，我需要的是一个边距计算器，它可以计算请求聊天div和响应聊天div的边距，并根据响应div的大小增加边距

.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%;
}