Elements

Text messages are the building blocks of a chatbot, but we often want to send more than just text to the user. We want to send images, videos, and other types of data. Chainlit provides a simple way to send these elements to the user interface and gives you control on how and where to display them.

​

How it works

Once an element is sent to the user interface, the user interface will render the element based on the following:

• Whether the element’s name is explicitly mentioned in a message
• The display option of the element

​

Display Options

There are display options that determine how an element is rendered in the context where it is being used. The ElementDisplay type represents these options. The following display options are available:

​

Side

This will display the element on a sidebar. The sidebar is hidden by default and opened upon element reference click.

​

Page

This will display the element on a separate page. The user will be redirected to the page upon element reference click.

​

Inline

This will always display the element below the message regardless of whether it is explicitly mentioned in the message.

​

Add an element to a message

import chainlit as cl


@cl.on_chat_start
async def start():
    # Send the first message without the elements
    content = "Here is image1, a nice image of a cat! As well as text1 and text2!"

    await cl.Message(
        content=content,
    ).send()

    elements = [
        cl.Image(path="./cat.jpeg", name="image1", display="inline"),
        cl.Text(content="Here is a side text document", name="text1", display="side"),
        cl.Text(content="Here is a page text document", name="text2", display="page"),
    ]

    # Send the second message with the elements
    await cl.Message(
        content=content,
        elements=elements,
    ).send()

If we look at the rendering of the above code, we can see that the elements are only displayed in the second message.