Recently, I try to create a chat bot Reactive Web page user interface. However, I faced some difficulties.
I want the UI to be similar to those popular AI chatbot websites like GPT, POE, like:
I tried the LayoutSideMenu block, and it successfully put the input widget always on bottom. However, the chat message container collapsed. When there are more messages, the chat message container will overflow and push the input widget below the screen.
I hope to restrict the height of the chat message container. Yet, the restriction should not be an absolute value, but rather adjusts based on the window size (zoom-in/out).
Here, I attach the OML. Can anyone review it, and suggest what CSS, or arrangement of the containers can achieve the effect stated above?
Hi @Rochefort McGill ,
With your current setup, you can use the calc() function to make the chat container fit the screen height. Just subtract the header and footer heights. The header already uses var(--header-size), but you’ll need to define a similar variable or fixed value for the footer.
After testing different values, this was the minimum height that worked:
.container-chat{
height:calc(100vh - var(--header-size) - 254px);
}
I applied this class to the container that also uses the card class.
Result:
I attached the updated OML, but I removed the markdown block due to missing dependencies.
___
As a side note: You can use utility classes provided by OutSystems (in the OutSystemsUI theme), instead of in-line styles. You can find the utility classes here: OutSystemsUI | CheatSheet .
@Mihai Melencu Thank you for the answer.
I hope to use a CSS variable to hold the value of the height of the footer. However, I don't know how to customize it in OutSystems.
Also, the height of the footer depends on various factors.
I dont know how I can relate the CSS variable to both scenarios.
Can you provide some assistance for the steps to do it?
Alright, let’s drop that approach. We’ll place the input container inside the MainContent instead of the footer placeholder. Using a Flex layout, we reserve space between the header and the input for messages. The input stays fixed at the bottom, and as the textarea grows, it expands upward into the messages area instead of pushing the whole composer down.
This is how the structure looks:
I deleted most of the in-line styles used before and created CSS classes:
Also, updated your javascript for the auto growth of the text area, placed it in the OnReady client action.
@Mihai Melencu Thank you so much for the updated version. The input widget now works pretty well.
I decided to add a file upload function to the input widget. However, I have encountered another problem.
I don't quite understand why this happens. I use display: flex. I asked ChatGPT and implemented the CSS it suggested, but the problem is not solved. I would like to know if any CSS can be changed to achieve the goal to align-to-left?
Hi, you'll need to disable the virtualization of the list by setting the disable-virtualization property of list to true.