Changing the style of the chatbot

[mtanco]

Using custom CSS we can change the font, color, and background of the bots and humans in a chatbot.

from h2o_wave import main, app, Q, ui, on, handle_on, data


@app('/')
async def serve(q: Q):
    q.page['meta'] = ui.meta_card(
        box='',
        layouts=[ui.layout(breakpoint='xs', zones=[ui.zone('content')])],
        stylesheet=ui.inline_stylesheet("""
        
/* Messages from the User: from_user=True */
.msgWrapper-100 {
    color: navy !important;                   
    background-color: lightgray !important;     
    font-family: serif !important; 
}

/* Messages from the Bot: from_user=False */
.msgWrapper-100.botMsg-102 {
    color: darkgreen !important;             
    background-color: beige !important;        
    font-family: sans-serif !important;
}
        """)
    )

    # First time a browser comes to the app
    q.page['chatbot_card'] = ui.chatbot_card(
        box='content',
        name='chatbot',
        data=data(fields='content from_user', t='list', rows=[
            ['Hello, buddy. Can you help me?', True],
            ['Sure, what you need?', False],
            ['Hello, buddy. Can you help me?', True],
            ['Sure, what you need?', False],
        ]),
    )

    await q.page.save()

@mturoci Do you have any concerns with using the out-of-the-box wave classes? Im not sure if these are likely to change in the future

[mturoci]

Im not sure if these are likely to change in the future

Yeah, these are very likely to change, unfortunately. They are fine to use, but you need to prepare to fix them on every upgrade.