different 'display modes' for gr.Chatbot

[pngwn]

• I have searched to see if a similar issue already exists.

Is your feature request related to a problem? Please describe.
Previously the Chatbot was more like a mobile message app with chat bubbles. With the popularity of LLMs we modified the design to be more suitable for long form text. However, in doping so we removed the old 'bubble' style in favour of the larger panels.

While LLMs are certainly ubiquitous, there are other uses for chatbots too and i would like us to bring back the bubble style in some form

Describe the solution you'd like
An option to enable 'bubbles' vs 'panels'. Maybe a new kwarg:

display_mode: Literal["bubbles", "panels"] = "panels"

Additional context
We've had a few rquests for this, i just can't find them.

[pngwn]

We could also use this opportunity to clean up the design. Atm i think the chatbot is trying to be two things at once and doesn't quite work for either. This would allows us to tailor the design more carefully.

[abidlabs]

@pngwn @hannahblair this is already taken care of by #5334 right?

[hannahblair]

@abidlabs this is actually more about switching between a conversation-like mode to an LLM mode - conversation mode displaying messages as speech bubbles with user and bot text being displayed on either side of the component (see example img) and the panel mode being displayed similar to that of chatgpt. We think there are different use cases for both designs and users might find this option valuable. Open to thoughts here! I have some improvements on chatbot raised in a separate branch so I picked this up since I'm working on it.

vs

[pngwn]

Yeah. I don't think that PR really solves the core problem. Which in my opinion is that the chatbot is trying to be everything at once and not really succeeding at either. It is one of our most popular components at the minute but I think it lacks the polish of some of the others.

I think we should have explicit short /longform modes that go further than that PR from a design PoV. Whether or not we should reuse the same kwargs isn't something I've thought about.

[abidlabs]

Okay I can see some value in having a full panel layout, with a separate parameter (maybe: layout) to control it.

[gr1336]

For an additional control for each message, i would also recommend changing the way that the messages are handled. This is a something that I had in mind:

# The old history style:
old_message_turn_style = [("User/Outgoing message", "AI/Incoming message")]

# A different way to handle each message/history:
new_message_turn_style = [
    {
        "message": "content", # The content of the message.
        "incoming": False, # This can be used to set the message balloon on the left or right side. Defaults to False.
        "entity": "Username", # The name of the entity that can be displayed below the image defined for it. It can default to 'None' so that no name would be displayed.
        "Image": "characters/user/def.png", # Where the image will be used in the current entity. The default is None. If 'avatar_images' has been defined, use it as the default.
        "colorset": ["#434343", "#FFFFFF"] # This option would be interesting to define a different background for different entities. If not defined, use the default turn colors.
    }
]
# Examples of messages, if only using the non-optional values:
minimal_history_from_new_turn_style = [
    {
        "message": "Hello, who are you?", #User's message
    },
    {
        "message": "Hello, I'm Gradio! How can I help you?", #AI's message
        "incoming": True
    },
]