To gain some experience, I first developed another very small control, a custom toggle button control to switch a web application between full-screen and normal mode. I went for developing the custom control directly from TMS WEB Core for Visual Studio Code because I just feel more comfortable for web projects to use this IDE. I had the "privilege" to use first the alpha and then the beta version of TMS WEB Core for Visual Studio Code v1.3 (released yesterday btw) as this introduced component package support. Using the new package support for installing custom controls made it very easy to test the control, also at design-time. The development of this first small control allowed me to get used to the concept of custom controls as well as the steps involved to get it installed in the IDE.

After I was comfortable enough with the principle of custom controls. I’ve started building the chat box component. As there were a ton of features on the requirements list, I had actually no idea where to start. I’ve focused first of all on a working way of sending/receiving messages. When I had that going, I started focusing on adding a basic design, followed up by adding the necessary properties for manipulating said chat box. 

I think implementing collections as a way of managing messages was the only thing I really struggled with. Having never implemented anything like this, figuring out how to implement the chat message bubbles at collection item level was a challenge. If you add a message to your collection, a chat message bubble will be generated and displayed in the chat control. The collection item will also keep a reference of the chat message bubble so that you can manipulate it later on.

A chat bubble contains several HTML elements. We have a SPAN for the message. For the user avatar there is an IMG element. And both the sender name and time are in P elements. The other elements are mostly used for positioning all the elements. The IMG element will not be shown when you choose to disable user images.

Underneath the chat display we have our input area. This area contains several elements like an input for the message, a send button and an emoji picker.

FArea := TJSHTMLElement(document.createElement('DIV'));
FInputDisplay := TJSHTMLElement(document.createElement('DIV'));
FInputTextBox := TJSHtmlElement(document.createElement('TEXTAREA'));
FSendButton := TJSHTMLElement(document.createElement('BUTTON'));
FInputDisplay.appendChild(FInputTextBox);
FArea.appendChild(FInputDisplay);
FArea.appendChild(FSendButton);
ElementHandle.appendChild(FArea);
FSendButton.addEventListener('click', @HandleSendMessageButtonClick);
FInputTextBox.addEventListener('keyup', @HandleSendMessageInputEnter);

There are 2 event listeners. You can press the send button for sending messages. But pressing enter will also send your message. When sending/receiving messages the chat box will auto scroll with all messages except if you scroll up.

Another feature that the chat box has, is an auto scroll. when you send a message the chat box will automatically scroll down as long as the user hasn’t scrolled up. To check if a user has scrolled up is nothing more than using this function:

function TChatBox.isScrolledToBottom: Boolean;
begin
  Result := (FChatDisplay.scrollHeight – 
FChatDisplay.clientHeight <= FChatDisplay.scrollTop + 1);
end;

To effectively scroll down you use this procedure:

procedure TChatBox.scrollToBottom;
begin
  FChatDisplay.scrollTop := FChatDisplay.scrollHeight;
end;

 asm 
   (()=> {
     var picker = new EmojiPicker();
     picker.generateElements(element);
   })();
 end;

Thank you Bradley for a great collaboration during the internship. We look forward to go to the next level as a colleague in the tms family in July! The year went by fast and let's see who will take on the challenge to become an intern at tmssoftware.com in the next school year!