I’m starting out with the chatbot example here: https://github.com/alejandro-du/vaadin-ai-chat
I’d like to keep the layout and functionality for now and just figure out how to display a card like the one here: https://vaadin.com/directory/component/card
I’ve modified the MessageList class to have this new function that displays a card, but not in a bubble like a response. I’m not sure how exactly to get that behavior, or if it requires new CSS or something. How would I do this?
Card card;
Image img;
public MessageList(String imagePath, String title, String description) {
img = new Image(imagePath, title);
img.setWidth("200px");
img.setHeight("141px");
card = new Card(
new IconItem(img, title, description)
);
card.setWidth("50%");
setClassName(getClass().getSimpleName());
}
public void esportsMessage(String from, Avataaar avatar, String ans,boolean isCurrentUser) {
Span fromContainer = new Span(new Text(from));
fromContainer.addClassName(getClass().getSimpleName() + "-name");
Div textContainer = new Div(new Text(ans));
textContainer.addClassName(this.getClass().getSimpleName() + "-bubble");
Div chatcard = new Div(card);
chatcard.addClassName(getClass().getSimpleName());
Div avatarContainer = new Div(avatar, fromContainer);
avatarContainer.addClassName(getClass().getSimpleName() + "-avatar");
Div line = new Div(avatarContainer, textContainer,chatcard);
line.addClassName(getClass().getSimpleName() + "-row");
add(line);
if (isCurrentUser) {
line.addClassName(getClass().getSimpleName() + "-row-currentUser");
textContainer.addClassName(getClass().getSimpleName() + "-bubble-currentUser");
}
line.getElement().callJsFunction("scrollIntoView");}