TWebChatBox

Description

TWebChatbox is a control designed for allowing users to send messages. The messages sent by the user are displayed right-aligned in the chatbox and the messages received from other users are displayed left-aligned.

Designtime	Runtime

Properties for TWebChatbox

Property	Description
AvatarURL	Sets the URL for default user avatar image
FileUpload	TWebFilePicker control so you can set the required properties to upload a file
AllowFiles	Set to true if you want to enable the sending of files
AllowEmptyMessages	Set to true if you want to enable the sending of empty messages
ChatMessageFont	Sets the default message font
ChatMessageInfoFont	Sets the default message info font
DateTimeFormat	Sets the format string for message timestamp display
EmojiPicker	When true, the emoji picker is shown in the chatbox
IncomingChatBubbleBorderColor	Sets the default border color for incoming chat message bubbles
IncomingChatBubbleColor	Sets the default background color for incoming chat message bubbles
IncomingChatBubbleElementClassName	Sets the default CSS class for the incoming chat message bubbles
InputElementClassName	Sets the CSS classname for the text entry HTML input control
InputTextBoxBorderColor	Sets the border color for the text entry area
InputTextBoxColor	Sets the background color for the text entry area
InputTextBoxEnabled	Sets whether the input textbox is enabled for entry or not
InputTextBoxFont	Sets the font for the text entry area
InputTextBoxHeight	Sets the height for the input text area
MessageHint	Hint displayed for the text entry area
Messages	Collection of incoming and outgoing messages displayed in the chatbox
OutgoingChatBubbleBorderColor	Sets the default border color for outgoing chat message bubbles
OutgoingChatBubbleColor	Sets the default background color for outgoing chat message bubbles
OutgoingChatBubbleElementClassName	Sets the default CSS class for the outgoing chat message bubbles
SendButtonBorderColor	Sets the border color for the text send button
SendButtonCaption	Sets the text for the text send button
SendButtonColor	Sets the background color for the text send button
SendButtonElementClassName	Sets the CSS class for the send text button
SendButtonFont	Sets the font for the send text button
SendButtonImageURL	Sets the image for the send text button
SendButtonWidth	Sets the width in pixels of the send button in the input area
UserAvatarsEnabled	When true, an avatar is show on the chat bubble
UserAvatarURL	Sets the URL for the avatar of the current user of the chatbox sending messages
Username	Sets the username for the current user of the chatbox sending messages

Events for TWebChatbox

Event	Description
OnCreateChatBubble	Event triggered when the user is about to send a chat message, allowing to customize the bubble before being displayed
OnSendMessage	Event triggered when a message is ready to be sent

Methods for TWebChatbox

Method	Description
ReceiveMessage(const Value: TMessage)	Call ReceiveMessage() when a new message is received from the server and needs to be displayed as chat bubble in the TWebChatbox control

TMessage

The TWebChatbox displays messages in bubbles in the chatbox control. This is managed by the Messages collection that consists of items of the type TMessage class.

Properties for TMessage

Property	Description
AvatarEnabled	When true, the avatar is displayed in the chat bubble
AvatarURL	Sets the URL for the avatar
BorderColor	Sets the default message font
ChatMessage	Sets the default message info font
Color	Sets the format string for message timestamp display
ElementClassName	Sets the CSS class for the message bubble
Outline	Align the chat bubble left or right from the chatbox
Sender	Sets the chat message sender name
Tag	Integer value
Timestamp	Sets the timestamp for when the chat message was received

Events for TMessage

Property	Description
OnClickChatBubble	Event triggered when the chat bubble is clicked