Как отобразить ответ API после загрузки анимации в чат-боте ASP.NET C# ⇐ C#

[Anonymous]

Я работаю над приложением чат-бота, используя ASP.NET и C#. В настоящее время у меня возникла проблема с отображением ответа API в интерфейсе чат-бота.
Вот реализованный мною функционал:

[*]При нажатии кнопки «Отправить» вопрос пользователя отображается
в интерфейсе.
[*]Появляется анимация загрузки с точками ввода, указывающими на то, что
/>система обрабатывает ответ.
[*]После завершения внутренней обработки я хочу, чтобы точки были заменены ответом API.

Проблема в том, что точки ввода не меняются автоматически на фактический ответ после завершения серверного процесса. Буду признателен за любые рекомендации о том, как обеспечить плавный переход анимации загрузки для отображения ответа после его готовности.
Заранее благодарим за любую помощь!
Вот мой код интерфейса:







send








const chatInput = document.querySelector("#txtQuestion");
const sendButton = document.querySelector("#send-btn");
const chatContainer = document.querySelector(".chat-container");
const themeButton = document.querySelector("#theme-btn");
const deleteButton = document.querySelector("#delete-btn");

const createChatElement = (content, className) => {
const chatDiv = document.createElement("div");
chatDiv.classList.add("chat", className);
chatDiv.innerHTML = content;
return chatDiv;
};

const showTypingAnimation = () => {
console.log("showTypingAnimation");
const html = `







content_copy
`;
const incomingChatDiv = createChatElement(html, "incoming");
chatContainer.appendChild(incomingChatDiv);
chatContainer.scrollTo(0, chatContainer.scrollHeight);
};
const handleOutgoingChat = () => {
userText = chatInput.value.trim();
if (!userText) return;

chatInput.value = "";
chatInput.style.height = `${initialInputHeight}px`;
const html = `


${userText}

`;

const outgoingChatDiv = createChatElement(html, "outgoing");
chatContainer.querySelector(".default-text")?.remove();
chatContainer.appendChild(outgoingChatDiv);
chatContainer.scrollTo(0, chatContainer.scrollHeight);
setTimeout(showTypingAnimation, 500);
};

const initialInputHeight = chatInput.scrollHeight;
chatInput.addEventListener("input", () => {
chatInput.style.height = `${initialInputHeight}px`;
chatInput.style.height = `${chatInput.scrollHeight}px`;
});
chatInput.addEventListener("keydown", (e) => {

if (e.key === "Enter" && !e.shiftKey && window.innerWidth > 800) {
e.preventDefault();
handleOutgoingChat();
}
});

sendButton.addEventListener("click", handleOutgoingChat);



Вот мой код:
protected async void btnCopyResponse_Click(object sender, EventArgs e)
{
string userMessage = txtQuestion.InnerText.ToString().Trim();

string apiResponse = await WebServices.GetDataFromIndexes(userMessage);

string newApiResponse = await WebServices.GetDataFromAISearch(apiResponse, userMessage);

newApiResponseHidden.Value = newApiResponse;
}


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