Kendo Chat Control for JQuery

[Dan]

We are exploring using Kendo Chat for JQuery to support LLM interactions but are finding the control very limiting compared to Bootstrap 5 MDB.  Does anyone know if you can:

• support bold and rich html formatting within the chat messages?  The LLM is correctly responding with formatting such as <strong> but this is not respected within the control.
• add ability to pass additional data in the chat post - doing this results in [Object, Object] in the chat window itself

 

[Neli]

Hello Dan,

The Chat widget provides options for defining custom templates:

Chat Custom Templates.

For example, in order to post a message that contains some HTML content, you could define a custom template for this purpose and render it through the renderMessage() method. You could also add additional data if needed. In the following example, additional strings are displayed by adding the additionalData field and displaying it in the template.

<div id="chat"></div>

    <script id="link-template" type="text/x-kendo-template">
	  <div class="#=styles.message#">
  	<div class="#=styles.bubble#">#=text#</div>
    <b>#=additionalData#</b>
      </div>
    </script>

    <script>
      var LINK_TEMPLATE = kendo.template($('#link-template').html());
      kendo.chat.registerTemplate("link", LINK_TEMPLATE);

      var chat = $("#chat").kendoChat().data("kendoChat");      

      chat.renderMessage({
        type: "link",
        text: "<h3>Title</h3><i>test</i>",
        additionalData: "some other text"
      }, chat.getUser()); 
    </script>

When a message is posted in the Chat, you can handle the post event and change the rendered message if needed.

 post: function(e) {
          e.text = "Changed text"
}

Here you will find a Dojo example based on the described above.

Regards,
Neli
Progress Telerik