How to Build a .NET Chat Editor in Your Desktop Application

There are plenty of surprising ways to utilize ComponentOne controls to bring advanced functionality to your .NET application. In this blog, we’ll discuss how to create a .NET 8 C# program that creates a simple, professional-looking chat interface.

A link to the full sample can be found at the end. Before we break it down into its separate portions, we’ll first need to add some NuGet packages to our project, such as the following:

• C1.Win.Editor—This package contains the Editor controls we’ll need to create the chat box and text functionality.
• C1.Win.Themes – this package contains the built-in & custom theming functionality that we’ll apply to the controls in our application.

That’s all we need! Next, let’s take a quick look at the designer.

Ready to Try it Out? Download ComponentOne Today!

You’ll notice that there are many different controls placed on the form but fear not. These can all be boiled down into either C1Editor components for chat functionality, C1Ribbon components for ribbon and toolbar functionality, or standard Windows Forms controls such as buttons and split panels. I won’t go into all of these different components individually, but if you’re interested in a deep dive, please feel free to sift through their properties in the full sample included at the end of this blog.

Both the “view” and “input” portions of the chat application are comprised of the C1.Win.Editor.C1Editor control, titled c1EditorView and c1EditorInput respectively. The only major difference is that the “view” has the “DesignEdit” property set to “False”, while the “input” portion has the “DesignEdit” property set to “True”. The “DesignEdit” property determines whether or not the C1Editor control should be view-only or not. Since the “view” portion of the chat should not be editable, we set the property to “False”.

How you design the form is completely up to you. We set the design to be similar to a standard chat box, but if you have a different idea in mind, feel free to use it! The logic setting up the chat application will remain the same. So, without further ado, let's dive right into the different portions of the code-behind:

1. Using Directives:

   using System;

   using System.Windows.Forms;

   using System.Drawing;

   using System.IO;

   using System.Collections.Generic;

   using C1.Win.Editor;

   using C1.Win.Ribbon;

These directives import namespaces that contain classes and functionalities used in the code. For example, `System` contains fundamental types and base classes that define commonly-used value and reference data types, events and event handlers, interfaces, attributes, and processing exceptions. `System.Windows.Forms` provides classes for creating Windows-based applications that take full advantage of the rich user interface features available in the Microsoft Windows operating system. Similarly, other namespaces provide access to specific functionalities like handling files, working with collections, and UI elements.

2. Namespace:

   namespace EditorExplorer.Samples
   {
       using Data;

       public partial class Chat : UserControl
       {
           // Class code
       }
   }

The code is enclosed within the `EditorExplorer.Samples` namespace. Namespaces are used to organize code and prevent naming conflicts. The `using Data;` statement inside the namespace brings in our code and sample data from the EditorExplorer.Data folder.

3. Class Declaration:

public partial class Chat : UserControl
   {
       // Class code
   }

This defines a class named `Chat` that inherits from `UserControl`. `UserControl` is a base class for controls that can be placed on a form and customized by developers. The class is declared as `partial`, indicating that its complete definition is split across multiple files.

4. Fields:

   private const string _chatInputPath = @"Resources\ChatInput.html";

   private const string _chatViewPath = @"Resources\ChatView.html";

   private const string _messageFormat = "<div class=\"row\"><span class=\"{0}\"><b>{1}</b>&nbsp;&nbsp;&nbsp;<span class=\"dim\">{2}</span><br>{3}</span></div><span id=\"NewLine\"/>";

   private const string _newLineId = "NewLine";


   private Random _random = new Random();

   private SimpleBot _bot = new SimpleBot();

These are the class-level variables. They include constants for file paths and message formats, as well as instances of the `Random` class and a custom `SimpleBot` class. Let’s take a closer look at the SimpleBot class, which comes from our EditorExplorer.Data folder:

This entire class only contains some basic chat logic that slightly changes depending on what the user enters into the chat box. Still, you could expand upon this by incorporating real reactive responses through a free .NET AI library and replacing the built-in logic that we have inside the SimpleBot class. One of the best free .NET AI libraries to check out is Standard.AI.OpenAI.  

5. Constructor:

   public Chat()
   {
       InitializeComponent();
       // Initialization code
   }

This is the constructor method for the `Chat` class. It initializes the component by calling the `InitializeComponent()` method, which initializes the UI components we placed on the designer. We can set the stylization changes on the controls inside this constructor method to determine how we want the controls to appear in our application.

6. Methods:

The class defines several methods such as `ShowAnswer`, `SendPrompt`, and `LoadDocument`. These methods handle various functionalities of the chat interface, such as displaying messages, sending prompts, and loading documents.

7. Event Handlers:

 There are event handlers like `c1EditorView_C1EditorReady`, `c1EditorInput_C1EditorReady`, `c1EditorInput_KeyDown`, `c1EditorInput_SizeChanged`, `button1_Click`, `ribbonButton1_Click`, and `button2_Click` attached to various UI events. These handlers respond to user interactions with the chat interface, such as typing messages, handling keyboard events, clicking buttons, or resizing the input area.

 Conclusion

Overall, the code defines a chat interface that allows users to input messages, receive responses from a bot, and interact with the UI elements like buttons and input fields. You can download the full sample from our GitHub by clicking here. If you want to learn more about ComponentOne controls and everything MESCIUS has to offer, check out our main page for more information!

Ready to Try it Out? Download ComponentOne Today!