Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Elements with display of side and page are not showing #1559

Closed
tmtsmrsl opened this issue Dec 2, 2024 · 5 comments
Closed

Elements with display of side and page are not showing #1559

tmtsmrsl opened this issue Dec 2, 2024 · 5 comments
Labels
bug Something isn't working frontend Pertains to the frontend. needs-triage

Comments

@tmtsmrsl
Copy link

tmtsmrsl commented Dec 2, 2024

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
image

Desktop (please complete the following information):

  • OS: Windows 11
  • Browser: Chrome, Edge

Dependency

chainlit==1.3.2
@dosubot dosubot bot added bug Something isn't working frontend Pertains to the frontend. labels Dec 2, 2024
@dokterbob
Copy link
Collaborator

@dosu Any idea what might be going on?

@dosubot DosuBot
Copy link

dosubot bot commented Dec 3, 2024

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
Copy link

hadarsharon commented Dec 3, 2024 •
edited
Loading

@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()

@willydouhard
Copy link
Collaborator

Yep this is correct!

@falense
Copy link

falense commented Jan 12, 2025

This should be mentioned in the docs. It is not clear. A single sentence added here: https://docs.chainlit.io/api-reference/elements/text#param-display would be amazing!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working frontend Pertains to the frontend. needs-triage
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@dokterbob @falense @willydouhard @hadarsharon @tmtsmrsl