Kendo Chat Control for JQuery

1 Answer 63 Views
Top achievements
Rank 1
Dan asked on 11 Nov 2023, 01:38 PM

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


1 Answer, 1 is accepted

Sort by
Telerik team
answered on 16 Nov 2023, 06:39 AM

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>

      var LINK_TEMPLATE = kendo.template($('#link-template').html());"link", LINK_TEMPLATE);

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

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

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.

Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources
Asked by
Top achievements
Rank 1
Answers by
Telerik team
Share this question