First steps

Starting the chatbox implementation

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.

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;

The Emoji Picker is an external JavaScript library. The emoji picker is added by instantiating the EmojiPicker class and then use the generateElements function and giving the input textbox as a parameter.    

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

This library will add a dropdown button linked to your input textbox and will allow you to choose an emoji.

Typing some of the mostly used emoji shortcuts in the textbox will also change to an emoji when sending the message. The same applies for hyperlinks that are converted into clickable links in the chat bubble.

Conclusion

While web custom controls appear like complex magic black boxes at first sight, after some effort to learn their architecture and how to build them mapping to HTML elements, it turns out to be actually relatively straight-forward and doable. The advantage of TMS WEB Core certainly is that the built-in controls all come with full source code, so this is also a great resource to learn from. Using the Visual Studio Code IDE made it easy to immediately see the result on the form designer. Overall, I’m happy with the result. The chatbox will be integrated in the TMS WEB Academy application and will also become standard part of TMS WEB Core. I look forward to develop many more exciting web custom controls for TMS WEB Core! 

Thank you

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!