Skip to content

Commit 8e8105d

Browse files
IvanDanchevIvanDanchev
authored
docs(Chat): improve examples to follow style guide (#3236)
* docs(Chat): improve examples to follow style guide * docs(Chat): add pr review suggestions
1 parent e44177e commit 8e8105d

File tree

8 files changed

+367
-278
lines changed

8 files changed

+367
-278
lines changed

‎components/chat/data-binding.md‎

Lines changed: 87 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -19,21 +19,42 @@ To bind the Chat to data, set its `Data` parameter to an `IEnumerable<T>` where
1919
>caption Basic data binding
2020
2121
````Razor
22-
<TelerikChat Data="@Messages"
22+
<TelerikChat Data="@ChatData"
2323
AuthorId="@CurrentUserId"
24-
OnSendMessage="@HandleSendMessage">
24+
OnSendMessage="@OnChatSendMessage">
2525
</TelerikChat>
2626
2727
@code {
28-
private List<ChatMessage> Messages { get; set; } = new List<ChatMessage>
28+
#region Component Parameters
29+
30+
private List<ChatMessage> ChatData { get; set; }
31+
private string CurrentUserId { get; set; } = "user1";
32+
33+
#endregion
34+
35+
#region Lifecycle Methods
36+
37+
protected override void OnInitialized()
2938
{
30-
new ChatMessage { Id = "1", Text = "Hello!", AuthorId = "user1", Timestamp = DateTime.Now.AddMinutes(-5) },
31-
new ChatMessage { Id = "2", Text = "Hi there!", AuthorId = "user2", Timestamp = DateTime.Now.AddMinutes(-3) }
32-
};
39+
ChatData = new List<ChatMessage>();
40+
41+
for (int i = 1; i <= 2; i++)
42+
{
43+
ChatData.Add(new ChatMessage
44+
{
45+
Id = i.ToString(),
46+
Text = i == 1 ? "Hello!" : "Hi there!",
47+
AuthorId = i == 1 ? "user1" : "user2",
48+
Timestamp = DateTime.Now.AddMinutes(-5 + (i * 2))
49+
});
50+
}
51+
}
3352
34-
private string CurrentUserId { get; set; } = "user1";
35-
36-
private void HandleSendMessage(ChatSendMessageEventArgs args)
53+
#endregion
54+
55+
#region Methods
56+
57+
private void OnChatSendMessage(ChatSendMessageEventArgs args)
3758
{
3859
var newMessage = new ChatMessage
3960
{
@@ -43,35 +64,30 @@ To bind the Chat to data, set its `Data` parameter to an `IEnumerable<T>` where
4364
Timestamp = DateTime.Now
4465
};
4566
46-
Messages.Add(newMessage);
67+
ChatData.Add(newMessage);
4768
}
69+
70+
#endregion
71+
72+
#region Class Declarations
4873
4974
public class ChatMessage
5075
{
5176
public string Id { get; set; }
52-
5377
public string AuthorId { get; set; }
54-
5578
public string AuthorName { get; set; }
56-
5779
public string AuthorImageUrl { get; set; }
58-
5980
public string Text { get; set; }
60-
6181
public string MessageToReplyId { get; set; }
62-
6382
public string Status { get; set; }
64-
6583
public bool IsDeleted { get; set; }
66-
6784
public bool IsPinned { get; set; }
68-
6985
public DateTime Timestamp { get; set; }
70-
7186
public List<string> SuggestedActions { get; set; }
72-
7387
public IEnumerable<FileSelectFileInfo> Attachments { get; set; } = new List<FileSelectFileInfo>();
7488
}
89+
90+
#endregion
7591
}
7692
````
7793

@@ -98,24 +114,44 @@ The Chat component provides field mapping parameters to work with different data
98114
The Chat component automatically reflects changes to the bound data collection. You can add, modify, or remove messages programmatically:
99115

100116
````Razor
101-
<TelerikChat @ref="@Chat1"
102-
Data="@Messages"
103-
TextField="Content"
117+
<TelerikChat @ref="@ChatRef"
118+
Data="@ChatData"
119+
TextField="@nameof(ChatMessage.Content)"
104120
AuthorId="@CurrentUserId"
105-
OnSendMessage="@HandleSendMessage">
121+
OnSendMessage="@OnChatSendMessage">
106122
</TelerikChat>
107123
108124
<div style="margin-top: 20px;">
109-
<TelerikButton OnClick="@AddSystemMessage">Add System Message</TelerikButton>
110-
<TelerikButton OnClick="@ClearMessages">Clear All Messages</TelerikButton>
125+
<TelerikButton OnClick="@OnAddSystemMessageClick">Add System Message</TelerikButton>
126+
<TelerikButton OnClick="@OnClearMessagesClick">Clear All Messages</TelerikButton>
111127
</div>
112128
113129
@code {
114-
private TelerikChat<ChatMessage> Chat1 { get; set; }
115-
private List<ChatMessage> Messages { get; set; } = new List<ChatMessage>();
116-
private string CurrentUserId = "user1";
130+
#region Component References
131+
132+
private TelerikChat<ChatMessage> ChatRef { get; set; }
133+
134+
#endregion
135+
136+
#region Component Parameters
137+
138+
private List<ChatMessage> ChatData { get; set; }
139+
private string CurrentUserId { get; set; } = "user1";
140+
141+
#endregion
142+
143+
#region Lifecycle Methods
144+
145+
protected override void OnInitialized()
146+
{
147+
ChatData = new List<ChatMessage>();
148+
}
149+
150+
#endregion
151+
152+
#region Methods
117153
118-
private void HandleSendMessage(ChatSendMessageEventArgs args)
154+
private void OnChatSendMessage(ChatSendMessageEventArgs args)
119155
{
120156
var newMessage = new ChatMessage
121157
{
@@ -126,14 +162,14 @@ The Chat component automatically reflects changes to the bound data collection.
126162
Timestamp = DateTime.Now
127163
};
128164
129-
Messages.Add(newMessage);
165+
ChatData.Add(newMessage);
130166
131-
Chat1?.Refresh();
167+
ChatRef?.Refresh();
132168
}
133169
134-
private void AddSystemMessage()
170+
private void OnAddSystemMessageClick()
135171
{
136-
Messages.Add(new ChatMessage
172+
ChatData.Add(new ChatMessage
137173
{
138174
Id = Guid.NewGuid().ToString(),
139175
Content = "System notification: New user joined the chat",
@@ -142,25 +178,31 @@ The Chat component automatically reflects changes to the bound data collection.
142178
Timestamp = DateTime.Now
143179
});
144180
145-
Chat1?.Refresh();
181+
ChatRef?.Refresh();
146182
}
147183
148-
private void ClearMessages()
184+
private void OnClearMessagesClick()
149185
{
150-
Messages.Clear();
151-
Chat1?.Refresh();
186+
ChatData.Clear();
187+
ChatRef?.Refresh();
152188
}
189+
190+
#endregion
191+
192+
#region Class Declarations
153193
154194
public class ChatMessage
155195
{
156-
public string Id { get; set; }
157-
public string AuthorId { get; set; }
158-
public string AuthorName { get; set; }
159-
public string Content { get; set; }
160-
public DateTime Timestamp { get; set; }
161-
public string Status { get; set; }
196+
public string Id { get; set; }
197+
public string AuthorId { get; set; }
198+
public string AuthorName { get; set; }
199+
public string Content { get; set; }
200+
public DateTime Timestamp { get; set; }
201+
public string Status { get; set; }
162202
public IEnumerable<FileSelectFileInfo> Attachments { get; set; } = new List<FileSelectFileInfo>();
163203
}
204+
205+
#endregion
164206
}
165207
````
166208

‎components/chat/events.md‎

Lines changed: 44 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -19,16 +19,16 @@ The `OnSendMessage` event fires when a user sends a new message. Use this event
1919
>caption Handle the OnSendMessage event
2020
2121
````Razor
22-
<TelerikChat Data="@Messages"
23-
OnSendMessage="@HandleSendMessage">
22+
<TelerikChat Data="@ChatData"
23+
OnSendMessage="@OnChatSendMessage">
2424
</TelerikChat>
2525
26-
@code {
27-
private List<ChatMessage> Messages { get; set; } = new List<ChatMessage>();
26+
@code {
27+
private List<ChatMessage> ChatData { get; set; } = new List<ChatMessage>();
2828
29-
private string CurrentUserId { get; set; } = "user1";
29+
private string CurrentUserId { get; set; } = "user1";
3030
31-
private void HandleSendMessage(ChatSendMessageEventArgs args)
31+
private void OnChatSendMessage(ChatSendMessageEventArgs args)
3232
{
3333
var newMessage = new ChatMessage
3434
{
@@ -38,33 +38,22 @@ The `OnSendMessage` event fires when a user sends a new message. Use this event
3838
Timestamp = DateTime.Now
3939
};
4040
41-
Messages.Add(newMessage);
41+
ChatData.Add(newMessage);
4242
}
4343
4444
public class ChatMessage
4545
{
4646
public string Id { get; set; }
47-
4847
public string AuthorId { get; set; }
49-
5048
public string AuthorName { get; set; }
51-
5249
public string AuthorImageUrl { get; set; }
53-
5450
public string Content { get; set; }
55-
5651
public string MessageToReplyId { get; set; }
57-
5852
public string Status { get; set; }
59-
6053
public bool IsDeleted { get; set; }
61-
6254
public bool IsPinned { get; set; }
63-
6455
public DateTime Timestamp { get; set; }
65-
6656
public List<string> SuggestedActions { get; set; }
67-
6857
public IEnumerable<FileSelectFileInfo> Attachments { get; set; } = new List<FileSelectFileInfo>();
6958
}
7059
}
@@ -77,21 +66,30 @@ The `OnSuggestionClick` event fires when a user clicks on a quick reply suggesti
7766
>caption Handle suggestion clicks
7867
7968
````Razor
80-
<TelerikChat Data="@Messages"
81-
@ref="@Chat1"
82-
Suggestions="@QuickReplies"
83-
OnSuggestionClick="@HandleSuggestionClick">
69+
<TelerikChat Data="@ChatData"
70+
@ref="@ChatRef"
71+
Suggestions="@ChatSuggestions"
72+
OnSuggestionClick="@OnChatSuggestionClick">
8473
</TelerikChat>
8574
86-
@code {
87-
private TelerikChat<ChatMessage> Chat1;
88-
89-
private List<string> QuickReplies = new List<string>
75+
@code {
76+
private TelerikChat<ChatMessage>? ChatRef { get; set; }
77+
78+
private List<ChatMessage> ChatData { get; set; } = new();
79+
80+
private List<string> ChatSuggestions { get; set; }
81+
82+
protected override void OnInitialized()
9083
{
91-
"Request project status update"
92-
};
84+
ChatData = new List<ChatMessage>();
85+
86+
ChatSuggestions = new List<string>
87+
{
88+
"Request project status update"
89+
};
90+
}
9391
94-
private void HandleSuggestionClick(ChatSuggestionClickEventArgs args)
92+
private void OnChatSuggestionClick(ChatSuggestionClickEventArgs args)
9593
{
9694
string responseMessage = string.Empty;
9795
@@ -100,7 +98,7 @@ The `OnSuggestionClick` event fires when a user clicks on a quick reply suggesti
10098
responseMessage = "Could you please provide the current status of all ongoing projects?";
10199
}
102100
103-
Messages.Add(new ChatMessage
101+
ChatData.Add(new ChatMessage
104102
{
105103
Id = Guid.NewGuid().ToString(),
106104
AuthorId = "user2",
@@ -110,7 +108,7 @@ The `OnSuggestionClick` event fires when a user clicks on a quick reply suggesti
110108
Timestamp = DateTime.Now
111109
});
112110
113-
Chat1?.Refresh();
111+
ChatRef?.Refresh();
114112
}
115113
}
116114
````
@@ -122,12 +120,12 @@ The `OnDownload` event fires when a user downloads files from a message. Use thi
122120
>caption Handle file downloads
123121
124122
````RAZOR.skip-repl
125-
<TelerikChat Data="@Messages"
126-
OnDownload="@HandleDownload">
123+
<TelerikChat Data="@ChatData"
124+
OnDownload="@OnChatDownload">
127125
</TelerikChat>
128126
129-
@code {
130-
private async Task HandleDownload(ChatDownloadEventArgs args)
127+
@code {
128+
private async Task OnChatDownload(ChatDownloadEventArgs args)
131129
{
132130
foreach (var file in args.Files)
133131
{
@@ -148,14 +146,14 @@ The `OnMessageUnpin` event fires when a user unpins a message. Handle this event
148146
>caption Handle message unpinning
149147
150148
````RAZOR.skip-repl
151-
<TelerikChat Data="@Messages"
152-
OnMessageUnpin="@HandleMessageUnpin">
149+
<TelerikChat Data="@ChatData"
150+
OnMessageUnpin="@OnChatMessageUnpin">
153151
</TelerikChat>
154152
155-
@code {
156-
private void HandleMessageUnpin(ChatMessageUnpinEventArgs args)
153+
@code {
154+
private void OnChatMessageUnpin(ChatMessageUnpinEventArgs args)
157155
{
158-
var message = Messages.FirstOrDefault(m => m.Id == args.MessageId);
156+
var message = ChatData.FirstOrDefault(m => m.Id == args.MessageId);
159157
if (message != null)
160158
{
161159
message.IsPinned = false;
@@ -171,17 +169,17 @@ The `OnInputValueChanged` event fires when the input value changes. Use this for
171169
>caption Handle input value changes
172170
173171
````RAZOR.skip-repl
174-
<TelerikChat Data="@Messages"
175-
InputValue="@InputValue"
176-
OnInputValueChanged="@HandleInputChange">
172+
<TelerikChat Data="@ChatData"
173+
InputValue="@ChatInputValue"
174+
OnInputValueChanged="@OnChatInputValueChanged">
177175
</TelerikChat>
178176
179177
@code {
180-
private string InputValue { get; set; } = string.Empty;
178+
private string ChatInputValue { get; set; } = string.Empty;
181179
182-
private void HandleInputChange(string value)
180+
private void OnChatInputValueChanged(string newValue)
183181
{
184-
InputValue = value;
182+
ChatInputValue = newValue;
185183
}
186184
}
187185
````

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,8 @@ Configure file upload behavior using the `ChatFileSelectSettings` component:
5656
</TelerikChat>
5757
5858
@code {
59-
private TelerikChat<ChatMessage> Chat1;
59+
private TelerikChat<ChatMessage>? Chat1;
60+
6061
private List<string> AllowedExtensions = new List<string> { ".jpg", ".jpeg", ".png", ".pdf", ".docx", ".txt" };
6162
6263
private List<ChatMessage> ChatConversation = new List<ChatMessage>()

0 commit comments

Comments
 (0)