Customize chatinterface

Looks like we are both struggling with similar issues. Here is how far I got with ChatInterface:

message_params = dict(
    default_avatars = {"System": "☂️", "User": "👤"},   # this does not apply to creating a ChatMessage. Does ChatFeed have a creation function?
    reaction_icons  = {},
    show_user       = False,
    show_timestamp  = False,
    show_copy_icon  = False,
    sizing_mode     = "scale_width",
)
STYLE = """
.avatar {
    border-radius:50%;
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
}
.left {
    min-height: 10px;
    height: 18px;
}
.center {
    /* background-color: yellow; */
    margin-right:0px;
    width: calc(100% - 5px); 
}
.message {
    min-height: 15px;
}
.right {
  margin-left: 0;
  /* background-color: gray; */
}
"""
gui = pn.chat.ChatInterface( message_params=message_params,
                             show_rerun=False, show_undo=False,
                             stylesheets=[STYLE],
                             #css_classes=[STYLE],
                             widgets=pn.widgets.TextAreaInput(  placeholder=">", auto_grow=True, max_rows=10 ),
                             height=500,
                           )
gui

I can use the send button, or add a message directly, with somewhat different results:

msg = gui.send( pn.chat.ChatMessage(
                 avatar          = "☂️",
                 stylesheets     = [STYLE],
                 show_user       = False,
                 show_timestamp  = False,
                 show_copy_icon  = False,
                 sizing_mode     = "stretch_width",
))
txt=""
for n in "Updating the message works, streaming to it does not.... ":
    txt += n 
    msg.update(txt)

Comments

  • I instantiated the gui turning some of the buttons off, adding avatars and specifying a style for chat message components.
  • using the send button has the avatar out of place for some reason
  • using python to send a messages fixes that issue

Hope some of this helps you out…