You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: controls/chat/commands.md
+62-6Lines changed: 62 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -8,26 +8,82 @@ slug: chat-commands
8
8
9
9
# .NET MAUI Chat Commands
10
10
11
-
The Telerik UI for .NET MAUI Chat allows you to attach commands that will be executed when certain actions such as `SendMessage`occur.
11
+
The Telerik UI for .NET MAUI Chat allows you to attach commands that will be executed when certain actions occur.
12
12
13
-
## Chat Commands
13
+
## Commands Related to the Chat Input Area:
14
14
15
-
Take advantage of the `SendMessageCommand` that is triggered when the send-message button is clicked or when the user presses the `Enter` key on desktop platforms. The command is raised before the Chat auto-creates a `ChatItem` and adds it to the `Items` collection.
15
+
*`SendMessageCommand` (`ICommand`)—Defines the command that is executed when the send button is clicked or the `Enter` key is pressed.
16
+
*`PickFileCommand` (`ICommand`)—Defines the command that opens the Microsoft.Maui.Storage.FilePicker for attaching files for upload.
17
+
*`PickPhotoCommand` (`ICommand`)—Defines the command that opens the Microsoft.Maui.Media.MediaPicker for attaching photos for upload.
18
+
*`TakePhotoCommand` (`ICommand`)—Defines the command that opens the camera for attaching a photo.
19
+
20
+
>tip You need to grand permissions to access the device camera and device external storage.
21
+
22
+
## Commands Related to Attachments
23
+
24
+
*`AttachFilesCommand` (`ICommand`)—Defines the command that is executed when the files the end-user picked need to be attached/uploaded.
25
+
*`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.`
26
+
*`ShareAttachmentsCommand` (`ICommand`)—Defines the command that triggers the share attachments operation.
27
+
*`RemoveAttachedFileCommand` (`ICommand`)—Defines the command that should remove an attached file from the `Telerik.Maui.Controls.RadChat.AttachedFilesSource` collection in the view model.
28
+
29
+
## Example with SendMessageCommand
16
30
17
31
Here is an example on how to define a command in the ViewModel and bind the `SendMessageCommand` to it:
18
32
19
-
**1.** Add the command's `Execute` method.
33
+
1. Add the command's `Execute` method.
20
34
21
35
<snippetid='chat-commands-executemethod' />
22
36
23
-
**2.** Define the `RadChat` component:
37
+
2. Define the `RadChat` component:
24
38
25
39
<snippetid='chat-commands-xaml' />
26
40
27
-
**3.** Add the ViewModel:
41
+
3. Add the ViewModel:
28
42
29
43
<snippetid='chat-commands-viewmodel' />
30
44
45
+
## Example with AttachFilesCommand
46
+
47
+
1. Define the `RadChat` component:
48
+
49
+
<snippetid='chat-attachments-xaml' />
50
+
51
+
2. Add the `ViewModel` with the `AttachFilesCommand` definition:
52
+
53
+
<snippetid='chat-with-attachments-view-model' />
54
+
55
+
3. Create a sample `MessageItem` model:
56
+
57
+
<snippetid='chat-message-item' />
58
+
59
+
4. Create `AttachmentsItem` class and define the attachments collection property:
60
+
61
+
<snippetid='chat-attachments-item' />
62
+
63
+
5. Define an `AttachmentData` class to hold the attachment information:
64
+
65
+
<snippetid='chat-attachment-data' />
66
+
67
+
6. Define the custom class for the attachments file data:
68
+
69
+
<snippetid='chat-attached-file-data' />
70
+
71
+
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:
72
+
73
+
<snippetid='chat-attached-file-converter' />
74
+
75
+
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:
description: Learn what are the events exposed by the Telerik UI for .NET MAUI Chat
5
+
position: 7
6
+
slug: chat-events
7
+
---
8
+
9
+
# .NET MAUI Chat Events
10
+
11
+
The Telerik UI for .NET MAUI Chat allows you to attach events that will be raised when certain actions occur.
12
+
13
+
Here is a list of the available events:
14
+
15
+
*`SendMessage`—Raised when a message is sent from the chat by the current author (by clicking the send message button or pressing Enter).
16
+
*`AttachFiles`—Raised when the end user picks files to attach.
17
+
* The `sender` argument, which is of type `object`, but can be cast to the `RadChat` type.
18
+
* A `ChatAttachFilesEventArgs` object which provides the list of files (`IList<IFileInfo> FilesToAttach`) to attach to the chat message.
19
+
20
+
*`RemoveAttachedFile`—Raised when the end user removes an attached file, via the `X` button of the `ChatInputAreaAttachedFileItemView`.
21
+
* The `sender` argument, which is of type `object`, but can be cast to the `RadChat` type.
22
+
* * 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`.
Copy file name to clipboardExpand all lines: controls/chat/items/overview.md
+4-3Lines changed: 4 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -12,9 +12,10 @@ The `RadChat` control works with a collection of `ChatItem` objects. The control
12
12
13
13
This section covers the specific details of the different Chat Items provided by `RadChat`:
14
14
15
-
*[Message]({%slug chat-items-messages %})—The basic message unit in RadChat; apart from the text of the message itself, each `TextMessage` instance contains information about the Author of the message as well as any additional data.
16
-
*[Time Break]({%slug chat-items-timebreak %})—Used to encapsulate messages in a conversation by a certain condition such as read/unread, time intervals, or any other condition. It visualizes as a dividing line across the messages board with a text message attached to it.
17
-
*[PickerItem]({%slug chat-picker-overview %})—A special `ChatItem` type which contains a `RadChatPicker` control used for providing a selection to the end user. Depending on the information that is presented and the choices the user can make, the pickers can be one of the following types:
15
+
*[Message]({%slug chat-items-messages %})—The basic message unit in RadChat; apart from the text of the message itself, each `TextMessage` instance contains information about the Author of the message as well as any additional data.
16
+
*[Attachments]({%slug chat-attachments%})—The options to attach images, files, and other media to messages in the .NET MAUI Chat.
17
+
*[Time Break]({%slug chat-items-timebreak %})—Used to encapsulate messages in a conversation by a certain condition such as read/unread, time intervals, or any other condition. It visualizes as a dividing line across the messages board with a text message attached to it.
18
+
*[PickerItem]({%slug chat-picker-overview %})—A special `ChatItem` type which contains a `RadChatPicker` control used for providing a selection to the end user. Depending on the information that is presented and the choices the user can make, the pickers can be one of the following types:
18
19
* `DatePicker`—Displays a Calendar to choose a date.
19
20
* `TimePicker`—Displays a clock view to choose a time.
20
21
* `ItemPicker`—Displays a list of suggestions the end user could choose from.
Copy file name to clipboardExpand all lines: controls/chat/overview.md
+2Lines changed: 2 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -15,6 +15,8 @@ The Telerik UI for .NET MAUI Chat is a UI component that enables the implementat
15
15
## Key Features of the .NET MAUI Chat
16
16
17
17
*[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.
18
+
* 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.
19
+
*[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.
18
20
*[Typing indicator]({%slug chat-typing-indicator%})—Use the typing indicator to let the users that other Chat participants are currently typing.
19
21
*[Template Selectors]({%slug chat-itemtemplate-selector%})—Apply different templates to each Chat items.
20
22
*[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.
The More button provides additional options for the user, such as attaching files or accessing other functionalities.
36
+
37
+
You can configure and style the More button using the following properties:
38
+
39
+
*`IsMoreButtonVisible` (`bool`) property controls the visibility of the more button. The default value is `false`.
40
+
41
+
*`AutoGenerateMoreButtonActions `(`bool`)—Defines whether to automatically generate default actions for the 'More' button. The default value is `true`.
42
+
43
+
* Define the actions that will appear when the More button is tapped by adding instances of `ChatMoreButtonAction` to the `MoreButtonActions` (`IList<ChatMoreButtonAction>`) collection.
44
+
45
+
* Style the More button using the `MoreButtonStyle` (`Style` with target type `Telerik.Maui.Controls.Chat.ChatMoreButtonToolbarItemView`) property.
46
+
47
+
## Style the SpeechToTextButton
48
+
49
+
To configure the SpeechToTextButton, use the following properties:
50
+
51
+
*`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.
52
+
53
+
*`SpeechToTextButtonStyle` (`Style` with target type `Telerik.Maui.Controls.RadSpeechToTextButton`) property is used to style the SpeechToTextButton.
The Telerik UI for .NET MAUI Chat control allows you to customize the appearance of its input area, by setting the `InputAreaStyle` (`Style` with target type `Telerik.Maui.Controls.Chat.ChatInputArea`) property.
13
+
14
+
The available properties for customizing the input area are:
15
+
16
+
*`BackgroundColor` (`Color`)—Defines the background color of the input area.
17
+
*`BorderColor` (`Color`)—Defines the border color of the input area.
18
+
*`BorderThickness` (`Thickness`)—Defines the border thickness of the input area.
19
+
*`CornerRadius` (`Thickness`)—Defines the corner radius of the input area.
20
+
*`ContentPadding` (`Thickness`)—Defines the padding inside the input area.
21
+
*`AttachedFilesViewStyle` (`Style` with target type `Telerik.Maui.Controls.Chat.ChatInputAreaAttachedFilesView`)—Defines the style of view of the currently attached files hat have not yet been sent.
22
+
23
+
## Style the Chat Entry
24
+
25
+
You can style the `ChatEntry` using an implicit style.
26
+
27
+
The example below shows how to customize the chat entry in your Chat control. The `Telerik.Maui.Controls.Chat.ChatEntry` represents the entry used for writing messages in the Telerik UI for .NET MAUI Chat control.
The Telerik UI for .NET MAUI Chat allows you to customize the icon of the send button by setting the `SendMessageButtonImage` (`ImageSource`) property.
41
+
42
+
The example below shows how to customize the Send button in your Chat control.
Any change in the appearance of the `RadChat` components depends on the referenced styles. The default templates contain a `RadBorder` control (used to achieve the rounded edges), an Image control (used for the avatar of the single and first message), and a Label for the text message itself.
13
+
14
+
To customize the different parts of the control, you can use the following built-in styles:
15
+
16
+
-`MessageImageStyle`(target type `Image`)—Defines the style referred to the send button image.
17
+
18
+
-`OutgoingMessageImageStyle` (target type `Image`)—Defines the style of the outgoing message image.
19
+
20
+
-`IncomingBorderStyle` (target type `RadBorder`)—Defines the style of the incoming message border.
21
+
22
+
-`OutgoingBorderStyle` (target type `RadBorder`)—Defines the style of the outgoing message border.
23
+
24
+
-`DefaultLabelStyle` (target type `Label`)—Defines the default label style.
25
+
26
+
-`OutgoingLabelStyle` (target type `Label`)—Defines the style of the label of the outgoing message.
27
+
28
+
In addition, the following properties set the background of the Chat:
29
+
30
+
*`BackgroundColor`(`Color`)—Defines the background color of the Chat control.
31
+
*`InputAreaBackgroundColor`(`Color`)—Defines the background color of the area that the input elements (entry and button) reside.
0 commit comments