ChatBot component with layout="panel' shows chat bubbles and user utterance not left-aligned

[ErnstDinkelmann]

Describe the bug

When a gr.Chatbot(layout="panel") is created, it does not look like in a previous version.
Mainly, the user's utterance is right aligned, AND both utterances are in a bubble. Previously there was no bubble and all text was left-aligned. So the 'panel' layout was well-distinquished from the 'bubble' layout and worked well for LLM chats, especially on wide screens.

Previous version = 4.32.2 (conda-forge)
Curent version = 4.39.0 (conda-forge)

Have you searched existing issues? 🔎

• I have searched and found no existing issues

Reproduction

import gradio as gr

def func():
    return gr.update(value=[['hallo', 'hi there'], ['how are you doing?', 'I am doing awesome thank you. And how are you?']])

with gr.Blocks(theme=gr.themes.Base(), analytics_enabled=False) as demo:
    ai = gr.Chatbot(
        show_label=False,
        container=False,
        layout='panel',
    )

    demo.load(
            fn=func,
            inputs=None,
            outputs=[ai],
        )

    demo.title = 'test'
    demo.queue()


    demo.launch(share=False, server_name='0.0.0.0', server_port=8080, ssl_verify=False, root_path='/')

Screenshot

Logs

No response

System Info

Gradio Environment Information:
------------------------------
Operating System: Linux
gradio version: 4.39.0
gradio_client version: 1.1.1

------------------------------------------------
gradio dependencies in your environment:

aiofiles: 23.2.1
anyio: 4.2.0
fastapi: 0.103.0
ffmpy: 0.3.0
gradio-client==1.1.1 is not installed.
httpx: 0.26.0
huggingface-hub: 0.20.0
importlib-resources: 6.1.1
jinja2: 3.1.2
markupsafe: 2.1.3
matplotlib: 3.8.2
numpy: 1.26.2
orjson: 3.9.10
packaging: 23.2
pandas: 2.1.4
pillow: 10.1.0
pydantic: 2.5.3
pydub: 0.25.1
python-multipart: 0.0.9
pyyaml: 6.0.1
ruff: 0.4.1
semantic-version: 2.10.0
tomlkit==0.12.0 is not installed.
typer: 0.9.0
typing-extensions: 4.9.0
urllib3: 2.1.0
uvicorn: 0.25.0
authlib; extra == 'oauth' is not installed.
itsdangerous; extra == 'oauth' is not installed.


gradio_client dependencies in your environment:

fsspec: 2023.10.0
httpx: 0.26.0
huggingface-hub: 0.20.0
packaging: 23.2
typing-extensions: 4.9.0
websockets: 11.0.3

Severity

Blocking usage of gradio

[abidlabs]

We should think about whether we want to keep layout="panel" in 5.0 -- cc @pngwn @dawoodkhan82

[ErnstDinkelmann]

Probably not related to this issue, but I just noticed in the environment info:
gradio_client version: 1.1.1
gradio-client==1.1.1 is not installed.

[awonglk]

Having the same issue. I've rolled back to Gradio 4.35.0 to get the "old" behaviour of panel displaying all text left-aligned.
Would be great if we can get an idea what the roadmap is for "panel". Or if there's a temporary CSS fix that we can apply

[pngwn]

Could you explain why you prefer the panels layout (the original one)? Is it one specific thing or should does it behave better for certain use-cases or do you just prefer the overall more 'chatgpt' style layout?

(this comment is unrelated to this issue which is a regression and will be fixed)

[ErnstDinkelmann]

Our use case is a corporate QA RAG system, which is not really meant to be conversational although the answers is of course in natural language. In this sense, the panel layout, without the speech bubbles, just felt more 'down-to-business' without the 'unnecessary' visual elements of speech bubbles and thus more professional. In my opinion it also feels more trustworthy, although it's exactly the same answers.
Furthermore, having user and bot utterances left, just with slightly different backgrounds, makes it much easier for users on wide screens to follow - our main channel is normal desktop browsers, so when user queries and bot answers are short, a few times in a row, to follow the history becomes more difficult with opposite horisontal alignment.
It also feels like panel takes less vertical space - I may be wrong though, didn't check this.

[pngwn]

That is very interesting, thank you!

[ErnstDinkelmann]

If I may ask, what sort of timelines are we talking here - days/weeks/longer ?

[ErnstDinkelmann]

I further picked up that there is an additional div tag around the chatbot elements on the layout="panel" scenario
<div class="flex-wrap bot svelte-1ggj411"></div>
This has a visible border, adds more padding, etc.

This is also unwanted in the panel case I think.

[wknupe]

The property "bubble_full_width=True" is also not being honored; the bubbles displayed (despite the 'panel' setting) are always set to the width of the text, as observed in gradio version 4.42.0.

[abidlabs]

Closed via #9499

[arunabh98]

I don't think is still fixed - #8903 (comment)

The property "bubble_full_width=True" is also not being honored; the bubbles displayed are always set to the width of the text.

[abidlabs]

@arunabh98 would you be able to create a new issue with a repro?