Render Chat Messages in Markdown
Environment
| Product Version | 2021.1.224 |
| Product | Progress® Kendo UI® Chat for jQuery |
Description
The chat Widget renders Markdown in the 'text' field of a message activity as plain text - it does not convert it to Markdown. I need it to properly render Markdown in messages.
Solution
Kendo UI Chat renders messages as text and HTML only. For the Markdown to be rendered properly in the Kendo UI Chat, it has to be converted to Html first. Use a third-party library of your choice that renders Markdown to Html and include it on the client-side. You can then render the resulting HTML using a Kendo Template.
The example below demonstrates how to implement this using the markdown-js library.
To show the message:
- Register a custom message type with the
kendo.templateandkendo.chat.registerTemplate - In the Template render the Markdown to Html using the third-party library
- Show the message using the
renderMessagemethod
<script src="https://unpkg.com/markdown@0.5.0/lib/markdown.js"></script>
<script src="https://unpkg.com/turndown@5.0.3/dist/turndown.js"></script>
</head>
<body>
<div id="chat"></div>
<script>
var MD_MESSAGE = kendo.template(
'<div class="k-message">' +
'<div class="k-bubble">' +
'#= markdown.toHTML(text, "Maruku") #' +
'</div>' +
'</div>'
);
kendo.chat.registerTemplate("md_message", MD_MESSAGE);
$("#chat").kendoChat();
var chat = $("#chat").data("kendoChat");
chat.renderMessage({
type: "md_message",
text: "*Hello* __MD__ Message [link](http://www.telerik.com)"
}, {
id: kendo.guid(),
name: "Sample Bot",
iconUrl: "https://demos.telerik.com/kendo-ui/content/chat/InsuranceBot.png"
});
</script>