Skip to content

Commit 6f6f3cd

Browse files
IvanDanchevIvanDanchev
authored
docs: add info about chat new features #12450 (#3328)
* docs: add info about chat new features #12450 * docs: add pr review suggestions #12450 * docs: add pr review suggestions part2 #12450
1 parent 6b9a2fc commit 6f6f3cd

File tree

5 files changed

+443
-17
lines changed

5 files changed

+443
-17
lines changed

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,21 @@ Enable file uploads by setting the `EnableFileUpload` parameter to `true`:
2121
</TelerikChat>
2222
````
2323

24+
## Message Files Layout
25+
26+
The `MessageFilesLayoutMode` parameter controls how file attachments are displayed within chat messages. Choose from three layout options to best fit your application's design:
27+
28+
* `ChatMessageFilesLayoutMode.Vertical`&mdash;Files are displayed in a vertical stack (default)
29+
* `ChatMessageFilesLayoutMode.Horizontal`&mdash;Files are displayed in a horizontal row
30+
* `ChatMessageFilesLayoutMode.Wrap`&mdash;Files wrap to the next line when they exceed the message width
31+
32+
````RAZOR.skip-repl
33+
<TelerikChat Data="@ChatData"
34+
EnableFileUpload="true"
35+
MessageFilesLayoutMode="@ChatMessageFilesLayoutMode.Horizontal">
36+
</TelerikChat>
37+
````
38+
2439
## File Upload Settings
2540

2641
Configure file upload behavior using the `ChatFileSelectSettings` component:

‎components/chat/messages.md‎

Lines changed: 204 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,71 @@ position: 5
1212

1313
The Telerik UI for Blazor Chat component provides comprehensive control over message display, interactions, and styling to create rich conversational experiences.
1414

15+
## Typing Indicator
16+
17+
The Chat supports displaying a typing indicator to show when another user is composing a message. When a message has `IsTyping` set to `true`, the component 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.
18+
19+
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.
20+
21+
````Razor
22+
<TelerikButton OnClick="@AddTypingMessage">Show Typing Indicator</TelerikButton>
23+
24+
<TelerikChat Data="@ChatData"
25+
@ref="@ChatRef"
26+
AuthorId="@CurrentUserId"
27+
IsTypingField="@nameof(ChatMessage.IsTyping)"
28+
OnSendMessage="@OnChatSendMessage"
29+
TextField="@nameof(ChatMessage.Content)">
30+
</TelerikChat>
31+
32+
@code {
33+
private TelerikChat<ChatMessage> ChatRef { get; set; }
34+
private List<ChatMessage> ChatData { get; set; } = new();
35+
private string CurrentUserId { get; set; } = "user1";
36+
37+
private void AddTypingMessage()
38+
{
39+
var typingMessage = new ChatMessage
40+
{
41+
Id = Guid.NewGuid().ToString(),
42+
Content = null,
43+
AuthorId = "support",
44+
AuthorName = "Support Agent",
45+
Timestamp = DateTime.Now,
46+
IsTyping = true
47+
};
48+
49+
ChatData.Add(typingMessage);
50+
}
51+
52+
private void OnChatSendMessage(ChatSendMessageEventArgs args)
53+
{
54+
ChatData.RemoveAll(m => m.IsTyping);
55+
56+
var newMessage = new ChatMessage
57+
{
58+
Id = Guid.NewGuid().ToString(),
59+
Content = args.Message,
60+
AuthorId = CurrentUserId,
61+
Timestamp = DateTime.Now
62+
};
63+
64+
ChatData.Add(newMessage);
65+
ChatRef?.Refresh();
66+
}
67+
68+
public class ChatMessage
69+
{
70+
public string Id { get; set; }
71+
public string AuthorId { get; set; }
72+
public string AuthorName { get; set; }
73+
public string Content { get; set; }
74+
public bool IsTyping { get; set; }
75+
public DateTime Timestamp { get; set; }
76+
}
77+
}
78+
````
79+
1580
## Context Menu Message Actions
1681

1782
Configure context menu actions that appear when users right-click on messages. These actions provide quick access to common message operations.
@@ -179,6 +244,145 @@ Control the width behavior of chat messages using the `MessageWidthMode` paramet
179244
* `MessageWidthMode.Standard` - Messages take up a portion of the available space for better readability (default behavior)
180245
* `MessageWidthMode.Full` - Messages span the full width of the chat container
181246

247+
## Author and Receiver Message Settings
248+
249+
The Chat component lets you configure settings specifically for author messages (sent by the current user) and receiver messages (received from other users) using `ChatAuthorMessageSettings` and `ChatReceiverMessageSettings` components. These settings take precedence over global Chat settings, enabling different configurations for sent and received messages.
250+
251+
Use these settings to customize message behavior, appearance, and available actions based on whether the message was sent or received. For example, you might want different context menu actions, toolbar actions, or file actions for your own messages versus messages from others.
252+
253+
````Razor
254+
<TelerikChat Data="@ChatData"
255+
@ref="@ChatRef"
256+
AuthorId="@CurrentUserId"
257+
OnSendMessage="@OnChatSendMessage">
258+
<ChatSettings>
259+
<ChatAuthorMessageSettings EnableMessageCollapse="true"
260+
MessageWidthMode="@MessageWidthMode.Full">
261+
<ChatMessageContextMenuActions>
262+
<ChatMessageContextMenuAction Name="Edit" Text="Edit" Icon="@SvgIcon.Pencil" />
263+
<ChatMessageContextMenuAction Name="Delete" Text="Delete" Icon="@SvgIcon.Trash" />
264+
</ChatMessageContextMenuActions>
265+
<ChatMessageToolbarActions>
266+
<ChatMessageToolbarAction Icon="@SvgIcon.Pin" OnClick="@PinMessage" Text="Pin My Message" />
267+
</ChatMessageToolbarActions>
268+
<ChatFileActions>
269+
<ChatFileAction Name="Download" Text="Download My File" />
270+
</ChatFileActions>
271+
</ChatAuthorMessageSettings>
272+
273+
<ChatReceiverMessageSettings EnableMessageCollapse="false"
274+
MessageWidthMode="@MessageWidthMode.Standard">
275+
<ChatMessageContextMenuActions>
276+
<ChatMessageContextMenuAction Name="Reply" Text="Reply" Icon="@SvgIcon.Undo" />
277+
<ChatMessageContextMenuAction Name="Forward" Text="Forward" Icon="@SvgIcon.Forward" />
278+
</ChatMessageContextMenuActions>
279+
<ChatMessageToolbarActions>
280+
<ChatMessageToolbarAction Icon="@SvgIcon.Heart" OnClick="@ReactToMessage" Text="Like" />
281+
</ChatMessageToolbarActions>
282+
<ChatFileActions>
283+
<ChatFileAction Name="Download" Text="Download Shared File" />
284+
</ChatFileActions>
285+
</ChatReceiverMessageSettings>
286+
</ChatSettings>
287+
</TelerikChat>
288+
289+
@code {
290+
private TelerikChat<ChatMessage> ChatRef { get; set; }
291+
private List<ChatMessage> ChatData { get; set; } = new()
292+
{
293+
new ChatMessage()
294+
{
295+
Id = "1",
296+
AuthorId = "support",
297+
Content = "Hello! How can I assist you today?",
298+
Timestamp = DateTime.Now.AddMinutes(-10)
299+
},
300+
new ChatMessage()
301+
{
302+
Id = "2",
303+
AuthorId = "user1",
304+
Content = "Hi, I have a question about the new features.",
305+
Timestamp = DateTime.Now.AddMinutes(-5)
306+
}
307+
};
308+
private string CurrentUserId { get; set; } = "user1";
309+
310+
private void OnChatSendMessage(ChatSendMessageEventArgs args)
311+
{
312+
var newMessage = new ChatMessage
313+
{
314+
Id = Guid.NewGuid().ToString(),
315+
Content = args.Message,
316+
AuthorId = CurrentUserId,
317+
Timestamp = DateTime.Now
318+
};
319+
320+
ChatData.Add(newMessage);
321+
}
322+
323+
private void PinMessage(ChatMessageActionClickEventArgs args)
324+
{
325+
var message = ChatData.FirstOrDefault(m => m.Id == args.MessageId);
326+
if (message != null)
327+
{
328+
message.IsPinned = true;
329+
ChatRef?.Refresh();
330+
}
331+
}
332+
333+
private void ReactToMessage(ChatMessageActionClickEventArgs args)
334+
{
335+
Console.WriteLine($"Liked message: {args.MessageId}");
336+
}
337+
338+
public class ChatMessage
339+
{
340+
public string Id { get; set; }
341+
public string AuthorId { get; set; }
342+
public string Content { get; set; }
343+
public bool IsPinned { get; set; }
344+
public DateTime Timestamp { get; set; }
345+
}
346+
}
347+
````
348+
349+
`ChatAuthorMessageSettings` and `ChatReceiverMessageSettings` provide the following settings:
350+
351+
* `EnableMessageCollapse`&mdash;Enables the collapse functionality for long messages
352+
* `MessageWidthMode`&mdash;Controls message width (`Standard` or `Full`)
353+
* `ChatMessageContextMenuActions`&mdash;Defines context menu actions for right-click interactions
354+
* `ChatMessageToolbarActions`&mdash;Defines toolbar actions that appear on hover or selection
355+
* `ChatFileActions`&mdash;Defines actions available for file attachments
356+
357+
If no author or receiver-specific setting is provided, the component falls back to the global Chat settings.
358+
359+
## Send Message Button Customization
360+
361+
Customize the appearance of the send message button using the `ChatSendMessageButtonSettings` component. The `Class` parameter allows you to apply custom CSS classes for styling.
362+
363+
````Razor
364+
<TelerikChat Data="@ChatData"
365+
AuthorId="@CurrentUserId"
366+
OnSendMessage="@OnChatSendMessage">
367+
<ChatSettings>
368+
<ChatSendMessageButtonSettings Class="custom-send-button" />
369+
</ChatSettings>
370+
</TelerikChat>
371+
372+
<style>
373+
.custom-send-button {
374+
background-color: #4CAF50;
375+
color: white;
376+
border-radius: 50%;
377+
padding: 10px;
378+
}
379+
380+
.custom-send-button:hover {
381+
background-color: #45a049;
382+
}
383+
</style>
384+
````
385+
182386
## Message Box Value Persistence
183387

184388
The message box value represents the text that users have typed but haven't sent yet.

‎components/chat/overview.md‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -130,20 +130,24 @@ The Chat component provides a variety of parameters:
130130

131131
| Parameter | Type and Default&nbsp;Value | Description |
132132
| --- | --- | --- |
133-
| `Data` | `IEnumerable<TItem>` | The data source for chat messages. |
133+
| `AttachmentsField` | `string` <br /> (`"Attachments"`) | The name of the field containing message file attachments. |
134134
| `AuthorId` | `string` | The ID of the current user sending messages. |
135-
| `TextField` | `string` <br /> (`"Text"`) | The name of the field containing the message content. |
136135
| `AuthorIdField` | `string` <br /> (`"AuthorId"`) | The name of the field containing the author identifier. |
137-
| `TimestampField` | `string` <br /> (`"Timestamp"`) | The name of the field containing the message timestamp. |
138-
| `AuthorNameField` | `string` <br /> (`"AuthorName"`) | The name of the field containing the author display name. |
139136
| `AuthorImageUrlField` | `string` <br /> (`"AuthorImageUrl"`) | The name of the field containing the author's avatar image URL. |
140-
| `AttachmentsField` | `string` <br /> (`"Attachments"`) | The name of the field containing message file attachments. |
141-
| `Height` | `string` | The height of the chat component in CSS units. |
142-
| `Width` | `string` | The width of the chat component in CSS units. |
137+
| `AuthorNameField` | `string` <br /> (`"AuthorName"`) | The name of the field containing the author display name. |
138+
| `Data` | `IEnumerable<TItem>` | The data source for chat messages. |
143139
| `EnableFileUpload` | `bool` <br /> (`false`) | Enables file upload functionality in the chat input. |
144140
| `EnableSpeechToText` | `bool` <br /> (`true`) | Enables speech-to-text functionality with microphone input. |
141+
| `Height` | `string` | The height of the chat component in CSS units. |
142+
| `IsTypingField` | `string` | The name of the field that indicates whether a message represents a typing indicator. |
143+
| `MessageFilesLayoutMode` | `ChatMessageFilesLayoutMode` enum <br /> (`Vertical`) | Controls how file attachments are displayed (Vertical, Horizontal, or Wrap). |
145144
| `MessageWidthMode` | `MessageWidthMode` enum <br /> (`Standard`) | Controls the width behavior of messages (Standard or Full). |
145+
| `SuggestedActionsLayoutMode` | `ChatSuggestedActionsLayoutMode` enum <br /> (`Wrap`) | Controls how suggested actions are displayed (Wrap, Scroll, or ScrollButtons). |
146146
| `Suggestions` | `IEnumerable<string>` | Collection of quick reply suggestions. |
147+
| `SuggestionsLayoutMode` | `ChatSuggestionsLayoutMode` enum <br /> (`Wrap`) | Controls how message suggestions are displayed (Wrap, Scroll, or ScrollButtons). |
148+
| `TextField` | `string` <br /> (`"Text"`) | The name of the field containing the message content. |
149+
| `TimestampField` | `string` <br /> (`"Timestamp"`) | The name of the field containing the message timestamp. |
150+
| `Width` | `string` | The width of the chat component in CSS units. |
147151

148152
## Chat Reference and Methods
149153

‎components/chat/quick-actions.md‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,103 @@ The Telerik UI for Blazor Chat component supports quick actions and message sugg
1616

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

19+
## Suggestions Layout Mode
20+
21+
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:
22+
23+
* `ChatSuggestionsLayoutMode.Wrap`&mdash;Suggestions wrap to the next line if they exceed the container width (default)
24+
* `ChatSuggestionsLayoutMode.Scroll`&mdash;Suggestions are displayed in a single line with horizontal scrolling
25+
* `ChatSuggestionsLayoutMode.ScrollButtons`&mdash;Suggestions are displayed in a single line with horizontal scrolling and navigation
26+
27+
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.
28+
29+
````Razor
30+
<TelerikChat Data="@ChatData"
31+
Suggestions="@QuickReplies"
32+
SuggestionsLayoutMode="@ChatSuggestionsLayoutMode.Scroll"
33+
OnSuggestionClick="@HandleSuggestionClick"
34+
Width="70vw">
35+
</TelerikChat>
36+
37+
@code {
38+
private List<ChatMessage> ChatData { get; set; } = new();
39+
40+
private List<string> QuickReplies = new List<string>
41+
{
42+
"Request project status update",
43+
"Schedule a follow-up meeting",
44+
"Review document",
45+
"Send report",
46+
"Approve changes"
47+
};
48+
49+
private void HandleSuggestionClick(ChatSuggestionClickEventArgs args)
50+
{
51+
// Handle suggestion click
52+
}
53+
54+
public class ChatMessage
55+
{
56+
public string Id { get; set; }
57+
public string AuthorId { get; set; }
58+
public string Content { get; set; }
59+
public DateTime Timestamp { get; set; }
60+
}
61+
}
62+
````
63+
64+
## Suggested Actions Layout Mode
65+
66+
The `SuggestedActionsLayoutMode` parameter controls how suggested actions (quick actions attached to specific messages) are displayed. Similar to `SuggestionsLayoutMode`, it offers three layout options:
67+
68+
* `ChatSuggestedActionsLayoutMode.Wrap`&mdash;Suggested actions wrap to the next line (default)
69+
* `ChatSuggestedActionsLayoutMode.Scroll`&mdash;Suggested actions are displayed in a single line with horizontal scrolling
70+
* `ChatSuggestedActionsLayoutMode.ScrollButtons`&mdash;Suggested actions are displayed in a single line with horizontal scrolling and navigation buttons
71+
72+
````Razor
73+
<TelerikChat Data="@ChatData"
74+
SuggestedActionsLayoutMode="@ChatSuggestedActionsLayoutMode.ScrollButtons"
75+
OnSendMessage="@HandleSendMessage"
76+
Width="80vw">
77+
</TelerikChat>
78+
79+
@code {
80+
private List<ChatMessage> ChatData { get; set; } = new()
81+
{
82+
new ChatMessage
83+
{
84+
Id = "1",
85+
AuthorId = "bot",
86+
Content = "How would you like to proceed?",
87+
Timestamp = DateTime.Now,
88+
SuggestedActions = new List<string>
89+
{
90+
"Option 1: Quick action",
91+
"Option 2: Detailed review",
92+
"Option 3: Schedule later",
93+
"Option 4: Request more info"
94+
}
95+
}
96+
};
97+
98+
private void HandleSendMessage(ChatSendMessageEventArgs args)
99+
{
100+
// Handle send message
101+
}
102+
103+
public class ChatMessage
104+
{
105+
public string Id { get; set; }
106+
public string AuthorId { get; set; }
107+
public string Content { get; set; }
108+
public DateTime Timestamp { get; set; }
109+
public List<string> SuggestedActions { get; set; }
110+
}
111+
}
112+
````
113+
114+
Suggested actions are contextual quick replies that appear below specific messages, helping guide users through conversations or workflows. The layout mode ensures they are displayed effectively regardless of their number or length.
115+
19116
>caption Basic message suggestions
20117
21118
````razor

0 commit comments

Comments
 (0)