chatbox is squeezed by sidebar drawer on mobile devices

[xleven]

See screenshot below:

Maybe an standalone drawer layer above chat makes more sense.

[willydouhard]

Definitely, the UI is not completely responsive as of now, we will definitely improve that over time

[ArchitGajjar]

@xleven can you please assign this to me and share the designs also for different devices(e.g. tablets/mobiles). Thank you!

[xleven]

@ArchitGajjar Hi, sorry but I don't have the permission. CC: @willydouhard

As for responsive designs, after code reading I guess some minimal modifications of SideView will work. Will give it a try when I have time.

[ArchitGajjar]

HI @xleven - could you please share me the steps to reproduce this responsive error ? I am running this application in my machine and I can see below screen. How did you generate the side-text in the screenshot above ? :)

Please let me know if I am missing anything.

[xleven]

HI @xleven - could you please share me the steps to reproduce this responsive error ? I am running this application in my machine and I can see below screen. How did you generate the side-text in the screenshot above ? :)

Sure! A sidebar drawer will be called out when you click any elements with a display option of side, which you can create and add to messages.

Here is the code snippet which gave me the result:

@cl.on_chat_start
async def start():
    elements = [
        cl.Text(name="side-text", display="side", content="Side Text"),
        cl.Text(name="page-text", display="page", content="Page Text"),
    ]
    await cl.Message("hello side-text and page-text", elements=elements).send()

Hope it helps!

[xleven]

Tried a small patch to make the side drawer floating over the main chatbox.

Add these css

  position: 'absolute',
  right: 0,
  height: 'calc(100% - 60px)',

in Drawer component, for example here under display https://github.com/Chainlit/chainlit/blob/1fd804b268277b4af8ab55275767a0500e276eb8/src/chainlit/frontend/src/components/element/sideView.tsx#L62-L63

Note some tweaking of width is still needed for small screens.

[willydouhard]

Yes. Ideally the side bar would only float on mobile devices

[xleven]

180