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.
Text Element
Ideal to display RAG sources.
Image Element
Ideal to display generated images.
PDF Element
Ideal to display RAG sources.
More Elements
The complete list of elements you can display on the user interface.
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.
Was this page helpful?