From a693f9216e834ec245cf35bd0eca90c69061f8a5 Mon Sep 17 00:00:00 2001
From: TamilRamGanesan-SF5080 <tamilram.ganesan@syncfusion.com>
Date: Thu, 14 Aug 2025 08:57:23 +0530
Subject: [PATCH 1/6] 974672: added markdown support for chatui

---
 blazor/chat-ui/images/markdown.png | Bin 0 -> 42071 bytes
 blazor/chat-ui/messages.md         | 154 +++++++++++++++++++++++++++++
 2 files changed, 154 insertions(+)
 create mode 100644 blazor/chat-ui/images/markdown.png

diff --git a/blazor/chat-ui/images/markdown.png b/blazor/chat-ui/images/markdown.png
new file mode 100644
index 0000000000000000000000000000000000000000..b1dd6f50446f0db2bc510db0b6ea3bc37b6703aa
GIT binary patch
diff --git a/blazor/chat-ui/messages.md b/blazor/chat-ui/messages.md
index cd3eb213f9..6f24d08593 100644
--- a/blazor/chat-ui/messages.md
+++ b/blazor/chat-ui/messages.md
@@ -675,3 +675,157 @@ You can use the `itemClicked` event when the toolbar item is clicked in the `Mes
 }
 
 ```
+
+## 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
+  
+  <PackageReference Include="Markdig" Version="0.23.0" />
+
+  ```
+
+- 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](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.ChatMessage.html#Syncfusion_Blazor_InteractiveChat_ChatMessage_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`
+
+```cshtml
+
+@using Syncfusion.Blazor.InteractiveChat
+@using Markdig
+
+<div class="control-section chat-ui">
+    <div class="markdown-chatui">
+        <SfChatUI @ref="ChatUI"
+                  User="@currentUserModel"
+                  Messages="@chatMessages"
+                  HeaderText="@headerText"
+                  Suggestions="@(suggestions.Select(s => s.DisplayText).ToList())"
+                  MessageSend="HandleMessageSend"
+                  ShowTimeBreak="true">
+        </SfChatUI>
+    </div>
+</div>
+
+<style>
+    .markdown-chatui {
+        height: 380px;
+        width: 450px;
+        margin: 0 auto;
+    }
+     p {
+        margin: 0;
+        display: inline-block;
+    }
+    @@media only screen and (max-width: 850px) {
+        .markdown-chatui {
+            width: 80%;
+        }
+    }
+</style>
+
+@code {
+    private SfChatUI ChatUI { get; set; } = null!;
+    private string headerText = "Chat UI with Markdown";
+    private UserModel currentUserModel =  GetMarkdownUser("user1", "Albert");
+    private UserModel michaleUserModel =  GetMarkdownUser("user2", "Michale Suyama");
+    private List<ChatMessage> chatMessages = new List<ChatMessage>();
+    private List<Suggestion> suggestions = new List<Suggestion>
+    {
+        new Suggestion
+        {
+            DisplayText = "Share quick link",
+            MarkdownText = "Check out our [project dashboard](https://dashboard.example.com) for updates!"
+        },
+        new Suggestion
+        {
+            DisplayText = "Emphasize priority",
+            MarkdownText = "This is **high priority** and needs _immediate attention_."
+        }
+    };
+
+    protected override void OnInitialized()
+    {
+        chatMessages.Add(new ChatMessage
+            {
+                Author = currentUserModel,
+                Text = RenderMarkdown("Hey Michale, did you review the _new API documentation_?"),
+                Timestamp = new DateTime(2024, 1, 15, 9, 30, 0)
+            });
+        chatMessages.Add(new ChatMessage
+            {
+                Author = michaleUserModel,
+                Text = RenderMarkdown("Yes! The **endpoint specifications** look great. Check the [integration guide](https://api.example.com/docs) when you get a chance."),
+                Timestamp = new DateTime(2024, 1, 15, 9, 32, 0)
+            });
+    }
+
+    private async Task HandleMessageSend(ChatMessageSendEventArgs args)
+    {
+        args.Cancel = true; 
+        var suggestion = suggestions.FirstOrDefault(s => s.DisplayText == args.Message.Text);
+        var messageText = suggestion != null ? suggestion.MarkdownText : args.Message.Text;
+
+        var newMessage = new ChatMessage
+            {
+                Text = RenderMarkdown(messageText),
+                Author = currentUserModel,
+                Timestamp = DateTime.Now
+            };
+
+        chatMessages.Add(newMessage);
+        await InvokeAsync(StateHasChanged); 
+    }
+
+    private string RenderMarkdown(string markdownText)
+    {
+        var pipeline = new MarkdownPipelineBuilder().UseAdvancedExtensions().Build();
+        return Markdig.Markdown.ToHtml(markdownText, pipeline);
+    }
+
+    public static UserModel GetMarkdownUser(string Id, string Username)
+    {
+        return new UserModel()
+            {
+                ID = Id,
+                User = Username
+            };
+    }
+
+    private class Suggestion
+    {
+        public string DisplayText { get; set; } = string.Empty;
+        public string MarkdownText { get; set; } = string.Empty;
+    }
+}
+
+```
+
+![Blazor Chat UI MessageToolbarItem](./images/markdown.png)
\ No newline at end of file

From b160f3b76ed07adc22cbdc381c5b5b885173993d Mon Sep 17 00:00:00 2001
From: TamilRamGanesan-SF5080 <tamilram.ganesan@syncfusion.com>
Date: Thu, 14 Aug 2025 11:17:27 +0530
Subject: [PATCH 2/6] 974672: updation in md file of chatui

---
 blazor/chat-ui/messages.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/blazor/chat-ui/messages.md b/blazor/chat-ui/messages.md
index 6f24d08593..e14b3ed98c 100644
--- a/blazor/chat-ui/messages.md
+++ b/blazor/chat-ui/messages.md
@@ -682,7 +682,7 @@ The Syncfusion ChatUI supports `Markdown` formatting for messages, enabling rich
 
 ### Prerequisites
 
-- Include the `marked` library:
+- Markdig for parsing Markdown (installed via NuGet):
 
   ```bash
   
@@ -690,7 +690,7 @@ The Syncfusion ChatUI supports `Markdown` formatting for messages, enabling rich
 
   ```
 
-- Include `DOMPurify` for sanitizing the Markdown output:
+- DOMPurify for sanitizing Markdown output to prevent XSS attacks (included via CDN):
 
   ```bash
 
@@ -700,7 +700,7 @@ The Syncfusion ChatUI supports `Markdown` formatting for messages, enabling rich
 
 ### Supported markdown formats
 
-The ChatUI supports the following Markdown formats via the `marked` library:
+The ChatUI leverages the `Markdig` library to support the following Markdown formats:
 
 - **Bold**: ** text ** or __ text __ 
 - *Italic*: * text * or _ text _ 
@@ -708,11 +708,11 @@ The ChatUI supports the following Markdown formats via the `marked` library:
 - Lists: - Item or 1. item
 - Code: 'code' or code 
 
-For full list refer to the  [marked documentation](https://marked.js.org/).
+For full list refer to the  [Markdig documentation](https://www.nuget.org/packages/Markdig).
 
 ### Configuring Markdown
 
-By integrating the [marked](https://github.com/markedjs/marked) library, you can parse Markdown text to enhance the chat experience. The [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.ChatMessage.html#Syncfusion_Blazor_InteractiveChat_ChatMessage_Text) property of each message can accept HTML generated from Markdown, allowing for formatted text display.
+By integrating the [Markdig](https://www.nuget.org/packages/Markdig) library, you can parse Markdown text to enhance the chat experience. The [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.ChatMessage.html#Syncfusion_Blazor_InteractiveChat_ChatMessage_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`
 

From 08d616742d51b0895854bf25b608c445b43672f5 Mon Sep 17 00:00:00 2001
From: Indrajith <93306904+IndrajithSrinivasan@users.noreply.github.com>
Date: Thu, 14 Aug 2025 11:29:09 +0530
Subject: [PATCH 3/6] 974672: Updated the documentation corrections

---
 blazor/chat-ui/messages.md | 28 +++++++++++-----------------
 1 file changed, 11 insertions(+), 17 deletions(-)

diff --git a/blazor/chat-ui/messages.md b/blazor/chat-ui/messages.md
index e14b3ed98c..b4620ac7a3 100644
--- a/blazor/chat-ui/messages.md
+++ b/blazor/chat-ui/messages.md
@@ -682,19 +682,11 @@ The Syncfusion ChatUI supports `Markdown` formatting for messages, enabling rich
 
 ### Prerequisites
 
-- Markdig for parsing Markdown (installed via NuGet):
+- `Markdig` for parsing Markdown (installed via NuGet):
 
   ```bash
   
-  <PackageReference Include="Markdig" Version="0.23.0" />
-
-  ```
-
-- DOMPurify for sanitizing Markdown output to prevent XSS attacks (included via CDN):
-
-  ```bash
-
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.4.0/purify.min.js"></script>
+  dotnet add package Markdig
 
   ```
 
@@ -714,8 +706,6 @@ For full list refer to the  [Markdig documentation](https://www.nuget.org/packag
 
 By integrating the [Markdig](https://www.nuget.org/packages/Markdig) library, you can parse Markdown text to enhance the chat experience. The [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.ChatMessage.html#Syncfusion_Blazor_InteractiveChat_ChatMessage_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`
-
 ```cshtml
 
 @using Syncfusion.Blazor.InteractiveChat
@@ -740,7 +730,7 @@ By integrating the [Markdig](https://www.nuget.org/packages/Markdig) library, yo
         width: 450px;
         margin: 0 auto;
     }
-     p {
+     .markdown-chatui p {
         margin: 0;
         display: inline-block;
     }
@@ -752,7 +742,7 @@ By integrating the [Markdig](https://www.nuget.org/packages/Markdig) library, yo
 </style>
 
 @code {
-    private SfChatUI ChatUI { get; set; } = null!;
+    private SfChatUI ChatUI { get; set; }
     private string headerText = "Chat UI with Markdown";
     private UserModel currentUserModel =  GetMarkdownUser("user1", "Albert");
     private UserModel michaleUserModel =  GetMarkdownUser("user2", "Michale Suyama");
@@ -777,18 +767,22 @@ By integrating the [Markdig](https://www.nuget.org/packages/Markdig) library, yo
             {
                 Author = currentUserModel,
                 Text = RenderMarkdown("Hey Michale, did you review the _new API documentation_?"),
-                Timestamp = new DateTime(2024, 1, 15, 9, 30, 0)
+                Timestamp = DateTime.UtcNow.AddMinutes(-5)
             });
         chatMessages.Add(new ChatMessage
             {
                 Author = michaleUserModel,
                 Text = RenderMarkdown("Yes! The **endpoint specifications** look great. Check the [integration guide](https://api.example.com/docs) when you get a chance."),
-                Timestamp = new DateTime(2024, 1, 15, 9, 32, 0)
+                Timestamp = DateTime.UtcNow.AddMinutes(-5)
             });
     }
 
     private async Task HandleMessageSend(ChatMessageSendEventArgs args)
     {
+        if (string.IsNullOrEmpty(args.Message.Text))
+        {
+            return;
+        }
         args.Cancel = true; 
         var suggestion = suggestions.FirstOrDefault(s => s.DisplayText == args.Message.Text);
         var messageText = suggestion != null ? suggestion.MarkdownText : args.Message.Text;
@@ -828,4 +822,4 @@ By integrating the [Markdig](https://www.nuget.org/packages/Markdig) library, yo
 
 ```
 
-![Blazor Chat UI MessageToolbarItem](./images/markdown.png)
\ No newline at end of file
+![Blazor Chat UI MessageToolbarItem](./images/markdown.png)

From 6d37669b59b55e1bbf67eaa0d7608d4bc916cbba Mon Sep 17 00:00:00 2001
From: TamilRamGanesan-SF5080 <tamilram.ganesan@syncfusion.com>
Date: Thu, 14 Aug 2025 12:00:16 +0530
Subject: [PATCH 4/6] 974672: changes in image name

---
 blazor/chat-ui/messages.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/blazor/chat-ui/messages.md b/blazor/chat-ui/messages.md
index b4620ac7a3..e555b0e454 100644
--- a/blazor/chat-ui/messages.md
+++ b/blazor/chat-ui/messages.md
@@ -822,4 +822,4 @@ By integrating the [Markdig](https://www.nuget.org/packages/Markdig) library, yo
 
 ```
 
-![Blazor Chat UI MessageToolbarItem](./images/markdown.png)
+![Blazor Chat UI Markdown](./images/markdown.png)

From 0cdc18ef76e7f1bba437c5e5cafbd07ec4036307 Mon Sep 17 00:00:00 2001
From: TamilRamGanesan-SF5080 <tamilram.ganesan@syncfusion.com>
Date: Thu, 14 Aug 2025 17:06:55 +0530
Subject: [PATCH 5/6] 974672: resolved the CI failure

---
 blazor/chat-ui/messages.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/blazor/chat-ui/messages.md b/blazor/chat-ui/messages.md
index e555b0e454..e86e74f995 100644
--- a/blazor/chat-ui/messages.md
+++ b/blazor/chat-ui/messages.md
@@ -752,7 +752,7 @@ By integrating the [Markdig](https://www.nuget.org/packages/Markdig) library, yo
         new Suggestion
         {
             DisplayText = "Share quick link",
-            MarkdownText = "Check out our [project dashboard](https://dashboard.example.com) for updates!"
+            MarkdownText = "Check out our [project dashboard](https://help.syncfusion.com/) for updates!"
         },
         new Suggestion
         {
@@ -772,7 +772,7 @@ By integrating the [Markdig](https://www.nuget.org/packages/Markdig) library, yo
         chatMessages.Add(new ChatMessage
             {
                 Author = michaleUserModel,
-                Text = RenderMarkdown("Yes! The **endpoint specifications** look great. Check the [integration guide](https://api.example.com/docs) when you get a chance."),
+                Text = RenderMarkdown("Yes! The **endpoint specifications** look great. Check the [integration guide](https://blazor.syncfusion.com/documentation/introduction) when you get a chance."),
                 Timestamp = DateTime.UtcNow.AddMinutes(-5)
             });
     }

From 4d6ffc9ba9369ade704ef465ef9cbeaeb3ed628a Mon Sep 17 00:00:00 2001
From: TamilRamGanesan-SF5080 <tamilram.ganesan@syncfusion.com>
Date: Thu, 14 Aug 2025 17:33:26 +0530
Subject: [PATCH 6/6] 974672: resolved front matter error

---
 blazor/chat-ui/messages.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/blazor/chat-ui/messages.md b/blazor/chat-ui/messages.md
index e86e74f995..c7a300f7df 100644
--- a/blazor/chat-ui/messages.md
+++ b/blazor/chat-ui/messages.md
@@ -752,7 +752,7 @@ By integrating the [Markdig](https://www.nuget.org/packages/Markdig) library, yo
         new Suggestion
         {
             DisplayText = "Share quick link",
-            MarkdownText = "Check out our [project dashboard](https://help.syncfusion.com/) for updates!"
+            MarkdownText = "Check out our [project dashboard](https://help.syncfusion.com) for updates!"
         },
         new Suggestion
         {
