docs: add chat initial docs #11678 #3193

IvanDanchev · 2025-08-21T10:14:30Z

Closes https://github.com/telerik/blazor/issues/11678

dimodi · 2025-08-26T06:51:21Z

Add the Chat to the "INTERACTIVITY AND UX" category on the home page.

dimodi · 2025-08-26T06:55:47Z

components/chat/overview.md

+             TextField="Content"
+             AuthorIdField="UserId"
+             TimestampField="SentAt"


Use @nameof()

dimodi · 2025-08-26T06:56:10Z

components/chat/overview.md

+        };
+
+        Messages.Add(newMessage);
+        await InvokeAsync(StateHasChanged);


Is this really necessary? The component updates even without it.

Tsvetomir-Hr · 2025-08-26T06:06:09Z

components/chat/overview.md

+            SentAt = DateTime.Now.AddMinutes(-3)
+        }
+    };
+    private string CurrentUserId = "user1";


Suggested change

private string CurrentUserId = "user1";

private readonly string CurrentUserId = "user1";

Tsvetomir-Hr · 2025-08-26T06:06:44Z

components/chat/overview.md

+
+    public class ChatMessage
+    {
+        public string Id { get; set; }


Suggested change

public string Id { get; set; }

public string Id { get; set; } = string.Empty;

Tsvetomir-Hr · 2025-08-26T06:06:50Z

components/chat/overview.md

+    public class ChatMessage
+    {
+        public string Id { get; set; }
+        public string Content { get; set; }


Suggested change

public string Content { get; set; }

public string Content { get; set; } = string.Empty;

Tsvetomir-Hr · 2025-08-26T06:06:56Z

components/chat/overview.md

+    {
+        public string Id { get; set; }
+        public string Content { get; set; }
+        public string UserId { get; set; }


Suggested change

public string UserId { get; set; }

public string UserId { get; set; } = string.Empty;

Tsvetomir-Hr · 2025-08-26T06:07:12Z

components/chat/overview.md

+        public string Content { get; set; }
+        public string UserId { get; set; }
+        public DateTime SentAt { get; set; }
+        public List<FileSelectFileInfo> Attachments { get; set; }


Suggested change

public List<FileSelectFileInfo> Attachments { get; set; }

public List<FileSelectFileInfo>? Attachments { get; set; }

components/chat/data-binding.md

Tsvetomir-Hr · 2025-08-26T06:18:45Z

components/chat/data-binding.md

+    public class ChatMessage
+    {
+        public string Id { get; set; }
+
+        public string AuthorId { get; set; }
+
+        public string AuthorName { get; set; }
+
+        public string Content { get; set; }
+
+        public DateTime Timestamp { get; set; }
+    }


Suggested change

public class ChatMessage

{

public string Id { get; set; }

public string AuthorId { get; set; }

public string AuthorName { get; set; }

public string Content { get; set; }

public DateTime Timestamp { get; set; }

}

public class ChatMessage

{

public string Id { get; set; } = string.Empty;

public string AuthorId { get; set; } = string.Empty;

public string AuthorName { get; set; } = string.Empty;

public string Content { get; set; } = string.Empty;

public DateTime Timestamp { get; set; }

}

components/chat/data-binding.md

ikoevska

Make sure to add captions to your code snippets and examples. The more descriptive the better. For the most part, this PR lacks links to the API documentation. There are also issues with the amount of information that the docs provide. There are many instances of "this lets you do something" without actually explaining how to do it but resorting to the code snippet instead.

Also note that there's a very confusing API docs experience. There's documentation under Telerik.Blazor.Components which seems pretty descriptive and extensive. and then there's additional documentation under Telerik.Blazor.Components.Chat where there are absolutely no descriptions for anything. Are these supposed to be hidden or is there another reason for the lack of docs there?

ikoevska · 2025-09-03T11:47:17Z

components/chat/file-uploads-and-media.md

+| `Multiple` | `bool` | `true` | Allow multiple file selection |
+| `OnSelect` | `EventCallback` | - | Event fired when files are selected |
+
+>caption An exemplary Chat file upload configuration is shown below


Is this a sample Chat or an exemplary Chat? Double-check the definition of exemplary.

ikoevska · 2025-09-03T11:50:36Z

components/chat/file-uploads-and-media.md

+
+Configure file actions and handle downloads using JavaScript interop and custom event handlers.
+
+1. Add JavaScript Interop


This is a weird approach to a simple step-by-step procedure. It's as if the step text should act as a title (also indicated by the lack of ending punctuation and the title-style casing) and the line below is supposed to be the explanation text under the heading. Please, fix the entire section. Also, note that while Step 2 complies with this approach, Step 3 strays from it.

ikoevska · 2025-09-03T11:52:54Z

components/chat/file-uploads-and-media.md

+
+### Configuration
+
+Enable speech-to-text functionality by setting `EnableSpeechToText` to `true`:


Switch the ending punctuation to a period for consistency with the remainder of the article.

ikoevska · 2025-09-03T11:57:15Z

components/chat/integrations.md

+
+This article explains:
+
+* [AI and LLM Integration](#ai-and-llm-integration) - Connect to AI services and language models


Ideally, you would use colons or m-dashes as a separator here. Furthermore, You don't really need the current format of this section. You could have gone with:

This article explains how to: * Connect to AI services and language models * Integrate with chatbot frameworks * Handle AI responses and user interactions

(with the respective links)

ikoevska · 2025-09-03T11:58:21Z

components/chat/integrations.md

+
+The Chat component works seamlessly with AI services and Large Language Models. You can integrate with various providers like OpenAI, Azure OpenAI, or custom AI services. 
+
+### Microsoft.Extensions.AI Integration Example


Go with a caption or some other title style here instead. Single nested H-elements are not a good practice and it looks odd in the sidebar navigation.

ikoevska · 2025-09-03T11:59:21Z

components/chat/integrations.md

+
+You can connect the Chat component to various chatbot platforms including Microsoft Bot Framework, custom REST APIs, or third-party chatbot services. The component handles the user interface while your bot service processes messages and generates appropriate responses.
+
+>tip The [Person to Bot demo](https://demos.telerik.com/blazor-ui/chat/person-to-bot) showcases chatbot functionality. This demo utilizes a Telerik-hosted AI service solely for illustration purposes. In production environments, you should develop your own AI service tailored to your specific business domain, requirements, and organizational needs.


Person-to-Bot

Semantically, this is not a tip but an info box. A tip implies non-essential information that might improve your productivity or results. In this case, you're informing the reader of something they need to be aware of.

ikoevska · 2025-09-03T14:21:06Z

components/chat/messages.md

+
+Control the width behavior of chat messages using the `MessageWidthMode` parameter:
+
+* `MessageWidthMode.Standard` - Messages take up a portion of the available space for better readability (default behavior)


Switch to a colon or an m-dash for the separator. Add ending punctuation to the list items.

ikoevska · 2025-09-03T14:24:47Z

components/chat/overview.md

+}
+````
+
+## Data Binding


Note that Quick Actions are not listed among the key features.

ikoevska · 2025-09-03T14:33:42Z

components/chat/quick-actions.md

+
+## Message Suggestions
+
+Message suggestions provide users with quick reply options that appear below the message input area.


This section is not very helpful to be honest. I had to inspect the code and the example to figure out the feature. You need to add some explicit explanations in here. This would make the content more helpful to both readers and LLMs.

ikoevska · 2025-09-03T14:37:59Z

components/chat/quick-actions.md

+
+## Custom Suggestion Templates
+
+Customize the appearance of suggestions using the Chat's `SuggestionTemplate`.


Note how your snippet here contains code comments. However, none of them relate to SuggestionTemplate. Improve your sample code with notes about the actual thing you're documenting. There's also no caption for the code snippet. There are no links to the APIs.

docs: add chat initial docs #11678

828c6d1

IvanDanchev requested review from a team as code owners August 21, 2025 10:14

IvanDanchev marked this pull request as draft August 21, 2025 10:14

IvanDanchev added 2 commits August 26, 2025 01:12

docs: add content to Chat articles part1 #11678

d9b3b36

docs: add content to Chat articles part2 #11678

ee42d9f

IvanDanchev marked this pull request as ready for review August 26, 2025 05:11

IvanDanchev requested a review from xristianstefanov August 26, 2025 05:11

dimodi reviewed Aug 26, 2025

View reviewed changes

Tsvetomir-Hr reviewed Aug 26, 2025

View reviewed changes

docs: fix code snippet #11678

a79aa44

xristianstefanov approved these changes Aug 26, 2025

View reviewed changes

Add Chat to home page

4965247

dimodi merged commit 5bc71da into master Aug 26, 2025

github-actions bot deleted the chat-docs branch August 26, 2025 07:41

ikoevska reviewed Sep 3, 2025

View reviewed changes

	private string CurrentUserId = "user1";
	private readonly string CurrentUserId = "user1";

	public string Id { get; set; }
	public string Id { get; set; } = string.Empty;

	public string Content { get; set; }
	public string Content { get; set; } = string.Empty;

	public string UserId { get; set; }
	public string UserId { get; set; } = string.Empty;

	public List<FileSelectFileInfo> Attachments { get; set; }
	public List<FileSelectFileInfo>? Attachments { get; set; }


		Configure file actions and handle downloads using JavaScript interop and custom event handlers.

		1. Add JavaScript Interop


		### Configuration

		Enable speech-to-text functionality by setting `EnableSpeechToText` to `true`:


		This article explains:

		* [AI and LLM Integration](#ai-and-llm-integration) - Connect to AI services and language models


		The Chat component works seamlessly with AI services and Large Language Models. You can integrate with various providers like OpenAI, Azure OpenAI, or custom AI services.

		### Microsoft.Extensions.AI Integration Example


		You can connect the Chat component to various chatbot platforms including Microsoft Bot Framework, custom REST APIs, or third-party chatbot services. The component handles the user interface while your bot service processes messages and generates appropriate responses.

		>tip The [Person to Bot demo](https://demos.telerik.com/blazor-ui/chat/person-to-bot) showcases chatbot functionality. This demo utilizes a Telerik-hosted AI service solely for illustration purposes. In production environments, you should develop your own AI service tailored to your specific business domain, requirements, and organizational needs.


		Control the width behavior of chat messages using the `MessageWidthMode` parameter:

		* `MessageWidthMode.Standard` - Messages take up a portion of the available space for better readability (default behavior)


		## Message Suggestions

		Message suggestions provide users with quick reply options that appear below the message input area.


		## Custom Suggestion Templates

		Customize the appearance of suggestions using the Chat's `SuggestionTemplate`.

docs: add chat initial docs #11678 #3193

docs: add chat initial docs #11678 #3193

Uh oh!

Conversation

IvanDanchev commented Aug 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dimodi commented Aug 26, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

ikoevska left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

IvanDanchev commented Aug 21, 2025 •

edited

Loading

ikoevska left a comment •

edited

Loading