Сообщения пользователей и сообщения бота отображаются дважды в интерфейсе чат-бота ⇐ CSS

[Anonymous]

Я работаю над созданием чат-бота с искусственным интеллектом. Хотя серверная часть почти завершена, я борюсь с реализацией пользовательского интерфейса.
Проблема
Сообщения от обоих бот и пользователь отображаются дважды. Например, если я ввожу «привет» в качестве пользовательского сообщения, чат отображает его дважды, как показано ниже:
Если бот отвечает «привет», оно также отображается дважды. , идентично вводу пользователя.


Что я пробовал
Поскольку класс сообщения разделен на message.user и message.bot, я попытался изменить сообщение. draw() для условного вызова message.user.draw() или message.bot.draw() в зависимости от стороны сообщения, но это не сработало.
Я также попробовал добавить счетчик сообщений или логический флаг для предотвращения дублирования отображения, но это тоже не решило проблему.
Код
Вот мой код JavaScript:

Код: Выделить всё

function Message(arg) {
this.text = arg.text;
this.message_side = arg.message_side;
this.draw = function (_this) {
return function () {
let $message;
$message = $($('.message_template').clone().html());
$message.addClass(_this.message_side).find('.text').html(_this.text);
$('.messages').append($message);

return setTimeout(function () {
return $message.addClass('appeared');
}, 0);
};
}(this);
return this;
}

function getMessageText() {
let $message_input;
$message_input = $('.message_input');
return $message_input.val();
}

function sendMessage(text, message_side) {
let $messages, message;
$('.message_input').val('');
$messages = $('.messages');
message = new Message({
text: text,
message_side: message_side
});
message.draw();
$messages.animate({scrollTop: $messages.prop('scrollHeight')}, 300);
}

Вот мой CSS:

Код: Выделить всё

.messages {
list-style: none;
padding: 20px;
margin: 0;
flex: 1;
overflow-y: auto;
background-color: #e6e9ef;
}

.messages .message .content {
background-color: #ffffff;
padding: 10px 15px;
border-radius: 6px;
max-width: 80%;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
word-break: keep-all;
white-space: normal;
font-size: 14px;
}

.messages .message {
display: flex;
align-items: flex-start;
margin-bottom: 15px;
font-size: 14px;
}

.messages .message.bot .avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #3a539b;
background-image: url('chatbotavatar.png');
background-size: cover;
background-position: center;
margin-right: 10px;
flex-shrink: 0;
}

.messages .message.user .avatar,
.messages .message.user .username {
display: none;
}

.messages .message.user {
flex-direction: row-reverse;
text-align: right;
}

.messages .message .content_wrapper {
display: flex;
flex-direction: column;
}

.messages .message .username {
font-size: 12px;
color: #666666;
margin-bottom: 3px;
}

.messages .message.bot .content {
display: inline-block;
background-color: #ecf0f1;
padding: 10px 20px;
line-height: 1.5;
border-radius: 6px;
max-width: 80%;
min-height: 24px;
max-width: 80%;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
color: #34495e;
text-align: left;
word-break: normal;
margin-left: 10px;
margin-right: auto;
}

.messages .message.user .content {
display: inline-block;
background-color: #2980b9;
color: #ffffff;
padding: 10px 20px;
line-height: 1.5;
border-radius: 6px;
max-width: 80%;
min-height: 24px;
max-width: 80%;
margin-left: auto;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
margin-right: 10px;
word-break: normal;
}

И мой HTML:

Код: Выделить всё

[*]


CHATBOT

CHATBOT Message



[*]

USER

USER Message

Спасибо, что прочитали длинный вопрос.

Подробнее здесь: https://stackoverflow.com/questions/791 ... -interface