Chat

Namespace: Wisej.Web.Ext.Syncfusion2

Assembly: Wisej.Web.Ext.Syncfusion2 (4.1.0.0)

Control
- Widget
  - ej2Base
    - Chat

The Chat UI component is a modern conversation surface that supports messages, mentions, typing indicators, replies, pinning, forwarding and attachments.

C#
VB.NET

public class Chat : ej2Base

Public Class Chat
    Inherits ej2Base

The control wraps the Syncfusion EJ2 ej.interactivechat.ChatUI widget. The typed properties (User, Messages, MentionUsers, HeaderToolbar and so on) are converted to the ChatUI options with the same name in camel case and stored in Options.

The model objects are converted when they are assigned: changing a field of a ChatUser, ChatMessage or settings object after the assignment is not sent to the browser until the property is assigned again. Use AddMessage, UpdateMessage, RemoveMessage and ClearMessages to change the transcript of a chat that is already displayed.

When EnableAttachments is true, the control itself receives the files uploaded from the composer and saves them in the folder specified by Path, unless SaveUrl and RemoveUrl point to a different service.

Example:

The following example creates a chat, sets the current user, loads the initial transcript, handles the messages sent by the user and adds a reply from another user.

var bot = new Chat.ChatUser { Id = "u2", User = "Syncfusion Bot" };

var chat = new Chat();
chat.Dock = DockStyle.Fill;
chat.HeaderText = "Support";
chat.User = new Chat.ChatUser { Id = "u1", User = "Wisej User" };
chat.Messages = new[]
{
	new Chat.ChatMessage { Id = "seed-1", Author = bot, Text = "Welcome. How can I help?", TimeStamp = DateTime.Now }
};
chat.MessageSend += (s, e) =>
{
	// e.Message is the message typed by the current user.
	if (String.IsNullOrWhiteSpace(e.Message?.Text))
		e.Cancel = true;
	else
		AlertBox.Show("Sent: " + e.Message.Text);
};
this.Controls.Add(chat);

// Later, when the other party answers:
chat.AddMessage(new Chat.ChatMessage { Author = bot, Text = "Thanks, we are looking into it." });

Constructors

Chat()

Initializes a new instance of the Chat control with the default settings.

The control is created with a default size of 450 x 380 pixels and a default AttachmentSettings instance. Configure it through the typed properties or through Options.

Example:

The following example creates a chat, sets the current user and adds the control to the page.

var chat = new Chat();
chat.Dock = DockStyle.Fill;
chat.HeaderText = "Support";
chat.User = new Chat.ChatUser { Id = "u1", User = "Wisej User" };
this.Controls.Add(chat);

Chat(options)

Initializes a new instance of the Chat control with optional Syncfusion ChatUIModel settings.

Name	Type	Description
options	Object	An optional object containing Syncfusion ChatUIModel-compatible settings. It can be an anonymous object, a JSON string or `null`.

The field names in options are the Syncfusion ChatUI option names (camel case). The values of user, messages, mentionUsers, typingUsers, suggestions, headerToolbar, messageToolbarSettings, attachmentSettings and of the template options are also read back into the corresponding typed properties, for example User and Messages.

Example:

The following example creates a chat passing the ChatUI options as an anonymous object.

var chat = new Chat(new
{
	headerText = "Team chat",
	placeholder = "Write a message...",
	user = new { id = "u1", user = "Wisej User" }
});
chat.Dock = DockStyle.Fill;
this.Controls.Add(chat);

// The options are also available through the typed properties.
string userName = chat.User.User; // "Wisej User"

Properties

AttachmentSettings

FileAttachmentSettings: Gets or sets the Syncfusion attachment settings used for upload, remove, preview and attachment templates. (Default: null)

The value is sent to the widget as the ChatUI attachmentSettings option and takes effect when EnableAttachments is true. The property never returns null: assigning null restores a default FileAttachmentSettings instance.

When SaveUrl or RemoveUrl is empty, it is set to the URL of the upload service built into this control, which saves the uploaded files in (and removes them from) the folder specified by Path.

The settings are converted when the property is assigned. Assign the property again after changing a field of the settings object.

Example:

The following example enables attachments and stores the uploaded files in a folder of the application.

chat.EnableAttachments = true;
chat.AttachmentSettings = new Chat.FileAttachmentSettings
{
	Path = "App_Data/ChatUploads",
	AllowedFileTypes = ".png,.jpg,.pdf",
	MaxFileSize = 5000000,
	MaximumCount = 3
};

AutoScrollToBottom

Boolean: Gets or sets whether the chat scrolls to the newest message when a message is added. (Default: False)

EmptyChatTemplate

String: Gets or sets the template displayed when the chat has no messages. (Default: "")

The value is an HTML template string passed to the ChatUI emptyChatTemplate option.

Example:

The following example shows a custom message while the transcript is empty.

chat.EmptyChatTemplate =
	"<div style='text-align:center;padding:20px'>" +
	"<h3>No messages yet</h3><p>Type a message to start the conversation.</p>" +
	"</div>";

EnableAttachments

Boolean: Gets or sets whether attachment uploads are enabled in the chat composer. (Default: False)

The upload behavior is configured through AttachmentSettings.

EnableCompactMode

Boolean: Gets or sets whether compact mode is enabled. (Default: False)

EnablePersistence

Boolean: Gets or sets whether Syncfusion persistence is enabled. (Default: False)

EnableRtl

Boolean: Gets or sets whether right-to-left rendering is enabled. (Default: False)

FooterTemplate

String: Gets or sets the template rendered in the chat footer. (Default: "")

The value is an HTML template string passed to the ChatUI footerTemplate option.

HeaderIconCss

String: Gets or sets the CSS class used for the header icon. (Default: "")

HeaderText

String: Gets or sets the header text displayed by the chat. (Default: "Chat")

HeaderToolbar

ToolbarSettingsModel: Gets or sets the toolbar settings displayed in the chat header. (Default: null)

The value is sent to the widget as the ChatUI headerToolbar option when the property is assigned. Handle HeaderToolbarItemClicked to react to the clicks.

Example:

The following example adds two buttons to the right side of the header.

chat.HeaderToolbar = new Chat.ToolbarSettingsModel
{
	Items = new[]
	{
		new Chat.ToolbarItem { IconCss = "e-icons e-refresh", Tooltip = "Clear", Align = "Right" },
		new Chat.ToolbarItem { Text = "Help", Align = "Right" }
	}
};

LoadOnDemand

Boolean: Gets or sets whether older messages are loaded on demand while scrolling. (Default: False)

Locale

String: Gets or sets the Syncfusion locale override for the chat. (Default: "")

MentionTriggerChar

String: Gets or sets the single character that opens the mention suggestion popup. (Default: "@")

Assigning null, an empty string or white space restores the default character @.

MentionUsers

ChatUser[]: Gets or sets the users available in the mention suggestion popup. (Default: null)

The popup opens when the user types the MentionTriggerChar in the composer. In the message received by MessageSend each mention is replaced in Text by a placeholder ({0}, {1}, ...) that refers to the entry of MentionUsers with the same index.

Example:

The following example defines the users that can be mentioned.

chat.MentionUsers = new[]
{
	new Chat.ChatUser { Id = "u1", User = "Wisej User" },
	new Chat.ChatUser { Id = "u2", User = "Syncfusion Bot" }
};

Messages

ChatMessage[]: Gets or sets the messages displayed in the chat transcript. (Default: null)

Assigning the property replaces the whole transcript in the widget (ChatUI messages option). Use it to load the initial conversation; use AddMessage, UpdateMessage, RemoveMessage and ClearMessages to change a conversation in progress.

The control keeps the array in sync with those methods and appends the messages sent by the user after MessageSend is handled. The array is replaced by a new instance on every change: read the property again instead of keeping a reference to it. The value can be null when no message was assigned.

Example:

The following example loads the initial transcript and then finds a message by its identifier.

chat.Messages = new[]
{
	new Chat.ChatMessage
	{
		Id = "seed-1",
		Author = new Chat.ChatUser { Id = "u2", User = "Syncfusion Bot" },
		Text = "Welcome.",
		TimeStamp = DateTime.Now
	}
};

Chat.ChatMessage first = (chat.Messages ?? new Chat.ChatMessage[0]).FirstOrDefault(m => m.Id == "seed-1");

MessageTemplate

String: Gets or sets the template used to render individual messages. (Default: "")

The value is an HTML template string passed to the ChatUI messageTemplate option. The template replaces the default rendering of every message and can refer to the fields of the message through the Syncfusion template syntax.

Example:

The following example renders each message as a simple block showing its text.

chat.MessageTemplate = "<div class='my-message'>${message.text}</div>";

MessageToolbarSettings

MessageToolbarSettingsModel: Gets or sets the settings for the toolbar shown on each chat message. (Default: null)

The value is sent to the widget as the ChatUI messageToolbarSettings option when the property is assigned. Handle MessageToolbarItemClicked to react to the clicks.

Example:

The following example defines the items of the message toolbar.

chat.MessageToolbarSettings = new Chat.MessageToolbarSettingsModel
{
	Items = new[]
	{
		new Chat.ToolbarItem { IconCss = "e-icons e-chat-copy", Tooltip = "Copy" },
		new Chat.ToolbarItem { IconCss = "e-icons e-chat-forward", Tooltip = "Forward" }
	}
};

Placeholder

String: Gets or sets the placeholder text shown in the message input. (Default: "Type your message...")

ShowFooter

Boolean: Gets or sets whether the chat footer is visible. (Default: True)

ShowHeader

Boolean: Gets or sets whether the chat header is visible. (Default: True)

ShowTimeBreak

Boolean: Gets or sets whether date separators are shown between message groups. (Default: False)

ShowTimeStamp

Boolean: Gets or sets whether timestamps are displayed with messages. (Default: True)

Suggestions

String[]: Gets or sets the quick-reply suggestions shown above the message input. (Default: null)

The value is passed to the ChatUI suggestions option. Handle SuggestionClick to know which suggestion was clicked.

SuggestionTemplate

String: Gets or sets the template used to render suggestion items. (Default: "")

The value is an HTML template string passed to the ChatUI suggestionTemplate option.

TimeBreakTemplate

String: Gets or sets the template used to render date separators. (Default: "")

The value is an HTML template string passed to the ChatUI timeBreakTemplate option. The separators are displayed when ShowTimeBreak is true.

TimeStampFormat

String: Gets or sets the message timestamp display format. (Default: "dd/MM/yyyy hh:mm a")

The value is a Syncfusion date format pattern passed to the ChatUI timeStampFormat option. It applies to all the messages that do not define their own TimeStampFormat. Assigning null restores the default format dd/MM/yyyy hh:mm a.

Example:

The following example shows only the time next to each message.

chat.ShowTimeStamp = true;
chat.TimeStampFormat = "hh:mm a";

TypingUsers

ChatUser[]: Gets or sets the users currently shown as typing. (Default: null)

The value is sent to the widget as the ChatUI typingUsers option when the property is assigned. The control does not update it automatically: assign the users to show the typing indicator and assign an empty array to hide it.

Example:

The following example shows the typing indicator for another user and hides it when the reply is added.

var bot = new Chat.ChatUser { Id = "u2", User = "Syncfusion Bot" };
chat.TypingUsers = new[] { bot };

// Later, when the reply is ready:
chat.TypingUsers = new Chat.ChatUser[0];
chat.AddMessage(new Chat.ChatMessage { Author = bot, Text = "Here is the answer." });

TypingUsersTemplate

String: Gets or sets the template used to display typing users. (Default: "")

The value is an HTML template string passed to the ChatUI typingUsersTemplate option. It is used while TypingUsers contains at least one user.

User

ChatUser: Gets or sets the current chat user. (Default: null)

The value is sent to the widget as the ChatUI user option: it identifies the author of the messages typed in the composer. The control also uses it as the Author of the messages added through AddMessage without an author.

Example:

The following example sets the current user. User is the display name.

chat.User = new Chat.ChatUser { Id = "u1", User = "Wisej User" };

Methods

AddMessage(message)

Adds a new text-only message to the chat.

Parameter	Type	Description
message	String	The text to add.

The message is created with the specified text and added as described in AddMessage: its author is the current User, when one is set, and its timestamp is the current time.

Throws:

ArgumentNullException message is null.

Example:

The following example adds a message on behalf of the current user.

chat.User = new Chat.ChatUser { Id = "u1", User = "Wisej User" };
chat.AddMessage("Hello, I need help with my order.");

AddMessage(message)

Adds a new message and mirrors the change in the local message collection.

Parameter	Type	Description
message	ChatMessage	The message to add.

Before the message is sent to the browser, a missing Id is replaced by a new unique identifier, a missing Author by a copy of the current User and an unset TimeStamp by the current time. The message is then passed to the ChatUI addMessage method and appended to Messages.

The message is added through a call to the client widget. To define the transcript before the control is displayed, assign Messages instead.

Throws:

ArgumentNullException message is null.

Example:

The following example adds a message written by another user that mentions the current user. The placeholder {0} in the text refers to the first entry of MentionUsers.

var message = new Chat.ChatMessage
{
	Author = new Chat.ChatUser { Id = "u2", User = "Syncfusion Bot" },
	Text = "{0} your order has been shipped.",
	MentionUsers = new[] { chat.User },
	TimeStamp = DateTime.Now
};
chat.AddMessage(message);

// The identifier generated for the message can be used to update or remove it later.
string id = message.Id;

AddMessageAsync(message)

Adds a new message and returns the value produced by the client-side widget.

Parameter	Type	Description
message	ChatMessage	The message to add.

Returns: Task<Object>. A task whose result is the value returned by the browser: the result of the ChatUI addMessage method when it returns one, otherwise an object whose id field contains the identifier of the message.

The message is completed and stored as described in AddMessage. The returned task completes when the browser has processed the call, and the message is appended to Messages at that point.

Throws:

ArgumentNullException message is null.

Example:

The following example adds a message, waits for the browser to process it and then scrolls it into view.

var message = new Chat.ChatMessage { Author = chat.User, Text = "Generating the report..." };
await chat.AddMessageAsync(message);
chat.ScrollToMessage(message.Id);

ClearMessages()

Removes all messages from the chat both locally and in the client widget.

After the call Messages returns an empty array.

Example:

The following example empties the transcript and starts a new conversation.

chat.ClearMessages();
chat.AddMessage(new Chat.ChatMessage
{
	Author = new Chat.ChatUser { Id = "u2", User = "Syncfusion Bot" },
	Text = "New conversation started."
});

Focus()

Focuses the Syncfusion chat composer.

This method hides the inherited Focus method. It activates the message input of the widget and places the caret at the end of its text.

Example:

The following example starts a new conversation and moves the focus to the message input.

chat.ClearMessages();
chat.Focus();

FocusInput()

Focuses the Syncfusion chat composer.

This method is equivalent to Focus.

Example:

The following example moves the focus to the message input when a button is clicked.

this.buttonReply.Click += (s, e) => chat.FocusInput();

OnAttachmentClick(e)

Parameter	Type	Description
e	ChatAttachmentEventArgs

OnAttachmentRemoved(e)

Parameter	Type	Description
e	ChatAttachmentEventArgs

OnAttachmentUploadFailure(e)

Parameter	Type	Description
e	ChatAttachmentEventArgs

OnAttachmentUploadSuccess(e)

Parameter	Type	Description
e	ChatAttachmentEventArgs

OnBeforeAttachmentUpload(e)

Parameter	Type	Description
e	ChatAttachmentEventArgs

OnCreated(e)

Parameter	Type	Description
e	EventArgs

OnDiagnostic(e)

Parameter	Type	Description
e	ChatDiagnosticEventArgs

OnHeaderToolbarItemClicked(e)

Parameter	Type	Description
e	ChatToolbarItemClickEventArgs

OnMentionSelect(e)

Parameter	Type	Description
e	ChatMentionSelectEventArgs

OnMessageSend(e)

Parameter	Type	Description
e	ChatMessageEventArgs

OnMessageToolbarItemClicked(e)

Parameter	Type	Description
e	ChatToolbarItemClickEventArgs

OnSuggestionClick(e)

Parameter	Type	Description
e	ChatSuggestionClickEventArgs

OnUserTyping(e)

Parameter	Type	Description
e	ChatTypingEventArgs

OnWebRequest(e)

Parameter	Type	Description
e	WebRequestEventArgs

RefreshChat()

Refreshes the underlying Syncfusion widget.

The method calls the ChatUI refresh method, which renders the widget again, and reapplies the CSS class names of the control to the widget container.

Example:

The following example renders the widget again after the panel that contains it is shown.

this.panelChat.Visible = true;
chat.RefreshChat();

RemoveMessage(messageId)

Removes a message from the chat both locally and in the client widget.

Parameter	Type	Description
messageId	String	The identifier of the message to remove.

The message with the specified Id is removed from Messages and the ChatUI removeMessage method is called in the browser.

Throws:

ArgumentNullException messageId is null or empty.

Example:

The following example removes the last message of the conversation.

Chat.ChatMessage last = chat.Messages?.LastOrDefault();
if (last != null)
	chat.RemoveMessage(last.Id);

ScrollToBottom()

Scrolls the current conversation to the last message.

The method calls the ChatUI scrollToBottom method. Set AutoScrollToBottom to scroll automatically whenever a message is added.

Example:

The following example adds a message and makes sure that it is visible.

chat.AddMessage("The export is ready.");
chat.ScrollToBottom();

ScrollToMessage(messageId)

Scrolls the current conversation to the specified message identifier.

Parameter	Type	Description
messageId	String	The target message identifier.

The method calls the ChatUI scrollToMessage method in the browser.

Throws:

ArgumentNullException messageId is null or empty.

Example:

The following example scrolls to the first pinned message.

Chat.ChatMessage pinned = chat.Messages?.FirstOrDefault(m => m.IsPinned);
if (pinned != null)
	chat.ScrollToMessage(pinned.Id);

ScrollToTop()

Scrolls the current conversation to the first message.

The method scrolls to the first entry of Messages through ScrollToMessage. It does nothing when Messages is empty or when the first message has no Id.

Example:

The following example scrolls back to the beginning of the conversation from a header toolbar button.

chat.HeaderToolbarItemClicked += (s, e) =>
{
	if (e.Item?.Tooltip == "First message")
		chat.ScrollToTop();
};

UpdateMessage(message, messageId)

Updates an existing message both locally and in the client widget.

Parameter	Type	Description
message	ChatMessage	The replacement message data.
messageId	String	The message identifier.

This overload takes the arguments in the order used by the ChatUI updateMessage method and behaves like UpdateMessage.

Throws:

ArgumentNullException messageId is null or empty, or message is null.

Example:

The following example pins an existing message.

Chat.ChatMessage message = chat.Messages?.FirstOrDefault(m => m.Id == "seed-1");
if (message != null)
{
	message.IsPinned = true;
	chat.UpdateMessage(message, message.Id);
}

UpdateMessage(messageId, message)

Updates an existing message both locally and in the client widget.

Parameter	Type	Description
messageId	String	The message identifier.
message	ChatMessage	The replacement message data.

When message has no Id, it receives messageId . The entry of Messages with that identifier is replaced by message as a whole, so the replacement should carry all the fields of the message, including Author and TimeStamp. The ChatUI updateMessage method is then called in the browser.

Throws:

ArgumentNullException messageId is null or empty, or message is null.

Example:

The following example adds a message and later replaces its text.

var message = new Chat.ChatMessage { Author = chat.User, Text = "Uploading the report..." };
chat.AddMessage(message);

// Later, when the operation is completed:
chat.UpdateMessage(message.Id, new Chat.ChatMessage
{
	Author = message.Author,
	Text = "The report has been uploaded.",
	TimeStamp = DateTime.Now
});

Events

AttachmentClick

EventHandler<ChatAttachmentEventArgs> Fired when a message attachment is clicked.

Attachment is the clicked file and Message is the message that contains it, when the browser reports it.

Example:

The following example shows the name and the size of the clicked attachment.

chat.AttachmentClick += (s, e) =>
{
	if (e.Attachment != null)
		AlertBox.Show($"{e.Attachment.Name} ({e.Attachment.Size} bytes)");
};

AttachmentRemoved

EventHandler<ChatAttachmentEventArgs> Fired when an attachment is removed from the composer.

When the default remove endpoint is used, the control deletes the file with the same name from the folder specified by Path.

Example:

The following example reports the file that was removed before the message was sent.

chat.AttachmentRemoved += (s, e) =>
{
	AlertBox.Show($"Removed {e.Attachment?.Name}");
};

AttachmentUploadFailure

EventHandler<ChatAttachmentEventArgs> Fired when Syncfusion reports a failed attachment upload.

Example:

The following example shows the file that could not be uploaded and the status reported by the uploader.

chat.AttachmentUploadFailure += (s, e) =>
{
	AlertBox.Show($"Cannot upload {e.Attachment?.Name}: {e.StatusText}", MessageBoxIcon.Error);
};

AttachmentUploadSuccess

EventHandler<ChatAttachmentEventArgs> Fired when Syncfusion reports a successful attachment upload.

When the default save endpoint is used, the file has already been saved by the control in the folder specified by Path when this event is fired. The uploaded file is delivered again in AttachedFile when the user sends the message.

Example:

The following example reports the uploaded file.

chat.AttachmentUploadSuccess += (s, e) =>
{
	AlertBox.Show($"Uploaded {e.Attachment?.Name}: {e.StatusText}");
};

BeforeAttachmentUpload

EventHandler<ChatAttachmentEventArgs> Fired before Syncfusion uploads an attachment.

Files lists the files selected in the composer. The event is delivered to the server while the browser proceeds with the upload: setting Cancel does not stop it. Use AllowedFileTypes, MaxFileSize and MaximumCount to restrict what can be uploaded.

Example:

The following example lists the files that are about to be uploaded.

chat.BeforeAttachmentUpload += (s, e) =>
{
	foreach (Chat.ChatAttachment file in e.Files ?? new Chat.ChatAttachment[0])
		this.listBox1.Items.Add($"Uploading {file.Name} ({file.Size} bytes)");
};

Created

EventHandler Fired after the underlying Syncfusion widget is created.

The event is wired to the ChatUI created event and hides the inherited Created property.

HeaderToolbarItemClicked

EventHandler<ChatToolbarItemClickEventArgs> Fired when a header toolbar item is clicked.

Item is the clicked item of HeaderToolbar. Message is always null for this event.

Example:

The following example adds a button to the header and handles its click.

chat.HeaderToolbar = new Chat.ToolbarSettingsModel
{
	Items = new[]
	{
		new Chat.ToolbarItem { IconCss = "e-icons e-refresh", Tooltip = "Clear", Align = "Right" }
	}
};
chat.HeaderToolbarItemClicked += (s, e) =>
{
	if (e.Item?.Tooltip == "Clear")
		chat.ClearMessages();
};

MentionSelect

EventHandler<ChatMentionSelectEventArgs> Fired when a mention item is selected from the Syncfusion mention popup.

The popup lists the users assigned to MentionUsers and opens when the user types the MentionTriggerChar. The selected users are delivered with the message in MentionUsers when MessageSend is fired.

Example:

The following example reads the user that was selected in the mention popup.

chat.MentionUsers = new[]
{
	new Chat.ChatUser { Id = "u1", User = "Wisej User" },
	new Chat.ChatUser { Id = "u2", User = "Syncfusion Bot" }
};
chat.MentionSelect += (s, e) =>
{
	AlertBox.Show($"Mentioned {e.ItemData?.User} ({e.ItemData?.Id})");
};

MessageSend

EventHandler<ChatMessageEventArgs> Fired when the user sends a message from the chat composer.

Message contains the outgoing message, including the selected MentionUsers and the uploaded AttachedFile.

After the handlers return, and unless Cancel was set to true, the control completes the message (a missing Id, Author or TimeStamp is filled in), appends it to Messages and clears the composer in the browser.

The event reaches the server after the browser has raised it: setting Cancel keeps the message out of Messages and skips the completion step, but it does not remove a message that the widget has already rendered.

Example:

The following example rejects empty messages and reads the text, mentions and attachment of the message that was sent.

chat.MessageSend += (s, e) =>
{
	string text = e.Message?.Text ?? "";
	if (String.IsNullOrWhiteSpace(text))
	{
		e.Cancel = true;
		return;
	}

	// Mentions appear in the text as {0}, {1}, ... and refer to e.Message.MentionUsers.
	int mentions = e.Message.MentionUsers?.Length ?? 0;
	string fileName = e.Message.AttachedFile?.Name;
	AlertBox.Show($"Text: {text}, mentions: {mentions}, file: {fileName}");
};

MessageToolbarItemClicked

EventHandler<ChatToolbarItemClickEventArgs> Fired when a message toolbar item is clicked.

Item is the clicked item and Message is the message the toolbar belongs to. The control does not change Messages in response to this event: call AddMessage, UpdateMessage or RemoveMessage from the handler when the action has to be reflected in the transcript.

Example:

The following example adds a "Forward" item to the message toolbar and adds a forwarded copy of the message when it is clicked.

chat.MessageToolbarSettings = new Chat.MessageToolbarSettingsModel
{
	Items = new[]
	{
		new Chat.ToolbarItem { IconCss = "e-icons e-chat-forward", Tooltip = "Forward" }
	}
};
chat.MessageToolbarItemClicked += (s, e) =>
{
	if (e.Item?.Tooltip == "Forward" && e.Message != null)
	{
		chat.AddMessage(new Chat.ChatMessage
		{
			Author = chat.User,
			Text = e.Message.Text,
			IsForwarded = true
		});
	}
};

SuggestionClick

EventHandler<ChatSuggestionClickEventArgs> Fired when a quick-reply suggestion is clicked.

The event is generated by the client wrapper when the user clicks one of the items rendered from Suggestions.

Example:

The following example reads the suggestion that was clicked.

chat.Suggestions = new[] { "Track my order", "Talk to an agent" };
chat.SuggestionClick += (s, e) =>
{
	AlertBox.Show($"Suggestion {e.Index}: {e.Text}");
};

UserTyping

EventHandler<ChatTypingEventArgs> Fired when the user typing state changes.

The event is wired to the ChatUI userTyping event and reports the typing state of the user of this chat instance. To show a typing indicator for other users, assign TypingUsers.

Example:

The following example shows the typing state of the current user in a label.

chat.UserTyping += (s, e) =>
{
	this.labelStatus.Text = e.IsTyping
		? $"{e.User?.User} is typing: {e.Message}"
		: "";
};

Implements

Name	Description
IUserData
IBindableComponent
IDropTarget
IWisejComponent
IWisejControl
IWisejHandler
IWisejSerializable

Constructors​

Chat()​

Chat(options)​

Properties​

AttachmentSettings​

AutoScrollToBottom​

EmptyChatTemplate​

EnableAttachments​

EnableCompactMode​

EnablePersistence​

EnableRtl​

FooterTemplate​

HeaderIconCss​

HeaderText​

HeaderToolbar​

LoadOnDemand​

Locale​

MentionTriggerChar​

MentionUsers​

Messages​

MessageTemplate​

MessageToolbarSettings​

Placeholder​

ShowFooter​

ShowHeader​

ShowTimeBreak​

ShowTimeStamp​

Suggestions​

SuggestionTemplate​

TimeBreakTemplate​

TimeStampFormat​

TypingUsers​

TypingUsersTemplate​

User​

Methods​

AddMessage(message)​

AddMessage(message)​

AddMessageAsync(message)​

ClearMessages()​

Focus()​

FocusInput()​

OnAttachmentClick(e)​

OnAttachmentRemoved(e)​

OnAttachmentUploadFailure(e)​

OnAttachmentUploadSuccess(e)​

OnBeforeAttachmentUpload(e)​

OnCreated(e)​

OnDiagnostic(e)​

OnHeaderToolbarItemClicked(e)​

OnMentionSelect(e)​

OnMessageSend(e)​

OnMessageToolbarItemClicked(e)​

OnSuggestionClick(e)​

OnUserTyping(e)​

OnWebRequest(e)​

RefreshChat()​

RemoveMessage(messageId)​

ScrollToBottom()​

ScrollToMessage(messageId)​

ScrollToTop()​

UpdateMessage(message, messageId)​

UpdateMessage(messageId, message)​

Events​

AttachmentClick​

AttachmentRemoved​

AttachmentUploadFailure​

AttachmentUploadSuccess​

BeforeAttachmentUpload​

Created​

HeaderToolbarItemClicked​

MentionSelect​

MessageSend​

MessageToolbarItemClicked​

SuggestionClick​

UserTyping​

Implements​

Constructors

Chat()

Chat(options)

Properties

AttachmentSettings

AutoScrollToBottom

EmptyChatTemplate

EnableAttachments

EnableCompactMode

EnablePersistence

EnableRtl

FooterTemplate

HeaderIconCss

HeaderText

HeaderToolbar

LoadOnDemand

Locale

MentionTriggerChar

MentionUsers

Messages

MessageTemplate

MessageToolbarSettings

Placeholder

ShowFooter

ShowHeader

ShowTimeBreak

ShowTimeStamp

Suggestions

SuggestionTemplate

TimeBreakTemplate

TimeStampFormat

TypingUsers

TypingUsersTemplate

User

Methods

AddMessage(message)

AddMessage(message)

AddMessageAsync(message)

ClearMessages()

Focus()

FocusInput()

OnAttachmentClick(e)

OnAttachmentRemoved(e)

OnAttachmentUploadFailure(e)

OnAttachmentUploadSuccess(e)

OnBeforeAttachmentUpload(e)

OnCreated(e)

OnDiagnostic(e)

OnHeaderToolbarItemClicked(e)

OnMentionSelect(e)

OnMessageSend(e)

OnMessageToolbarItemClicked(e)

OnSuggestionClick(e)

OnUserTyping(e)

OnWebRequest(e)

RefreshChat()

RemoveMessage(messageId)

ScrollToBottom()

ScrollToMessage(messageId)

ScrollToTop()

UpdateMessage(message, messageId)

UpdateMessage(messageId, message)

Events

AttachmentClick

AttachmentRemoved

AttachmentUploadFailure

AttachmentUploadSuccess

BeforeAttachmentUpload

Created

HeaderToolbarItemClicked

MentionSelect

MessageSend

MessageToolbarItemClicked

SuggestionClick

UserTyping

Implements