panel icon indicating copy to clipboard operation
panel copied to clipboard

Add per-user styling to ChatFeed (ChatInterface)

Open CTPassion opened this issue 7 months ago • 1 comments

There is a common requirement to only apply certain styles to users within a chat feed. For me, this was obvious when I wanted to align user and agent messages to the left and right, for a classical conversation UI.

It has been mentioned here holoviz discourse and here #7488

Rather than just providing an alignment kwarg, I believe it more useful to expose the user to the full suite of styling options they may want to apply on a per-user basis. To align right for example, just apply:

ChatInterface(
    ..., 
    user_messages_styles={"user": {"align-self": "flex-end"}}
)

To get it to look correct, I also had to apply some CSS to the .message class:

CHAT_CSS = """
    .message {
        min-height: 15px;
        min-width: fit-content;
        overflow-wrap: normal;
        word-break: normal;
    }
"""
ChatInterface(
    ..., 
    user_messages_styles={"user": {"align-self": "flex-end"}},
    stylesheets=[CHAT_CSS]
)

This way users can not just align messages but also change the colours, fonts, sizes etc. as before, but on a per-user basis rather than globally.

CTPassion avatar May 22 '25 15:05 CTPassion