docs(Chat): improve examples to follow style guide

Author: IvanDanchev

components/chat/data-binding.md

@@ -19,21 +19,42 @@ To bind the Chat to data, set its `Data` parameter to an `IEnumerable<T>` where
 >caption Basic data binding
 
 ````Razor
-<TelerikChat Data="@Messages"
+<TelerikChat Data="@ChatData"
              AuthorId="@CurrentUserId"
-             OnSendMessage="@HandleSendMessage">
+             OnSendMessage="@OnChatSendMessage">
 </TelerikChat>
 
 @code {
-    private List<ChatMessage> Messages { get; set; } = new List<ChatMessage>
+    #region Component Parameters
+    
+    private List<ChatMessage> ChatData { get; set; }
+    private string CurrentUserId { get; set; } = "user1";
+    
+    #endregion
+    
+    #region Lifecycle Methods
+    
+    protected override void OnInitialized()
     {
-        new ChatMessage { Id = "1", Text = "Hello!", AuthorId = "user1", Timestamp = DateTime.Now.AddMinutes(-5) },
-        new ChatMessage { Id = "2", Text = "Hi there!", AuthorId = "user2", Timestamp = DateTime.Now.AddMinutes(-3) }
-    };
+        ChatData = new List<ChatMessage>();
+        
+        for (int i = 1; i <= 2; i++)
+        {
+            ChatData.Add(new ChatMessage 
+            { 
+                Id = i.ToString(), 
+                Text = i == 1 ? "Hello!" : "Hi there!", 
+                AuthorId = i == 1 ? "user1" : "user2", 
+                Timestamp = DateTime.Now.AddMinutes(-5 + (i * 2))
+            });
+        }
+    }
     
-    private string CurrentUserId { get; set;  } = "user1";
-
-    private void HandleSendMessage(ChatSendMessageEventArgs args)
+    #endregion
+    
+    #region Methods
+    
+    private void OnChatSendMessage(ChatSendMessageEventArgs args)
     {
         var newMessage = new ChatMessage
         {
@@ -43,8 +64,12 @@ To bind the Chat to data, set its `Data` parameter to an `IEnumerable<T>` where
             Timestamp = DateTime.Now
         };
         
-        Messages.Add(newMessage);
+        ChatData.Add(newMessage);
     }
+    
+    #endregion
+    
+    #region Class Declarations
 
     public class ChatMessage
     {
@@ -72,6 +97,8 @@ To bind the Chat to data, set its `Data` parameter to an `IEnumerable<T>` where
 
         public IEnumerable<FileSelectFileInfo> Attachments { get; set; } = new List<FileSelectFileInfo>();
     }
+    
+    #endregion
 }
 ````
 
@@ -98,24 +125,44 @@ The Chat component provides field mapping parameters to work with different data
 The Chat component automatically reflects changes to the bound data collection. You can add, modify, or remove messages programmatically:
 
 ````Razor
-<TelerikChat @ref="@Chat1"
-             Data="@Messages"
-             TextField="Content"
+<TelerikChat @ref="@ChatRef"
+             Data="@ChatData"
+             TextField="@nameof(ChatMessage.Content)"
              AuthorId="@CurrentUserId"
-             OnSendMessage="@HandleSendMessage">
+             OnSendMessage="@OnChatSendMessage">
 </TelerikChat>
 
 <div style="margin-top: 20px;">
-    <TelerikButton OnClick="@AddSystemMessage">Add System Message</TelerikButton>
-    <TelerikButton OnClick="@ClearMessages">Clear All Messages</TelerikButton>
+    <TelerikButton OnClick="@OnAddSystemMessageClick">Add System Message</TelerikButton>
+    <TelerikButton OnClick="@OnClearMessagesClick">Clear All Messages</TelerikButton>
 </div>
 
 @code {
-    private TelerikChat<ChatMessage> Chat1 { get; set; }
-    private List<ChatMessage> Messages { get; set; } = new List<ChatMessage>();
-    private string CurrentUserId = "user1";
+    #region Component References
+    
+    private TelerikChat<ChatMessage> ChatRef { get; set; }
+    
+    #endregion
+    
+    #region Component Parameters
+    
+    private List<ChatMessage> ChatData { get; set; }
+    private string CurrentUserId { get; set; } = "user1";
+    
+    #endregion
+    
+    #region Lifecycle Methods
+    
+    protected override void OnInitialized()
+    {
+        ChatData = new List<ChatMessage>();
+    }
+    
+    #endregion
+    
+    #region Methods
 
-    private void HandleSendMessage(ChatSendMessageEventArgs args)
+    private void OnChatSendMessage(ChatSendMessageEventArgs args)
     {
         var newMessage = new ChatMessage
         {
@@ -126,14 +173,14 @@ The Chat component automatically reflects changes to the bound data collection.
             Timestamp = DateTime.Now
         };
 
-        Messages.Add(newMessage);
+        ChatData.Add(newMessage);
 
-        Chat1?.Refresh();
+        ChatRef?.Refresh();
     }
 
-    private void AddSystemMessage()
+    private void OnAddSystemMessageClick()
     {
-        Messages.Add(new ChatMessage
+        ChatData.Add(new ChatMessage
         {
             Id = Guid.NewGuid().ToString(),
             Content = "System notification: New user joined the chat",
@@ -142,25 +189,37 @@ The Chat component automatically reflects changes to the bound data collection.
             Timestamp = DateTime.Now
         });
 
-        Chat1?.Refresh();
+        ChatRef?.Refresh();
     }
 
-    private void ClearMessages()
+    private void OnClearMessagesClick()
     {
-        Messages.Clear();
-        Chat1?.Refresh();
+        ChatData.Clear();
+        ChatRef?.Refresh();
     }
+    
+    #endregion
+    
+    #region Class Declarations
 
     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 string Status { get; set; }
+        
         public IEnumerable<FileSelectFileInfo> Attachments { get; set; } = new List<FileSelectFileInfo>();
     }
+    
+    #endregion
 }
 ````
 

components/chat/events.md

@@ -19,16 +19,16 @@ The `OnSendMessage` event fires when a user sends a new message. Use this event
 >caption Handle the OnSendMessage event
 
 ````Razor
-<TelerikChat Data="@Messages"
-             OnSendMessage="@HandleSendMessage">
+<TelerikChat Data="@ChatData"
+             OnSendMessage="@OnChatSendMessage">
 </TelerikChat>
 
-@code {
-    private List<ChatMessage> Messages { get; set; } = new List<ChatMessage>();
+@code {    
+    private List<ChatMessage> ChatData { get; set; } = new List<ChatMessage>();
 
-    private string CurrentUserId { get; set;  } = "user1";
+    private string CurrentUserId { get; set; } = "user1";
 
-    private void HandleSendMessage(ChatSendMessageEventArgs args)
+    private void OnChatSendMessage(ChatSendMessageEventArgs args)
     {
         var newMessage = new ChatMessage
         {
@@ -38,7 +38,7 @@ The `OnSendMessage` event fires when a user sends a new message. Use this event
             Timestamp = DateTime.Now
         };
 
-        Messages.Add(newMessage);
+        ChatData.Add(newMessage);
     }
 
     public class ChatMessage
@@ -77,21 +77,30 @@ The `OnSuggestionClick` event fires when a user clicks on a quick reply suggesti
 >caption Handle suggestion clicks
 
 ````Razor
-<TelerikChat Data="@Messages"
-             @ref="@Chat1"
-             Suggestions="@QuickReplies"
-             OnSuggestionClick="@HandleSuggestionClick">
+<TelerikChat Data="@ChatData"
+             @ref="@ChatRef"
+             Suggestions="@ChatSuggestions"
+             OnSuggestionClick="@OnChatSuggestionClick">
 </TelerikChat>
 
-@code {
-    private TelerikChat<ChatMessage> Chat1;
-
-    private List<string> QuickReplies = new List<string>
+@code {    
+    private TelerikChat<ChatMessage> ChatRef { get; set; }
+    
+    private List<ChatMessage> ChatData { get; set; }
+    
+    private List<string> ChatSuggestions { get; set; }
+    
+    protected override void OnInitialized()
     {
-        "Request project status update"
-    };
+        ChatData = new List<ChatMessage>();
+        
+        ChatSuggestions = new List<string>
+        {
+            "Request project status update"
+        };
+    }
 
-    private void HandleSuggestionClick(ChatSuggestionClickEventArgs args)
+    private void OnChatSuggestionClick(ChatSuggestionClickEventArgs args)
     {
         string responseMessage = string.Empty;
 
@@ -100,7 +109,7 @@ The `OnSuggestionClick` event fires when a user clicks on a quick reply suggesti
             responseMessage = "Could you please provide the current status of all ongoing projects?";
         }
 
-        Messages.Add(new ChatMessage
+        ChatData.Add(new ChatMessage
         {
             Id = Guid.NewGuid().ToString(),
             AuthorId = "user2",
@@ -110,7 +119,7 @@ The `OnSuggestionClick` event fires when a user clicks on a quick reply suggesti
             Timestamp = DateTime.Now
         });
 
-        Chat1?.Refresh();
+        ChatRef?.Refresh();
     }
 }
 ````
@@ -122,12 +131,12 @@ The `OnDownload` event fires when a user downloads files from a message. Use thi
 >caption Handle file downloads
 
 ````RAZOR.skip-repl
-<TelerikChat Data="@Messages"
-             OnDownload="@HandleDownload">
+<TelerikChat Data="@ChatData"
+             OnDownload="@OnChatDownload">
 </TelerikChat>
 
-@code {
-    private async Task HandleDownload(ChatDownloadEventArgs args)
+@code {  
+    private async Task OnChatDownload(ChatDownloadEventArgs args)
     {
         foreach (var file in args.Files)
         {
@@ -148,14 +157,14 @@ The `OnMessageUnpin` event fires when a user unpins a message. Handle this event
 >caption Handle message unpinning
 
 ````RAZOR.skip-repl
-<TelerikChat Data="@Messages"
-             OnMessageUnpin="@HandleMessageUnpin">
+<TelerikChat Data="@ChatData"
+             OnMessageUnpin="@OnChatMessageUnpin">
 </TelerikChat>
 
-@code {
-    private void HandleMessageUnpin(ChatMessageUnpinEventArgs args)
+@code {    
+    private void OnChatMessageUnpin(ChatMessageUnpinEventArgs args)
     {
-        var message = Messages.FirstOrDefault(m => m.Id == args.MessageId);
+        var message = ChatData.FirstOrDefault(m => m.Id == args.MessageId);
         if (message != null)
         {
             message.IsPinned = false;
@@ -171,17 +180,17 @@ The `OnInputValueChanged` event fires when the input value changes. Use this for
 >caption Handle input value changes
 
 ````RAZOR.skip-repl
-<TelerikChat Data="@Messages"
-             InputValue="@InputValue"
-             OnInputValueChanged="@HandleInputChange">
+<TelerikChat Data="@ChatData"
+             InputValue="@ChatInputValue"
+             OnInputValueChanged="@OnChatInputValueChanged">
 </TelerikChat>
 
 @code {
-    private string InputValue { get; set; } = string.Empty;
+    private string ChatInputValue { get; set; } = string.Empty;
 
-    private void HandleInputChange(string value)
+    private void OnChatInputValueChanged(string newValue)
     {
-        InputValue = value;
+        ChatInputValue = newValue;
     }
 }
 ````

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

@@ -57,6 +57,7 @@ Configure file upload behavior using the `ChatFileSelectSettings` component:
 
 @code {
     private TelerikChat<ChatMessage> Chat1;
+    
     private List<string> AllowedExtensions = new List<string> { ".jpg", ".jpeg", ".png", ".pdf", ".docx", ".txt" };
 
     private List<ChatMessage> ChatConversation = new List<ChatMessage>()