#ChatView

A ChatView is a list of chat messages: incoming messages on the left, outgoing messages on the right, and system messages in the middle.

How to add a chat:

<tb:ChatView name="chat" max-messages="200" />
<ui:TextField name="chatInput" />
<ui:Button name="chatSend" text="Send" />

var chat = root.Q<ChatView>("chat");
var input = root.Q<TextField>("chatInput");

chat.Add("", "Ada joined the chat", ChatSide.System);
chat.Add("Ada", "Hello! Are you <b>there</b>?", time: "10:02");

root.Q<Button>("chatSend").clicked += () =>
{
    chat.Add("Me", input.value, ChatSide.Outgoing, DateTime.Now.ToString("HH:mm"));
    input.value = "";
};

// History: the user scrolled to the top
chat.OlderMessagesRequested += () => chat.Prepend(history.NextPage());

The view has no text input. Add a TextField and a button under it, as in the example.

The view fills the room that its parent has (flex-grow: 1), and its messages do not make it higher. Give the parent a height, or set flex-grow: 0 and a height on the view. With no height, the view is 80 px high.

A ChatMessage has these properties:

To show that a sender writes, add a message with Typing set. When the text comes, set Typing to false and call Update:

var message = chat.Add(new ChatMessage { Sender = "Ada", Typing = true });
// later
message.Typing = false;
message.Text = "On my way.";
message.Time = "10:04";
chat.Update(message);

• Messages of one sender in a row make a group. Only the first message of the group shows the name and the avatar.
• While the list is at the end, it follows each new message.
• When the user scrolls up, the list stays. A button in the bottom right corner shows the count of new messages. A click on it scrolls to the end.
• An outgoing message scrolls the list to the end.
• The view drops the oldest messages only while the list is at the end, so a user who reads older messages keeps them. When the list comes back to the end (the user scrolls down, or clicks the button), the view drops the extra messages. Prepend has no limit.
• The dots of a Typing message go up one after the other. They stop when AnimateTyping is false or when the workspace has its animations off (WindowAnimations).
• To put an emoji into the text field, add an EmojiButton next to it.
• Up and Down scroll the list when the view has the focus, also with a gamepad. Page Up, Page Down, Home and End work too. At the top and at the end, Up and Down move the focus to the next control.
• An outgoing message and a system message show no avatar and no name.
• In the UI Builder, a view without messages shows a sample conversation in a dashed outline. The sample does not show in Play mode or in a build, and the UI Builder does not save it to the UXML file.
• The tooltip of the button comes from ToolboxText (SCROLL_TO_END).

Tips:

• Each message is a set of elements, so keep MaxMessages low. Load the history in pages with OlderMessagesRequested.
• Give the view a height, or put it in a parent with flex-grow. The view grows to fill its parent.
• For a status such as "sending", change Time or Text of the message and call Update.
• The text of a message is rich text. Remove the tags from text that a user typed if the user must not use them.

#Styling

The rules are in Assets/UIToolbox/Runtime/Resources/UIToolbox/Styles/Controls.uss.

To make the bubbles square and the outgoing bubbles green:

.tb-chat-view__bubble { border-radius: 0; }
.tb-chat-view__row--outgoing .tb-chat-view__bubble { background-color: var(--tb-color-success); }