Chat Control

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!

wisej-extensions/Wisej.Web.Ext.ChatControl at 3.5 · iceteagroup/wisej-extensionsGitHub

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.

// 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:

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:

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);
		});
	}
}