Add chat topic for blazor with snippets. (#318)

* Add chat topic for blazor with snippets.

* Sync chat jp with Opus.

* Add to jp toc.

* Fix lint.

* Remove typing indicator, since it's now a slot.

Author: MayaKirova

docs/xplat/src/content/en/components/interactivity/chat.mdx

@@ -43,6 +43,20 @@ npm install igniteui-react
 
 </PlatformBlock>
 
+<PlatformBlock for="Blazor">
+
+```cmd
+Install-Package IgniteUI.Blazor
+```
+
+Or via .NET CLI:
+
+```cmd
+dotnet add package IgniteUI.Blazor
+```
+
+</PlatformBlock>
+
 Once installed, you can import the component in your project and register it so it becomes available as a custom element:
 
 <PlatformBlock for="WebComponents">
@@ -68,6 +82,22 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
 
 </PlatformBlock>
 
+<PlatformBlock for="Blazor">
+
+```cs
+// in Program.cs file
+
+builder.Services.AddIgniteUIBlazor(typeof(IgbChatModule));
+```
+
+You will also need to link an additional CSS file to apply the styling to the <ApiLink pkg="core" type="Chat" /> component.
+
+```razor
+<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
+```
+
+</PlatformBlock>
+
 The CSS file includes one of our default themes. You can replace it with a different theme or create a custom one if you want the <ApiLink type="Chat" /> to match your application’s branding.
 
 ## Usage
@@ -110,6 +140,24 @@ return (
 
 </PlatformBlock>
 
+<PlatformBlock for="Blazor">
+
+
+```cs
+ public IgbChatOptions Options = new IgbChatOptions()
+ {
+  CurrentUserId = "user",
+  HeaderText = "Support Chat"
+ };
+```
+
+```razor
+<IgbChat @ref="Chat" Options="Options">
+</IgbChat>
+```
+
+</PlatformBlock>
+
 
 Here, the `currentUserId` property tells the component which messages are “outgoing” (sent by the current user) versus “incoming” (sent by others). The `headerText` provides a title for the chat window.
 
@@ -165,6 +213,36 @@ const ChatExample = () => {
 
 </PlatformBlock>
 
+<PlatformBlock for="Blazor">
+
+```razor
+<IgbChat @ref="Chat" Options="Options" Messages="Messages" MessageCreated="OnMessageCreated" Height="100%"></IgbChat>
+```
+
+```cs
+ public IgbChatMessage[] Messages = new IgbChatMessage[]
+ {
+     new IgbChatMessage()
+     {
+         Id = "1",
+         Text = "Hi, I have a question about my recent order, #7890.",
+         Sender = "user",
+         Timestamp = (DateTime.Now - TimeSpan.FromMilliseconds(3500000)).ToString()
+     }
+ }
+```
+
+You can then sync messages coming from the client, by hooking to the `messageCreated` event and adding the created messages to the collection:
+
+```cs
+public void OnMessageCreated(IgbChatMessageEventArgs e)
+{
+  Messages = Messages.Append(e.Detail).ToArray();
+}
+```
+
+</PlatformBlock>
+
 This approach makes it easy to plug the Chat into your own data source, such as a server endpoint, a chatbot engine, or a collaborative app backend.
 
 ### Properties
@@ -179,6 +257,8 @@ The <ApiLink type="Chat" /> component exposes several key properties that let yo
 
 These properties make it straightforward to synchronize the Chat’s UI with your application’s state and backend.
 
+<PlatformBlock for="WebComponents, React">
+
 ### Attachments
 Modern conversations are rarely limited to text alone. The Chat component includes built-in support for file attachments, allowing users to share images, documents, and other files.
 By default, the input area includes an attachment button. You can control which file types are allowed by setting the `acceptedFiles` property:
@@ -233,6 +313,8 @@ const options: IgrChatOptions = {
 
 </PlatformBlock>
 
+</PlatformBlock>
+
 ### Suggestions
 Quick reply suggestions provide users with pre-defined responses they can tap to reply instantly. This feature is particularly useful in chatbots, customer service flows, or when guiding users through a structured process.
 You can provide suggestions by binding an array of strings to the suggestions property. The `suggestions-position` attribute lets you control where they are displayed: either below the input area or below the messages list.
@@ -274,6 +356,19 @@ return (
 
 </PlatformBlock>
 
+<PlatformBlock for="Blazor">
+
+```cs
+public IgbChatOptions Options = new IgbChatOptions
+{
+  CurrentUserId = "me",
+  Suggestions = new string[] { "Yes", "No", "Maybe later" },
+  SuggestionsPosition = ChatSuggestionsPosition.BelowInput
+};
+```
+
+</PlatformBlock>
+
 This approach helps streamline user interactions by reducing the need to type repetitive answers and improves the overall experience in guided conversations.
 
 ### Typing Indicator
@@ -303,6 +398,17 @@ const options: IgrChatOptions = {
 
 </PlatformBlock>
 
+<PlatformBlock for="Blazor">
+
+```cs
+public IgbChatOptions Options = new IgbChatOptions
+{
+  IsTyping = true
+};
+```
+
+</PlatformBlock>
+
 This feature is typically toggled programmatically, for example when receiving a typing event from your backend service.
 
 ### Custom Renderers
@@ -312,10 +418,23 @@ The <ApiLink type="Chat" /> component addresses this need with a renderer system
 #### ChatTemplateRenderer
 Every renderer follows the same function signature:
 
+<PlatformBlock for="WebComponents, React">
+
 ```ts
 export type ChatTemplateRenderer<T> = (ctx: T) => unknown;
 ```
 
+</PlatformBlock>
+
+<PlatformBlock for="Blazor">
+
+```js
+igRegisterScript("MyTemplate", (ctx) => {
+}, false);
+```
+
+</PlatformBlock>
+
 The ctx parameter provides different contextual data depending on what is being rendered.
 
 #### Renderer Contexts
@@ -334,7 +453,6 @@ The following parts of the Chat can be customized:
 - Attachment-level: attachment, attachmentHeader, attachmentContent
 - Input-level: input, inputActions, inputActionsStart, inputActionsEnd, inputAttachments, fileUploadButton, sendButton
 - Suggestions: suggestionPrefix
-- Miscellaneous: typingIndicator
 
 This level of granularity means you can tweak just one part (for example, how attachments look) without rewriting the entire chat layout.
 
@@ -376,6 +494,28 @@ const options = {
 
 </PlatformBlock>
 
+<PlatformBlock for="Blazor">
+
+```cs
+public IgbChatOptions Options = new IgbChatOptions
+{
+    Renderers = new IgbChatRenderers()
+    {
+        MessageContentScript = "MessageContentScript"
+    }
+};
+```
+
+```js
+igRegisterScript("MessageContentScript", (ctx) => {
+    var html = window.igTemplating.html;
+    return  html`<div className="bubble custom">${ctx.message.text}</div>`;
+}, false);
+
+```
+
+</PlatformBlock>
+
 #### Example: Custom Input Area
 By default, the chat input is a text area. You can override it to provide a more tailored experience, such as adding a voice input button:
 
@@ -416,12 +556,35 @@ const options = {
 
 </PlatformBlock>
 
+<PlatformBlock for="Blazor">
+
+```cs
+public IgbChatOptions Options = new IgbChatOptions
+{
+    Renderers = new IgbChatRenderers()
+    {
+        InputScript = "InputTemplate"
+    }
+};
+```
+
+
+```js
+igRegisterScript("InputTemplate", (ctx) => {
+    var html = window.igTemplating.html;
+    return html`<textarea placeholder=${ctx.instance?.options?.inputPlaceholder || 'Type here...'}>${ctx.value}</textarea>
+    <button @click=${() => alert('Voice input!')}>🎤</button>`;
+}, false);
+```
+
+</PlatformBlock>
+
 #### Example: Extending Input Actions
 The <ApiLink type="Chat" /> component provides two renderers which are useful when you want to keep the default actions (upload and send) but extend them with additional controls:
 - `inputActionsStart` – allows you to inject custom content after the built-in upload button.
 - `inputActionsEnd` – allows you to inject custom content after the built-in send button.
 
-For example, you might want to add a voice recording button after the upload button, or a menu of extra options after the send button.
+For example, you might want to add a voice recording button before the other buttons, or a menu of extra options after the send button.
 In the following example, the default upload button is preserved, but we add a microphone button next to it. On the other end, we remove the default send button and replace it with a custom Ask button and a “more” menu:
 
 <PlatformBlock for="WebComponents">
@@ -477,13 +640,55 @@ const options = {
 
 </PlatformBlock>
 
+<PlatformBlock for="Blazor">
+
+```cs
+public IgbChatOptions Options = new IgbChatOptions
+{
+  Renderers = new IgbChatRenderers()
+  {
+    InputActionsStartScript = "InputActionsStartTemplate",
+    InputActionsEndScript = "InputActionsEndTemplate",
+    SendButtonScript = "SendButtonTemplate"
+  }
+};
+```
+
+
+```js
+igRegisterScript("SendButtonTemplate", (ctx) => {
+    var html = window.igTemplating.html;
+    return html``;
+}, false);
+
+
+igRegisterScript("InputActionsStartTemplate", (ctx) => {
+    var html = window.igTemplating.html;
+    return html`<igc-icon-button variant="flat">🎤</igc-icon-button>`;
+}, false);
+
+igRegisterScript("InputActionsEndTemplate", (ctx) => {
+    var html = window.igTemplating.html;
+    return html`<div>
+    <igc-button @click=${() => handleCustomSendClick(ctx.instance)}>Ask</igc-button>
+    <igc-icon-button variant="flat" name="more_horiz"></igc-icon-button>
+  </div>`;
+}, false);
+```
+
+</PlatformBlock>
+
 In this setup:
+<PlatformBlock for="WebComponents, React">
 - The upload button remains in place.
+</PlatformBlock>
 - A microphone button is added after it (inputActionsStart).
 - The default send button is removed and replaced with a custom Ask button and a “more” icon (inputActionsEnd).
 
 This approach gives you full flexibility over the chat input bar, letting you add, remove, or reorder actions without rebuilding the input area from scratch.
 
+<PlatformBlock for="WebComponents, React">
+
 ### Markdown Rendering
 
 <PlatformBlock for="WebComponents">
@@ -572,6 +777,8 @@ This will enable highlighted code blocks for JavaScript, Python, and Go, styled
 | `theme`         | An object specifying **Shiki** themes to apply. Supports separate values for `light` and `dark` mode (e.g., `{ light: 'github-light', dark: 'github-dark' }`). |
 | `sanitizer`     | A custom function to sanitize the final HTML. Defaults to `DOMPurify.sanitize`. |
 
+</PlatformBlock>
+
 ### Events
 To integrate with your application logic, the Chat component emits a set of events:
 
@@ -608,6 +815,17 @@ To integrate with your application logic, the Chat component emits a set of even
 
 </PlatformBlock>
 
+
+<PlatformBlock for="Blazor">
+
+- MessageCreated – when a new message is created.
+- MessageReact – when a message is reacted to.
+- TypingChange – when typing status changes.
+- InputFocus / onInputBlur – input focus events.
+- InputChange – when the input value changes.
+
+</PlatformBlock>
+
 You can listen for these events and sync them with your backend:
 
 <PlatformBlock for="WebComponents">
@@ -637,7 +855,22 @@ chatRef.current.addEventListener('onMessageCreated', (e) => {
 
 </PlatformBlock>
 
+<PlatformBlock for="Blazor">
 
+```razor
+<IgbChat MessageCreated="OnMessageCreated"></IgbChat>
+```
+
+```cs
+public void OnMessageCreated(IgbChatMessageEventArgs e)
+{
+  Console.WriteLine($"Message: {e.Detail.Text}");
+}
+```
+
+<Sample src="/interactions/chat/features" height={900} alt="{Platform} Chat Features" />
+
+</PlatformBlock>
 ## Styling
 
 The <ApiLink type="Chat" /> component exposes both **CSS parts** and **slots** for fine-grained customization of its appearance and structure.

docs/xplat/src/content/en/toc.json

@@ -2607,12 +2607,12 @@
   },
   {
     "exclude": [
-      "Angular",
-      "Blazor"
+      "Angular"
     ],
     "name": "Chat",
     "href": "interactivity/chat.md",
-    "new": true
+    "new": true,
+    "preview": true
   },
   {
     "exclude": [