panel
panel copied to clipboard
Add per-user styling to ChatFeed (ChatInterface)
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.