Chatbot: limit width of chat bubbles to be the size of the messages

[lucasjinreal]

Is there a way to add max width constraints to bubbles containing the messages?

[abidlabs]

Hi @lucasjinreal what do you mean by bubbles? Can you please provide example code to repro and explain what you are getting vs. what you are expecting?

[lucasjinreal]

@abidlabs Hello, its about ChatBot UI component.

1. As you can see, the bubbles in both incoming and outcoming are have a large free space：

Would it better to make it fit automatically to content just like iMessages?

2. My bottom have a TextBox and a Button, how can I make it align vertically?

[abidlabs]

Thanks for the clarification, @lucasjinreal I've renamed the issue to reflect #1, it's something we'll think about!

[lucasjinreal]

@abidlabs thank u.

I just find a repo using gradio made it, do u know what code they possible use? (nevertheless you are the creator of gradio!)

as you can see, their incoming bubble of mine, is limited width

[abidlabs]

You can see their code here: https://huggingface.co/spaces/project-baize/chat-with-baize/blob/main/app.py

[yvrjsharma]

Hi @lucasjinreal, in case you are still trying to figure out the solution, you can use custom CSS to limit the width of chatbot bubbles to the text size. We have addressed this query on our Discord server here if this is helpful - https://discord.com/channels/879548962464493619/1115927377277628517/1115927377277628517

[1ittlesnow]

with gr.Blocks( title="Chat with Open Large Language Models", theme=gr.themes.Base(), css=block_css, ) as demo:
When you create Blocks, there is a block_css. Ctrl click it.
Change 'block_css'.
Add [data-testid = "bot"] and [data-testid = "user"].
The property 'max_width' is its limit width of chat bubbles.

block_css = ( code_highlight_css + """ pre { white-space: pre-wrap; /* Since CSS 2.1 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } #notice_markdown th { display: none; } #notice_markdown td { padding-top: 8px; padding-bottom: 8px; } #leaderboard_markdown td { padding-top: 8px; padding-bottom: 8px; } """ )

block_css = ( code_highlight_css + """ pre { white-space: pre-wrap; /* Since CSS 2.1 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } #notice_markdown th { display: none; } #notice_markdown td { padding-top: 8px; padding-bottom: 8px; } #leaderboard_markdown td { padding-top: 8px; padding-bottom: 8px; } [data-testid = "bot"] { max-width: 75%; width: auto !important; border-bottom-left-radius: 0 !important; } [data-testid = "user"] { max-width: 75%; width: auto !important; border-bottom-right-radius: 0 !important; } """ )

[abidlabs]

Thanks @1ittlesnow for the custom css.

We may add it at some point as an option within the chatbot but not a priority right now since there's a workaround. (cc @dawoodkhan82)

[dawoodkhan82]

@abidlabs @1ittlesnow We might not add an option to adjust the chat bubble width. But one this we are considering is allowing devs to choose from a few select chatbot styles. One of these styles would include a chatbot where the bubbles are only as wide as the message (along with other style changes).

[abidlabs]

Just brainstorming here, but wouldn't it be better to have separate parameters for these options in case someone wants to stick to the default style but have limited-width bubbles?

[dawoodkhan82]

Since removing the style() method, we would have to add this as a param to the init of chatbot or maybe as a theme var? But not completely convinced we want to expose changing things like height/width. Thoughts @pngwn?

[austinmw]

Would look nicer IMO if the chat bubbles only extended to the width of the message (from the left or right, depending on user/bot)

[Keldos-Li]

I just find a repo using gradio made it, do u know what code they possible use? (nevertheless you are the creator of gradio!)

as you can see, their incoming bubble of mine, is limited width

Apologize for following up on comments under an issue that hasn't seen new progress for quite some time. However, in fact, as shown in this image, Baize used the code from our ChuanhuChat project to build this demo:

@lucasjinreal You can review our project code here: https://github.com/GaiZhenbiao/ChuanhuChatGPT