Elements with display of side and page are not showing

[tmtsmrsl]

Describe the bug Elements only show when using display of "inline". When using display of "side" or "page", elements do not show.

To Reproduce Steps to reproduce the behavior:

import chainlit as cl

@cl.on_chat_start
async def start():
    elements = [
        cl.Text(name="inline_text", content="This is inline text", display="inline"),
        cl.Text(name="side_text", content="This is side text", display="side"),
        cl.Text(name="page_text", content="This is page text", display="page"),
        cl.Image(url="https://raw.githubusercontent.com/yavuzceliker/sample-images/refs/heads/main/images/image-1.jpg", name="inline_image", display="inline"),
        cl.Image(url="https://raw.githubusercontent.com/yavuzceliker/sample-images/refs/heads/main/images/image-2.jpg", name="side_image", display="side"),
        cl.Image(url="https://raw.githubusercontent.com/yavuzceliker/sample-images/refs/heads/main/images/image-3.jpg", name="page_image", display="page")

    ]

    await cl.Message(
        content="Check out the following elements!",
        elements=elements,
    ).send()

Expected behavior All Text and Image elements should show up in the frontend. Currently only the inline Text and Image elements show up.

Screenshots

Desktop (please complete the following information):

• OS: Windows 11
• Browser: Chrome, Edge

Dependency

chainlit==1.3.2

[dokterbob]

@dosu Any idea what might be going on?

[dosubot[bot]]

The issue with elements not showing when using the "side" or "page" display options is likely due to the requirement that the name of the element must be included in the content of the message for the link to be created. This is necessary for "side" and "page" displays to function correctly. Ensure that the names of the elements are mentioned in the message content. For example:

await cl.Message(
    content="Check out the following elements: side_text, page_text, side_image, page_image!",
    elements=elements,
).send()

Including the element names in the message content should allow the "side" and "page" elements to be displayed as clickable links in the Chainlit interface ^[1].

To continue talking to Dosu, mention @dosu.

[hadarsharon]

@tmtsmrsl AFAIK the bot is correct - unless the name is part of the content somehow (e.g. replace side text with side_image) it won't work. Seems to be a hard requirement right now with how Chainlit works?

Try this:

@cl.on_chat_start
async def start():
    elements = [
        cl.Text(name="inline_text", content="This is inline text", display="inline"),
        cl.Text(name="side_text", content="This is side_image", display="side"),
        cl.Text(name="page_text", content="This is page_image", display="page"),
        cl.Image(url="https://raw.githubusercontent.com/yavuzceliker/sample-images/refs/heads/main/images/image-1.jpg", name="inline_image", display="inline"),
        cl.Image(url="https://raw.githubusercontent.com/yavuzceliker/sample-images/refs/heads/main/images/image-2.jpg", name="side_image", display="side"),
        cl.Image(url="https://raw.githubusercontent.com/yavuzceliker/sample-images/refs/heads/main/images/image-3.jpg", name="page_image", display="page")

    ]

    await cl.Message(
        content="Check out the following elements!",
        elements=elements,
    ).send()