Chat Widget: Align user messages to right

[tomscoorch]

I wanted to kindly suggest a small enhancement to the chat widget that I believe could improve user experience.

Currently, all messages in the chat are aligned to the left by default. In most chat interfaces (such as ChatGPT, WhatsApp, etc.), user messages are typically aligned to the right. This makes it much easier to distinguish between the user's messages and the bot's responses, and overall helps to reduce confusion.

Would it be possible to implement an option where user messages and the associated avatar/logo are aligned to the right, either as a default or on a per-user basis? I believe this small adjustment would make the chat interface much clearer and more user-friendly.

Thank you very much for considering this request. I appreciate your time and look forward to hearing your thoughts on this.

Example from ChatGPT:

[ahuang11]

Sure, I'd be okay with adding an user_messages_align param. Would you be interested in implementing it?

Potentially, it's super() inheriting from Feed https://github.com/holoviz/panel/blob/main/panel/chat/feed.py#L398 and if user == self.user statement and align="end":
https://github.com/holoviz/panel/blob/main/panel/chat/interface.py

[tomscoorch]

Dear Amdrew, thanks for the quick response. I am an unprofessional hobby coder with no/few experience in GitHub, so I am afraid I can not implement it myself. Sorry. Hope to get better in coding and be able to contribute some time. Panel is really great. Von: Andrew ***@***.***> Gesendet: Mittwoch, 13. November 2024 09:40 An: holoviz/panel ***@***.***> Cc: tomscoorch ***@***.***>; Author ***@***.***> Betreff: Re: [holoviz/panel] Chat Widget: Align user messages to right (Issue #7488) Sure, I'd be okay with adding an user_messages_align param. Would you be interested in implementing it? Potentially, it's just adding an if statement and align="end" here: https://github.com/holoviz/panel/blob/main/panel/chat/feed.py#L398 — Reply to this email directly, view it on GitHub <#7488 (comment)> , or unsubscribe <https://github.com/notifications/unsubscribe-auth/BIVTW7C6KG72JDLJ2C3N55L2AMF53AVCNFSM6AAAAABRV2AYTCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDINZSHA2DIOJTGY> . You are receiving this because you authored the thread.Message ID: ***@***.***>