Closed xleven closed 1 year ago
Definitely, the UI is not completely responsive as of now, we will definitely improve that over time
@xleven can you please assign this to me and share the designs also for different devices(e.g. tablets/mobiles). Thank you!
@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.
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.
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!
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.
Yes. Ideally the side bar would only float on mobile devices
See screenshot below:![image](https://github.com/Chainlit/chainlit/assets/10850975/99b63819-bccd-4ee9-8152-e61326763ead)
Maybe an standalone drawer layer above chat makes more sense.