Trying to display a card in a chat window

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");}

You might want to take a look at AIML Rich Media Tags. Not sure that helps, but maybe it does.

Alejandro Duarte:
You might want to take a look at AIML Rich Media Tags. Not sure that helps, but maybe it does.

I’m not sure they’re supported. I tried them with this example and it just prints the XML as the response. Nothing renders on screen.

<?xml version="1.0" encoding="ISO-8859-1"?>
<aiml version="2.1">

<category><pattern>ESPORTS</pattern>
<template>
<card>
           <button>
            <text>Learn More</text>
            <postback>xlearnmoreabout cards</postback>
           </button>
          </card>
       </template>
</category>
</aiml>

I’ve tried several different AIML versions and tried swapping out the goldenrenard package for what I think is the more recent one “jb”. Nothing worked.