config(972430): Added documentation for Markdown support in ChatUI component in Core and MVC UG

ej2-asp-core-mvc/chat-ui/EJ2_ASP.MVC/messages.md

@@ -335,4 +335,55 @@ You can use the `ItemClicked` event when the toolbar item is clicked in the mess
 {% highlight c# tabtitle="ItemClicked.cs" %}
 {% include code-snippet/chat-ui/messages/itemClicked/itemClicked.cs %}
 {% endhighlight %}
-{% endtabs %}
+{% endtabs %}
+
+## Displaying the markdown content
+
+The Syncfusion ChatUI supports `Markdown` formatting for messages, enabling rich text capabilities such as bold, italic, links, and more.
+
+### Prerequisites
+
+- Include the `marked` library:
+
+  ```bash
+
+  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+
+  ```
+
+- Include `DOMPurify` for sanitizing the Markdown output:
+
+  ```bash
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.4.0/purify.min.js"></script>
+
+  ```
+
+### Supported markdown formats
+
+The ChatUI supports the following Markdown formats via the `marked` library:
+
+- **Bold**: ** text ** or __ text __ 
+- *Italic*: * text * or _ text _ 
+- [Links](url): [Link text] (url)
+- Lists: - Item or 1. item
+- Code: 'code' or code 
+
+For full list refer to the  [marked documentation](https://marked.js.org/).
+
+### Configuring Markdown
+
+By integrating the [marked](https://github.com/markedjs/marked) library, you can parse Markdown text to enhance the chat experience. The `text` property of each message can accept HTML generated from Markdown, allowing for formatted text display.
+
+> To prevent XSS attacks, sanitize Markdown output using `DOMPurify`
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/chat-ui/messages/markdown/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="markdown.cs" %}
+{% include code-snippet/chat-ui/messages/markdown/markdown.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+![Markdown](images/markdown.png)

ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/messages.md

@@ -335,4 +335,55 @@ You can use the `itemClicked` event when the toolbar item is clicked in the mess
 {% highlight c# tabtitle="ItemClicked.cs" %}
 {% include code-snippet/chat-ui/messages/itemClicked/itemClicked.cs %}
 {% endhighlight %}
-{% endtabs %}
+{% endtabs %}
+
+## Displaying the markdown content
+
+The Syncfusion ChatUI supports `Markdown` formatting for messages, enabling rich text capabilities such as bold, italic, links, and more.
+
+### Prerequisites
+
+- Include the `marked` library:
+
+  ```bash
+
+  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+
+  ```
+
+- Include `DOMPurify` for sanitizing the Markdown output:
+
+  ```bash
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.4.0/purify.min.js"></script>
+
+  ```
+
+### Supported markdown formats
+
+The ChatUI supports the following Markdown formats via the `marked` library:
+
+- **Bold**: ** text ** or __ text __ 
+- *Italic*: * text * or _ text _ 
+- [Links](url): [Link text] (url)
+- Lists: - Item or 1. item
+- Code: 'code' or code 
+
+For full list refer to the  [marked documentation](https://marked.js.org/).
+
+### Configuring Markdown
+
+By integrating the [marked](https://github.com/markedjs/marked) library, you can parse Markdown text to enhance the chat experience. The `text` property of each message can accept HTML generated from Markdown, allowing for formatted text display.
+
+> To prevent XSS attacks, sanitize Markdown output using `DOMPurify`
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/chat-ui/messages/markdown/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="ItemClicked.cs" %}
+{% include code-snippet/chat-ui/messages/markdown/markdown.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+![Markdown](images/markdown.png)

ej2-asp-core-mvc/code-snippet/chat-ui/messages/markdown/markdown.cs

@@ -0,0 +1,51 @@
+using System;
+using System.Collections.Generic;
+using System.Web.Mvc;
+using Syncfusion.EJ2.InteractiveChat;
+
+namespace EJ2MVCSampleBrowser.Controllers.ChatUI
+{
+    public partial class ChatUIController : Controller
+    {
+        public ActionResult Markdown()
+        {
+            ViewBag.CurrentUserModel = new ChatUIUser { Id = "user1", User = "Albert" };
+            ViewBag.MichaleUserModel = new ChatUIUser { Id = "user2", User = "Michale Suyama" };
+            ViewBag.Suggestions = new List<SuggestionModel>
+            {
+                new SuggestionModel
+                {
+                    DisplayText = "Share quick link",
+                    MarkdownText = "Check out our [project dashboard](https://dashboard.example.com) for updates!"
+                },
+                new SuggestionModel
+                {
+                    DisplayText = "Emphasize priority",
+                    MarkdownText = "This is **high priority** and needs _immediate attention_."
+                }
+            };
+            ViewBag.ChatMessagesData = new List<ChatUIMessage>
+            {
+                new ChatUIMessage
+                {
+                    Text = "Hey Michale, did you review the _new API documentation_?",
+                    Author = (ChatUIUser)ViewBag.CurrentUserModel,
+                    TimeStamp = new DateTime(2024, 1, 15, 9, 30, 0)
+                },
+                new ChatUIMessage
+                {
+                    Text = "Yes! The **endpoint specifications** look great. Check the [integration guide](https://api.example.com/docs) when you get a chance.",
+                    Author = (ChatUIUser)ViewBag.MichaleUserModel,
+                    TimeStamp = new DateTime(2024, 1, 15, 9, 32, 0)
+                }
+            };
+            return View();
+        }
+
+        public class SuggestionModel
+        {
+            public string DisplayText { get; set; } = string.Empty;
+            public string MarkdownText { get; set; } = string.Empty;
+        }
+    }
+}

ej2-asp-core-mvc/code-snippet/chat-ui/messages/markdown/razor

@@ -0,0 +1,63 @@
+@using Syncfusion.EJ2.InteractiveChat
+@using Syncfusion.EJ2
+@using Newtonsoft.Json
+
+<div class="control-section chat-ui">
+    <div class="markdown-chatui">
+        @Html.EJS().ChatUI("markdown").HeaderText("Chat UI with Markdown").User((ChatUIUser)ViewBag.CurrentUserModel).Created("onCreated").MessageSend("onMessageSend").Render()
+    </div>
+</div>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.0.0/marked.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.4.0/purify.min.js"></script>
+<script>
+    var currentUserModel = @Html.Raw(JsonConvert.SerializeObject(ViewBag.CurrentUserModel));
+    var michaleUserModel = @Html.Raw(JsonConvert.SerializeObject(ViewBag.MichaleUserModel));
+
+    var suggestions = @Html.Raw(JsonConvert.SerializeObject(ViewBag.Suggestions));
+
+    var chatMessages = @Html.Raw(JsonConvert.SerializeObject(ViewBag.ChatMessagesData));
+    chatMessages.forEach(function (message) {
+        message.timeStamp = new Date(message.timeStamp);
+        message.text = marked.parse(message.text);
+    });
+
+    var chatUIObj;
+    function onCreated() {
+        chatUIObj = ej.base.getInstance(document.getElementById('markdown'), ejs.interactivechat.ChatUI);
+        chatUIObj.messages = chatMessages;
+        chatUIObj.suggestions = suggestions.map(function (s) { return s.DisplayText; });
+        chatUIObj.dataBind();
+    }
+
+    function onMessageSend(args) {
+        args.cancel = true;
+        var suggestion = suggestions.find(function (s) { return s.DisplayText === args.message.text; });
+        var messageText = suggestion ? suggestion.MarkdownText : args.message.text;
+        var parsedText = DOMPurify.sanitize(marked.parse(messageText));
+        var newMessage = {
+            text: parsedText,
+            author: currentUserModel,
+            timeStamp: new Date()
+        };
+        chatMessages.push(newMessage);
+        chatUIObj.messages = chatMessages;
+        chatUIObj.dataBind();
+    }
+</script>
+
+<style>
+    .markdown-chatui {
+        height: 380px;
+        width: 450px;
+        margin: 0 auto;
+    }
+
+    .control-section.chat-ui {
+        padding: 20px;
+    }
+    p {
+        margin: 0;
+        display: inline-block;
+    }
+</style>

ej2-asp-core-mvc/code-snippet/chat-ui/messages/markdown/tagHelper

@@ -0,0 +1,62 @@
+@using Syncfusion.EJ2.InteractiveChat
+@using Newtonsoft.Json
+
+<div class="control-section chat-ui">
+    <div class="markdown-chatui">
+        <ejs-chatui id="markdown" headerText="Chat UI with Markdown" created="onCreated" messageSend="onMessageSend">
+            <e-chatui-user id="@Model.CurrentUserModel.Id" user="@Model.CurrentUserModel.User"></e-chatui-user>
+        </ejs-chatui>
+    </div>
+</div>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.0.0/marked.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.4.0/purify.min.js"></script>
+<script>
+    var currentUserModel = @Html.Raw(JsonConvert.SerializeObject(Model.CurrentUserModel));
+    var michaleUserModel = @Html.Raw(JsonConvert.SerializeObject(Model.MichaleUserModel));
+
+    var suggestions = @Html.Raw(JsonConvert.SerializeObject(Model.Suggestions));
+
+    var chatMessages = @Html.Raw(JsonConvert.SerializeObject(Model.ChatMessagesData));
+    chatMessages.forEach(function (message) {
+        message.timeStamp = new Date(message.timeStamp);
+        message.text = marked.parse(message.text);
+    });
+
+    var chatUIObj;
+    function onCreated() {
+        chatUIObj = document.getElementById('markdown').ej2_instances[0];
+        chatUIObj.messages = chatMessages;
+        chatUIObj.suggestions = suggestions.map(function (s) { return s.DisplayText; });
+    }
+
+    function onMessageSend(args) {
+        args.cancel = true;
+        var suggestion = suggestions.find(function (s) { return s.DisplayText === args.message.text; });
+        var messageText = suggestion ? suggestion.MarkdownText : args.message.text;
+        var parsedText = DOMPurify.sanitize(marked.parse(messageText));
+        var newMessage = {
+            text: parsedText,
+            author: currentUserModel,
+            timeStamp: new Date()
+        };
+        chatMessages.push(newMessage);
+        chatUIObj.messages = chatMessages;
+    }
+</script>
+
+<style>
+    .markdown-chatui {
+        height: 380px;
+        width: 450px;
+        margin: 0 auto;
+    }
+
+    .control-section.chat-ui {
+        padding: 20px;
+    }
+    p {
+        margin: 0;
+        display: inline-block;
+    }
+</style>