## Overview
The Chat Control is a custom made extension that is tailored to be used with Wisej.NET components and controls.
This free extension enables developers to integrate a feature-rich chat box that suits their needs, it supports custom controls, custom HTML input and output and much more, due to its modular design!
{% embed url="" %}
## Custom Controls
Custom controls can be shown inside of the ChatBox control. In the above screenshot the **PictureBox** and **Button** menu shown are custom controls. Below is an example on how to create and show these controls within the ChatBox.
```csharp
// create an instance of the custom control.
var options = new MenuOptions("Pet", "City", "Tree");
// process events from the custom control.
options.MenuItemClicked += Options_MenuItemClicked;
// add the custom control to the ChatBox.
this.chatBox1.DataSource.Add(new Message
{
BubbleVisible = false,
Control = options,
User = _bot
});
```
## Custom Tools
Custom tools can be used to add additional functionalities to the ChatBox. In the above screenshot an "Upload" icon is used to allow the user add their own files to the chat. Here is a sample implementation of the upload functionality:
```csharp
private void chatBox1_ToolClick(object sender, ToolClickEventArgs e)
{
// triger a programmatic upload of files.
this.upload1.UploadFiles();
}
private void upload1_Uploaded(object sender, UploadedEventArgs e)
{
// once a file is uploaded, show it in a PictureBox control.
this.chatBox1.DataSource.Add(new Message
{
Control = new PictureBox
{
MinimumSize = new Size(200, 200),
SizeMode = PictureBoxSizeMode.Zoom,
Image = Image.FromStream(e.Files[0].InputStream)
},
User = _bot
});
}
```
## Lazy Messages
The Chat control supports lazy messages that show a typing indicator until completed.
See the following example for a lazy message that is immediately shown in the control and completed after three seconds:
```csharp
private void chatBox1_SentMessage(object sender, MessageEventArgs e)
{
// only process user messages.
if (e.IsChatBoxUser)
{
// create a new lazy message.
var message = new LazyMessage(_bot);
// add & show the message.
this.chatBox1.DataSource.Add(message);
// start a background task that completes after three seconds.
Application.StartTask(() =>
{
Thread.Sleep(3000);
message.SetResult("OK!");
Application.Update(this);
});
}
}
```
## How to Use
The Chat extension can be added to a Wisej.NET project using NuGet Package Manager.
{% embed url="" %}
## Live Demo
{% embed url="" %}
