update chat and add redirects

Author: didiyordanova

controls/chat/commands.md

@@ -13,27 +13,77 @@ The Telerik UI for .NET MAUI Chat allows you to attach commands that will be exe
 ## Commands Related to the Chat Input Area:
 
 * `SendMessageCommand` (`ICommand`)—Defines the command that is executed when the send button is clicked or the `Enter` key is pressed. 
+* `PickFileCommand` (`ICommand`)—Defines the command that opens the Microsoft.Maui.Storage.FilePicker for attaching files for upload.
+* `PickPhotoCommand` (`ICommand`)—Defines the command that opens the Microsoft.Maui.Media.MediaPicker for attaching photos for upload.
+* `TakePhotoCommand` (`ICommand`)—Defines the command that opens the camera for attaching a photo.
+
+>tip You need to grand permissions to access the device camera and device external storage.
 
 ## Commands Related to Attachments
 
-* `` ()—
+* `AttachFilesCommand` (`ICommand`)—Defines the command that is executed when the files the end-user picked need to be attached/uploaded.
+* `DownloadAttachmentsCommand` (`ICommand`)—Defines the command that is executed when the end user initiates download of attachments for a `Telerik.Maui.Controls.Chat.ChatAttachmentsMessage`. The command parameter of this command is of type `Telerik.Maui.Controls.Chat.ChatDownloadAttachmentsCommandContext.`
+* `ShareAttachmentsCommand` (`ICommand`)—Defines the command that triggers the share attachments operation.
+* `RemoveAttachedFileCommand` (`ICommand`)—Defines the command that should remove an attached file from the `Telerik.Maui.Controls.RadChat.AttachedFilesSource` collection in the view model.
 
 ## Example with SendMessageCommand
 
 Here is an example on how to define a command in the ViewModel and bind the `SendMessageCommand` to it:
 
-**1.** Add the command's `Execute` method.
+1. Add the command's `Execute` method.
 
 <snippet id='chat-commands-executemethod' />
 
-**2.** Define the `RadChat` component:
+2. Define the `RadChat` component:
 
 <snippet id='chat-commands-xaml' />
 
-**3.** Add the ViewModel:
+3. Add the ViewModel:
 
 <snippet id='chat-commands-viewmodel' />
 
+## Example with AttachFilesCommand
+
+1. Define the `RadChat` component:
+
+<snippet id='chat-attachments-xaml' />
+
+2. Add the `ViewModel` with the `AttachFilesCommand` definition:
+
+<snippet id='chat-with-attachments-view-model' />
+
+3. Create a sample `MessageItem` model:
+
+<snippet id='chat-message-item' />
+
+4. Create `AttachmentsItem` class and define the attachments collection property:
+
+<snippet id='chat-attachments-item' />
+
+5. Define an `AttachmentData` class to hold the attachment information:
+
+<snippet id='chat-attachment-data' />
+
+6. Define the custom class for the attachments file data:
+
+<snippet id='chat-attached-file-data' />
+
+7. Define a converter to convert a data item to a chat attachment. In general here you need to create and set up the corresponding `Telerik.Maui.Controls.Chat.ChatAttachedFile` for the given business object: 
+
+<snippet id='chat-attached-file-converter' />
+
+8. Define a custom converter that converts from chat specific objects to business objects, so that the `ViewModel` does not have to handle chat specific classes:
+
+<snippet id='chat-attached-file-command-converter' />
+
+9. The `ItemConverter` is need in MVVM scenario as custom items are used:
+
+<snippet id='chat-attachment-item-converter' />
+
+10. The demo uses a custom data file server for uploading, downloading and deleting attachments:
+
+<snippet id='chat-data-server' />
+
 ## See Also
 
 - [MVVM Support]({% slug chat-mvvm-support%})

controls/chat/events.md

@@ -14,7 +14,12 @@ Here is a list of the available events:
 
 * `SendMessage`—Raised when a message is sent from the chat by the current author (by clicking the send message button or pressing Enter).
 * `AttachFiles`—Raised when the end user picks files to attach.
+	* The `sender` argument, which is of type `object`, but can be cast to the `RadChat` type.
+	* A `ChatAttachFilesEventArgs` object which provides the list of files (`IList<IFileInfo> FilesToAttach`) to attach to the chat message.
+
 * `RemoveAttachedFile`&mdash;Raised when the end user removes an attached file, via the `X` button of the `ChatInputAreaAttachedFileItemView`.
+	* The `sender` argument, which is of type `object`, but can be cast to the `RadChat` type.
+	* * A `ChatRemoveAttachedFileEventArgs` object which provides the index (`Index` of type `int`) of the item that should be removed from the `Telerik.Maui.Controls.RadChat.AttachedFilesSource` and `Telerik.Maui.Controls.RadChat.AttachedFiles`.
 
 ## See Also
 

controls/chat/items/attachments.md

@@ -8,4 +8,4 @@ slug: chat-attachments
 
 # Attachments
 
-The Telerik MAUI Chat control provides options to attach images, files, and other media to messages. You can achieve this by adding `Attachment` instances to the `Attachments` collection of a `TextMessage` item.
+The Telerik MAUI Chat control provides options to attach images, files, and other media to messages.

controls/chat/localization.md

@@ -17,7 +17,13 @@ In `RadChat`, you can localize the following string:
 
 | Localization Key | Default Value |
 | -----------------| ------------- |
-| `Chat_EntryPlaceholder` | `Type a message...` | 
+| `Chat_EntryPlaceholder` | `Type a message...` |
+| `Chat_MessageAttachmentAction_Download` | `Download` |
+| `Chat_MessageAttachmentAction_Share` | `Share` |
+| `Chat_MessageAttachmentsListView_DownloadAll` | `Download All` |
+| `Chat_InputArea_PickFile` | `Attach files` |
+| `Chat_InputArea_PickPhoto` | `Attach photos` |
+| `Chat_InputArea_TakePhoto` | `Take photo` |
 
 The localization key refers to the watermark message that appears in the input field of the Chat.
 

controls/chat/overview.md

@@ -15,6 +15,8 @@ The Telerik UI for .NET MAUI Chat is a UI component that enables the implementat
 ## Key Features of the .NET MAUI Chat
 
 * [A variety of chat items for great user experience]({%slug chat-items-overview %})—You can choose between simple text messages, various pickers, such as list view, calendar, date and time pickers, and cards.
+* [Attachments]({%slug chat-attachments%})—The Chat control allows attaching files to the messages. The supported file types are images, documents, audio and video files. Also you can take photos and attach them to the messages.
+* [SpeechToTextButton Integration]({%slug chat-buttons-styling%}#style-the-more-button)—The Chat control supports speech-to-text functionality, which allows users to dictate their messages instead of typing them.
 * [Typing indicator]({%slug chat-typing-indicator%})—Use the typing indicator to let the users that other Chat participants are currently typing.
 * [Template Selectors]({%slug chat-itemtemplate-selector%})—Apply different templates to each Chat items. 
 * [Predefined List of Suggestions]({%slug chat-suggested-actions%})—This feature allows you to have a predefind list of suggestions. So the users of the Chat can choose between predefined items before sending a message. 

controls/chat/styling/buttons.md

@@ -13,7 +13,7 @@ This section describes how to style the send, more and speech to text buttons in
 
 ## Style the Send Button
 
-You can customize the icon of the send button by setting the `SendMessageButtonImage` (`ImageSource`) property.
+To customize the icon of the send button, use the `SendMessageButtonImage` (`ImageSource`) property.
 
 The example below shows how to customize the Send button in your Chat control.
 
@@ -32,17 +32,25 @@ The example below shows how to customize the Send button in your Chat control.
 
 ## Style the More Button
 
-Control the visibility of the more button by setting the `IsMoreButtonVisible` (`bool`) property to `true`. The default value is `false`.
+The More button provides additional options for the user, such as attaching files or accessing other functionalities.
+
+You can configure and style the More button using the following properties:
+
+* `IsMoreButtonVisible` (`bool`) property controls the visibility of the more button. The default value is `false`.
 
 * `AutoGenerateMoreButtonActions `(`bool`)—Defines whether to automatically generate default actions for the 'More' button. The default value is `true`.
 
-Style the MoreButton using the `MoreButtonStyle` (`Style` with target type `Telerik.Maui.Controls.Chat.ChatMoreButtonToolbarItemView`) property.
+* Define the actions that will appear when the More button is tapped by adding instances of `ChatMoreButtonAction` to the `MoreButtonActions` (`IList<ChatMoreButtonAction>`) collection.
+
+* Style the More button using the `MoreButtonStyle` (`Style` with target type `Telerik.Maui.Controls.Chat.ChatMoreButtonToolbarItemView`) property.
 
 ## Style the SpeechToTextButton
 
-You can control the SpeechToTextButton visibility by setting the `IsSpeechToTextButtonVisible` (`bool`) property. By default, the button is visible on Android, iOS and MacCatalyst and not visible on Windows. 
+To configure the SpeechToTextButton, use the following properties:
+
+* `IsSpeechToTextButtonVisible` (`bool`) property controls the visibility of the SpeechToTextButton. By default, the button is visible on Android, iOS and MacCatalyst and not visible on Windows.
 
-To style the SpeechToTextButton, use the `SpeechToTextButtonStyle` (`Style` with target type `Telerik.Maui.Controls.RadSpeechToTextButton`) property.
+* `SpeechToTextButtonStyle` (`Style` with target type `Telerik.Maui.Controls.RadSpeechToTextButton`) property is used to style the SpeechToTextButton.
 
 ## See Also
 

controls/chat/styling/entry.md

@@ -37,7 +37,7 @@ The example below shows how to customize the chat entry in your Chat control. Th
 
 ## Customize the Send Button
 
-You can customize the icon of the send button by setting the `SendMessageButtonImage` (`ImageSource`) property.
+The Telerik UI for .NET MAUI Chat allows you to customize the icon of the send button by setting the `SendMessageButtonImage` (`ImageSource`) property.
 
 The example below shows how to customize the Send button in your Chat control.
 

controls/chat/styling/messages.md

@@ -28,7 +28,7 @@ To customize the different parts of the control, you can use the following built
 In addition, the following properties set the background of the Chat:
 
 * `BackgroundColor`(`Color`)—Defines the background color of the Chat control.
-* `InputAreaBackgroundColor`(`Color`)—Defines the bacgkround color of the area that the input elements (entry and button) reside.
+* `InputAreaBackgroundColor`(`Color`)—Defines the background color of the area that the input elements (entry and button) reside.
 
 ## See Also
 

docs-builder.yml

@@ -484,6 +484,14 @@ redirects:
   to: /controls/busyindicator/content
   type: Permanent
 
+- from: ^/controls/chat/styling$
+  to: /controls/chat/styling/entry
+  type: Permanent
+
+- from: ^/controls/chat/item-template-selector$
+  to: /controls/chat/templates/item-template-selector
+  type: Permanent
+
 - from: ^/controls/maskedentry/maskedentry-masked-types$
   to: /controls/maskedentry/mask-types/overview
   type: Permanent