docs: add info about chat new features #12450 #3328
+439
−14
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
IvanDanchev
added
the
merge-to-production
|
Hello @IvanDanchev, Check the below option if you would like to automatically generate PR to production. The automation uses the branch for the cherry-pick, and then will delete the branch. Please, do not delete it manually.
|
IvanDanchev
removed
the
merge-to-production
ikoevska
approved these changes
Nov 5, 2025
|
|
||
| The `MessageFilesLayoutMode` parameter controls how file attachments are displayed within chat messages. Choose from three layout options to best fit your application's design: | ||
|
|
||
| * `ChatMessageFilesLayoutMode.Vertical` - Files are displayed in a vertical stack (default) |
There was a problem hiding this comment.
Suggested change
| * `ChatMessageFilesLayoutMode.Vertical` - Files are displayed in a vertical stack (default) | |
| * `ChatMessageFilesLayoutMode.Vertical`—Files are displayed in a vertical stack (default) |
| The `MessageFilesLayoutMode` parameter controls how file attachments are displayed within chat messages. Choose from three layout options to best fit your application's design: | ||
|
|
||
| * `ChatMessageFilesLayoutMode.Vertical` - Files are displayed in a vertical stack (default) | ||
| * `ChatMessageFilesLayoutMode.Horizontal` - Files are displayed in a horizontal row |
There was a problem hiding this comment.
Suggested change
| * `ChatMessageFilesLayoutMode.Horizontal` - Files are displayed in a horizontal row | |
| * `ChatMessageFilesLayoutMode.Horizontal`—Files are displayed in a horizontal row |
|
|
||
| * `ChatMessageFilesLayoutMode.Vertical` - Files are displayed in a vertical stack (default) | ||
| * `ChatMessageFilesLayoutMode.Horizontal` - Files are displayed in a horizontal row | ||
| * `ChatMessageFilesLayoutMode.Wrap` - Files wrap to the next line when they exceed the message width |
There was a problem hiding this comment.
Suggested change
| * `ChatMessageFilesLayoutMode.Wrap` - Files wrap to the next line when they exceed the message width | |
| * `ChatMessageFilesLayoutMode.Wrap`—Files wrap to the next line when they exceed the message width |
|
|
||
| ## Typing Indicator | ||
|
|
||
| The Chat component supports displaying a typing indicator to show when another user is composing a message. Set the `IsTypingField` parameter to specify which field in your data model indicates typing status, and set that field to `true` on a message to display the typing indicator instead of message content. |
There was a problem hiding this comment.
Suggested change
| The Chat component supports displaying a typing indicator to show when another user is composing a message. Set the `IsTypingField` parameter to specify which field in your data model indicates typing status, and set that field to `true` on a message to display the typing indicator instead of message content. | |
| The Chat component supports displaying a typing indicator to show when another user is composing a message. First, set the `IsTypingField` parameter to specify which field in your data model indicates typing status. Next, set that field to `true` on a message to display the typing indicator instead of the message content. |
There was a problem hiding this comment.
Alternatively, create a numbered list of steps from the last two sentences.
| } | ||
| ```` | ||
|
|
||
| When a message has `IsTyping` set to `true`, the Chat will display an animated typing indicator (typically three dots) instead of the message content. This provides visual feedback that enhances the conversational experience, especially in real-time chat scenarios. |
There was a problem hiding this comment.
This paragraph should ideally be way above, at the beginning of the section.
|
|
||
| The `SuggestionsLayoutMode` parameter controls how suggestions are displayed in the chat interface. Choose from three layout options to optimize the presentation based on the number and length of your suggestions: | ||
|
|
||
| * `ChatSuggestionsLayoutMode.Wrap` - Suggestions wrap to the next line if they exceed the container width (default) |
| } | ||
| ```` | ||
|
|
||
| Use `Scroll` or `ScrollButtons` mode when you have many suggestions or longer text that won't fit comfortably in the available width. The `ScrollButtons` mode is particularly helpful for users who prefer button navigation over scrolling gestures. |
There was a problem hiding this comment.
Again, these seem more appropriate toward the start of the section.
|
|
||
| The `SuggestedActionsLayoutMode` parameter controls how suggested actions (quick actions attached to specific messages) are displayed. Similar to `SuggestionsLayoutMode`, it offers three layout options: | ||
|
|
||
| * `ChatSuggestedActionsLayoutMode.Wrap` - Suggested actions wrap to the next line (default) |
| ## NoDataTemplate | ||
|
|
||
| Customize how individual messages are rendered within the Chat. | ||
| The `NoDataTemplate` allows you to define custom content displayed when the Chat has no messages. This is useful for showing welcome messages, instructions, or branding when the conversation is empty. |
There was a problem hiding this comment.
Same note for allows as before.
|
|
||
| ## MessageContentTemplate | ||
|
|
||
| Customize how individual message content is rendered within the Chat. This template has been renamed from `MessageTemplate` for better clarity. |
There was a problem hiding this comment.
This intro strays from the style of the other sections on the page. Consider aligning for consistency.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Closes https://github.com/telerik/blazor/issues/12450