How would you re-design this chat window?

I’m having a hard time redesigning the chat window shown in the image attached.

I think it looks too messy and cluttered but the website owner wants to include the message about the usage policy (shown on the right hand side).

I came up with the solution shown on the right but, as shown in the image, I included the message within a ‘pop up bubble’. I’d really appreciate some feedback on whether it works and if not, what would you change.

Thanks very much!

I think a pop-up window works, but it should be higher in the hierarchy and not within each message. Also, the icon looks like there is something wrong, so may need to work on that.

It looks like you’re trying to communicate “communication guidelines” for fairdo messaging. Is that right? The first time a user writes a message on the platform might be a good time to display this content to let people know about these guidelines. Then provide a way for user’s to access this information at a higher level. My hypothesis is that user’s will likely not care to read them at a later time within the messaging interface.

If you do go with displaying a popover when clicking/hovering over the icon, I would recommend using a different icon. The one is the design is typically used for displaying a warning to the user.

First thing i would suggest is change the icon. I suggest ‘i’ icon with circle background. When user enters in the chat window, we can display the message on the top with the different background with close icon. if user close the message by clicking the close icon it will be closed and ‘i’ icon will be displayed with some animations like a border around the circle come and hide.
So user can know that the same message is now available inside the info (‘i’) icon and when user click the icon the message will be displayed in the popup.

First of all don’t use red color for view messages as red is normally used for errors. Don’t use error icon on top right because you’re giving info to the user not an error message.