I’m developing a web application with a chatbox UI using C#. I’ve encountered an issue where, when a user types input and clicks the send button, the input does not appear immediately. Instead, it only shows after the response from the API is received.
I would like the user’s input to be displayed right away, and then show the API response separately. How can I achieve this behavior?
Thanks in advance for any help!
This is my code:
<%@ Page Async="true" Language="C#" AutoEventWireup="true" CodeBehind="ChatBot.aspx.cs" Inherits="chatbot.Module.ChatBot" %>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0 auto;
max-width: 800px;
padding: 0 20px;
position: relative;
min-height: 100vh; /* Ensures the body covers the full viewport height */
}
.container {
border: 2px solid #dedede;
background-color: #f1f1f1;
border-radius: 5px;
padding: 10px;
margin: 10px 0;
}
.darker {
border-color: #ccc;
background-color: #ddd;
}
.container::after {
content: "";
clear: both;
display: table;
}
.containerLeftImg {
float: left;
max-width: 60px;
width: 100%;
margin-right: 20px;
border-radius: 50%;
}
.containerRightImg {
float: right;
max-width: 60px;
width: 100%;
margin-right: 20px;
border-radius: 50%;
}
.time-right {
float: right;
color: #aaa;
}
.time-left {
float: left;
color: #999;
}
.input-container {
display: flex;
align-items: center;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: #fff;
padding: 10px;
border-top: 2px solid #dedede;
}
.input-container input[type="text"] {
flex-grow: 1;
padding: 10px;
border: 2px solid #dedede;
border-radius: 5px;
font-size: 16px;
margin-right: 10px;
}
.btn {
padding: 10px 15px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.btn:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div id="chatContainer" runat="server">
<!-- New chat containers will be appended here -->
</div>
<!-- Input form for user -->
<div class="input-container">
<form runat="server" style="display: flex; width: 100%;" autocomplete="off">
<asp:TextBox runat="server" ID="txtQuestion" placeholder="Type your message here..."></asp:TextBox>
<asp:Button runat="server" ID="btnSubmit" OnClick="btnSubmit_Click" Text="Send" CssClass="btn" />
</form>
</div>
</body>
</html>
Here is the code behind:
protected async void btnSubmit_Click(object sender, EventArgs e)
{
string userMessage = txtQuestion.Text.ToString().Trim();
if (!string.IsNullOrEmpty(userMessage))
{
// Append user message container
AppendMessageContainer("darker", "../Images/avatar.png", userMessage, "time-left", "containerRightImg");
// Call API and get response
string apiResponse = await WebServices.GetDataFromAPI(userMessage);
// Append API response container
AppendMessageContainer("", "../Images/bot.png", apiResponse, "time-right", "containerLeftImg");
// Clear the user input field
txtQuestion.Text = string.Empty;
}
}
private void AppendMessageContainer(string cssClass, string avatarUrl, string message, string timeClass, string imgClass)
{
StringBuilder sb = new StringBuilder();
sb.Append("<div class='container " + cssClass + "'>");
sb.Append("<img src='" + avatarUrl + "' alt='Avatar' style='width: 100%;' class='" + imgClass + "' >");
sb.Append("<p>" + Server.HtmlEncode(message) + "</p>");
sb.Append("<span class='" + timeClass + "'>" + DateTime.Now.ToString("HH:mm") + "</span>");
sb.Append("</div>");
chatContainer.InnerHtml += sb.ToString();
}
3
you need to add text box content div chatContainer on button click btnSubmit_Click
const div = document.getElementById('chatContainer');
div.insertAdjacentHTML('beforeend', '<p>This is a new paragraph added at the end.</p>');
Once you receive api/server response clear it and bind from server response
1
Well, this happens because you send text to API and then wait for response to return and add text to chat box.
Instead, a better way to do this would be to add text to the chat and insert a check symbol on server response or else.
There are multiple ways to do so, one would be to use this in your onclick event:
function onSendClick(object sender, EventArgs e){
let inputTxt = document.getElementById('txtQuestion').innerText
document.getElementById('chatContainer').innerHTML = inputTxt
btnSubmit_Click(sender, e)
}
3