diff --git a/controls/radchat/attachments.md b/controls/radchat/attachments.md new file mode 100644 index 0000000000..1db0fa6a32 --- /dev/null +++ b/controls/radchat/attachments.md @@ -0,0 +1,89 @@ +--- +title: Message Attachments +page_title: Message File Attachments +description: See how to add a message attachments in RadChat. +slug: chat-attachments +tags: attach,message,seen +published: True +position: 4 +--- + +# Message Attachments + +The attachments feature allows you to add files in the chat messages. + +To enable the attachments, set the `IsMoreButtonVisible` property of `RadChat` to `true`. + +```XAML + +``` + +![A picture showing the chat attachemnts](images/chat-attachments-0.png) + +## Handling Attachment Actions + +The action that happens when you download or share attachments can be handled via the `AttachmentActionRequested` event of `RadChat`. The event is invoked when the user click onto the __Download__ or __Share__ button in the attachment. + +![The share and download buttons of a RadChat message](images/chat-attachments-1.png) + +```C# +private void RadChat_AttachmentActionRequested(object sender, AttachmentActionEventArgs e) +{ + IReadOnlyList attachments = e.AttachedFiles; + if (e.Action == AttachmentAction.Download) + { + foreach (var attachment in attachments) + { + var fileName = attachment.FileName; + Stream fileStream = attachment.GetFileStream.Invoke(); + + // implement file download + } + } + else if (e.Action == AttachmentAction.Share) + { + foreach (var attachment in attachments) + { + var fileName = attachment.FileName; + Stream fileStream = attachment.GetFileStream.Invoke(); + + // implement file share + } + } +} +``` + +## Maximum Visible Attachments + +The number of attachments that will be displayed by default without showing an expand button can be adjusted via the `MaxVisibleAttachments` property of `RadChat`. + +```XAML + +``` + +![A picture showing the maximum visible attachments behavior](images/chat-attachments-2.png) + +## Managing Message Attachments Programmatically + +The attachments of a message can be accessed via its `AttachedFiles` collection property. + +__Setting message attachments programmatically__ + +```C# +var textMessage = new TextMessage(this.chat.CurrentAuthor, "Sure, attaching the photos."); +var attachedFiles = new List(); +attachedFiles.Add(new PromptInputAttachedFile(new FileInfo("file-path-here"))); +textMessage.AttachedFiles = attachedFiles.AsReadOnly(); +``` + +__Getting message attachments__ + +```C# +IReadOnlyList attachments = textMessage.AttachedFiles; +``` + +The content of a attached file can be accessed via the `GetFileStream` function of the corresponding `PromptInputAttachedFile` object. + +```C# +Stream fileStream = textMessage.AttachedFiles.ElementAt(0).GetFileStream.Invoke(); +``` \ No newline at end of file diff --git a/controls/radchat/breaking-changes.md b/controls/radchat/breaking-changes.md new file mode 100644 index 0000000000..5ced0af262 --- /dev/null +++ b/controls/radchat/breaking-changes.md @@ -0,0 +1,30 @@ +--- +title: Breaking Changes +page_title: Breaking Changes +description: This article lists the breaking changes introduced in the RadChat for WPF component through the releases. +slug: chat-breaking-changes +tags: breaking, changes, backward,compatibility +published: True +position: 7 +--- + +# Breaking Changes + +This article lists and describes the breaking changes introduced in the RadChat component. For a full list of changes, see the [Release History](https://www.telerik.com/support/whats-new/wpf/release-history) pages of the Telerik UI for WPF product. + +## 2026 Q2 (2026.2.519) + +With this release a visual revamp of the chat component and part of its features was introduced. + +* The input box where the messages appear is now using a more complex visual element which contains extra features, like speech-to-text-button and a drop-down button with multiple options (attachments and custom options). This means that any code that was customizing the previously used textbox element should be adapted to the new input box visual (`RadPromptInput`) + +* The `ToolBarCommands` and `ToolBarCommandTemplateSelector` property of `RadChat` are no longer available. Instead, use the `MoreButtonActions` collection of the `RadPromptInput`. + + ```C# + private void RadChat_Loaded(object sender, RoutedEventArgs e) + { + var chat = (RadChat)sender; + var promptInput = chat.FindChildByType(); + promptInput.MoreButtonActions.Add(new PromptInputButtonAction() { Text = "Custom option", Icon = myIcon, Command = myCommand }); + } + ``` \ No newline at end of file diff --git a/controls/radchat/customizing-appearance/theming.md b/controls/radchat/customizing-appearance/theming.md deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/controls/radchat/features/images/RadChat_Items_SuggestedActions_01.png b/controls/radchat/features/images/RadChat_Items_SuggestedActions_01.png index de97c4e0c5..1f83ea481a 100644 Binary files a/controls/radchat/features/images/RadChat_Items_SuggestedActions_01.png and b/controls/radchat/features/images/RadChat_Items_SuggestedActions_01.png differ diff --git a/controls/radchat/features/images/RadChat_Items_SuggestedActions_02.png b/controls/radchat/features/images/RadChat_Items_SuggestedActions_02.png index 6f03c4fda2..dd3e5ef829 100644 Binary files a/controls/radchat/features/images/RadChat_Items_SuggestedActions_02.png and b/controls/radchat/features/images/RadChat_Items_SuggestedActions_02.png differ diff --git a/controls/radchat/features/images/RadChat_Items_SuggestedActions_03.png b/controls/radchat/features/images/RadChat_Items_SuggestedActions_03.png index 6b8165b4b2..7a7e566be5 100644 Binary files a/controls/radchat/features/images/RadChat_Items_SuggestedActions_03.png and b/controls/radchat/features/images/RadChat_Items_SuggestedActions_03.png differ diff --git a/controls/radchat/features/images/RadChat_Items_ToolBarCommands_01.png b/controls/radchat/features/images/RadChat_Items_ToolBarCommands_01.png deleted file mode 100644 index 20d61d5aa8..0000000000 Binary files a/controls/radchat/features/images/RadChat_Items_ToolBarCommands_01.png and /dev/null differ diff --git a/controls/radchat/features/images/RadChat_Items_ToolBarCommands_02.png b/controls/radchat/features/images/RadChat_Items_ToolBarCommands_02.png deleted file mode 100644 index 25f2975432..0000000000 Binary files a/controls/radchat/features/images/RadChat_Items_ToolBarCommands_02.png and /dev/null differ diff --git a/controls/radchat/features/images/RadChat_Items_ToolBarCommands_03.png b/controls/radchat/features/images/RadChat_Items_ToolBarCommands_03.png deleted file mode 100644 index 67753a2a14..0000000000 Binary files a/controls/radchat/features/images/RadChat_Items_ToolBarCommands_03.png and /dev/null differ diff --git a/controls/radchat/features/images/RadChat_Items_TypeIndicator_01.png b/controls/radchat/features/images/RadChat_Items_TypeIndicator_01.png index 2dcd56be66..56bf76c37c 100644 Binary files a/controls/radchat/features/images/RadChat_Items_TypeIndicator_01.png and b/controls/radchat/features/images/RadChat_Items_TypeIndicator_01.png differ diff --git a/controls/radchat/features/images/RadChat_Localization_01.png b/controls/radchat/features/images/RadChat_Localization_01.png deleted file mode 100644 index b1a2054c8f..0000000000 Binary files a/controls/radchat/features/images/RadChat_Localization_01.png and /dev/null differ diff --git a/controls/radchat/features/images/RadChat_TimeBreak_01.png b/controls/radchat/features/images/RadChat_TimeBreak_01.png index cc400af529..4e96d02b22 100644 Binary files a/controls/radchat/features/images/RadChat_TimeBreak_01.png and b/controls/radchat/features/images/RadChat_TimeBreak_01.png differ diff --git a/controls/radchat/features/localization.md b/controls/radchat/features/localization.md index d1f60450dc..63db378ed3 100644 --- a/controls/radchat/features/localization.md +++ b/controls/radchat/features/localization.md @@ -17,25 +17,17 @@ This topic will go over the available resource keys for localizing the __RadChat Below is the list of supported languages. * **English** - * **German** - * **Spanish** - * **French** - * **Italian** - * **Dutch** - * **Turkish** ## Resource Keys __RadChat__ provides strings for localizing various of its elements. In order to be able to distinguish these resources, an unique identifier, called resource key, is assigned to each string that can be localized. -![RadChat Localization](images/RadChat_Localization_01.png) - Key | Value --- | --- Chat_Arrival | Arrival @@ -50,9 +42,9 @@ Chat_Submit | Submit Chat_Total | Total Chat_WatermarkContent | Type a message... Chat_WindSpeed | Wind speed: +Chat_AICard_Copy | Copy +Chat_AICard_Retry | Retry +Chat_Attachment_Download | Download +Chat_Attachment_DownloadAll | Download All +Chat_Attachment_Share | Share - - -## See Also - -* [Localization]({%slug common-localization%}) diff --git a/controls/radchat/features/toolbar-commands.md b/controls/radchat/features/toolbar-commands.md deleted file mode 100644 index 0d675df262..0000000000 --- a/controls/radchat/features/toolbar-commands.md +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: ToolBar Commands -page_title: ToolBar Commands -description: Check our "ToolBar Commands" documentation article for the RadChat {{ site.framework_name }} control. -slug: chat-items-toolbar-commands -tags: suggested, actions -published: True -position: 3 ---- - -# ToolBar Commands - -* [Adding a Command](#adding-a-command) -* [ToolBarCommandTemplateSelector](#toolbarcommandtemplateselector) - -## Adding a Command - -By default, the __ToolBar__ of __RadChat__ will not be visible. When a __ToolBarCommand__ is added to the __ToolBarCommands__ collection, the __ToggleButton__ for opening the __ToolBar__ will appear next to the __Send Button__. The __ToolBarCommand__ element exposes the following two properties. - -* __Text__: The text Content that will be set to the generated __Button__. -* __Command__: The __ICommand__ that is to be executed when clicking the __Button__. - -__Example 1: Defining a sample Command Action__ -```C# - private void OnClickCommandExecute(object obj) - { - MessageBox.Show("Command executed!"); - } -``` - -__Example 2: Adding a ToolBarCommand__ -```C# - this.chat.ToolBarCommands.Add(new ToolBarCommand() { Text = "Click", Command = new DelegateCommand(OnClickCommandExecute) }); -``` - -Adding such __ToolBarCommand__ will have the following visual appearance. - -#### __Figure 1: Opening the ToolBar__ -![Opening the ToolBar](images/RadChat_Items_ToolBarCommands_01.png) - -Clicking the generated __Button__ will execute the defined __ICommand__. - -#### __Figure 2: Executing the defined Command__ -![Executing the Command](images/RadChat_Items_ToolBarCommands_02.png) - -## ToolBarCommandTemplateSelector - -The __Conversational UI__ supports defining custom __DataTemplate__ for the elements generated in its __ToolBar__. This is done through the __ToolBarCommandTemplateSelector__. Its conditional logic can be implemented based on the given __ToolBarCommand__. - -__Example 3: Defining a ToolBarCommandTemplateSelector__ -```C# - public class ToolBarCommandTemplateSelector : DataTemplateSelector - { - public override DataTemplate SelectTemplate(object item, DependencyObject container) - { - var toolBarCommand = item as ToolBarCommand; - if (toolBarCommand.Text == "Click") - { - return ClickTemplate; - } - return base.SelectTemplate(item, container); - } - - public DataTemplate ClickTemplate { get; set; } - - } -``` - -After having the __ToolBarCommandTemplateSelector__ implemented, it can be defined in XAML as follows. - -__Example 4: Adding the ToolBarCommandTemplateSelector__ -```XAML - - - - - - - - - - - - -``` - -Finally, the __ToolBarCommandTemplateSelector__ can be applied to __RadChat__. - -__Example 5: Applying the ToolBarCommandTemplateSelector__ -```XAML - -``` - -#### __Figure 3: Conversational UI with custom ToolBarCommandTemplateSelector__ -![Applying the ToolBarCommandTemplateSelector](images/RadChat_Items_ToolBarCommands_03.png) - -## See Also - -* [Overview]({%slug chat-overview%}) - -* [Getting Started]({%slug chat-getting-started%}) - -* [Messages Overview]({%slug chat-items-messages-overview%}) \ No newline at end of file diff --git a/controls/radchat/features/typing-indicator.md b/controls/radchat/features/typing-indicator.md index 1bcb428b6c..2a573b3acc 100644 --- a/controls/radchat/features/typing-indicator.md +++ b/controls/radchat/features/typing-indicator.md @@ -18,14 +18,14 @@ The __TypingIndicator__ functionality of the Conversational UI can be used to in __Example 1: Setting the TypingIndicator__ ```C# - var textMessage = new TextMessage(this.currentAuthor, "Hello", "sent"); - textMessage.InlineViewModel.StatusVisibility = Visibility.Visible; +var textMessage = new TextMessage(this.currentAuthor, "Hello", "sent"); +textMessage.InlineViewModel.StatusVisibility = Visibility.Visible; - this.chat.AddMessage(textMessage); +this.chat.AddMessage(textMessage); - this.chat.TypingIndicatorText = this.otherAuthor.Name + " is typing..."; - this.chat.TypingIndicatorVisibility = Visibility.Visible; - this.chat.TypingIndicatorIcon = new BitmapImage(new Uri("/Images/PeterJohnson.jpeg", UriKind.RelativeOrAbsolute)); +this.chat.TypingIndicatorText = this.otherAuthor.Name + " is typing..."; +this.chat.TypingIndicatorVisibility = Visibility.Visible; +this.chat.TypingIndicatorIcon = new BitmapImage(new Uri("/Images/PeterJohnson.jpeg", UriKind.RelativeOrAbsolute)); ``` Setting the __TypingIndicator__ in such manner will have the following result. diff --git a/controls/radchat/getting-started/getting-started.md b/controls/radchat/getting-started/getting-started.md index f5dbc7ae0d..4fd810b853 100644 --- a/controls/radchat/getting-started/getting-started.md +++ b/controls/radchat/getting-started/getting-started.md @@ -29,6 +29,9 @@ If you are not using NuGet packages, you can add a reference to the following as * __Telerik.Windows.Controls.Input__ * __Telerik.Windows.Controls.Navigation__ * __Telerik.Windows.Controls.ConversationalUI__ +* __Telerik.Windows.Controls.GridView__ +* __Telerik.Windows.Controls.FileDialogs__ +* __Telerik.Windows.Controls.Data__ ## Adding RadChat to the Project @@ -39,12 +42,12 @@ You can add __Conversational UI__ manually by writing the XAML code in __Example __Example 1: Adding RadChat in XAML__ ```XAML - + ``` Running the application at this state will result in an empty chat. -#### __Figure 1: The Empty Chat Generated by the Code in Example 1__ +__Empty chat example__ ![Empty RadChat](images/RadChat_GettingStarted_01.png) @@ -52,122 +55,53 @@ Running the application at this state will result in an empty chat. Two authors will be defined for this example. Note, that the __CurrentAuthor__ property of __RadChat__ must be set. -__Example 3: Adding Authors to RadChat__ +__Adding Authors to RadChat__ ```C# - public partial class MainWindow : Window - { - private Author currentAuthor; - private Author otherAuthor; - - public MainWindow() - { - InitializeComponent(); - - currentAuthor = new Author("Peter"); - otherAuthor = new Author("Steven"); - this.chat.CurrentAuthor = currentAuthor; - } - } -``` -```VB.NET - Partial Public Class MainWindow - Inherits Window - - Private currentAuthor As Author - Private otherAuthor As Author - - Public Sub New() - InitializeComponent() - - currentAuthor = New Author("Peter") - otherAuthor = New Author("Steven") - Me.chat.CurrentAuthor = currentAuthor - End Sub - End Class +public partial class MainWindow : Window +{ + private Author currentAuthor; + private Author otherAuthor; + + public MainWindow() + { + InitializeComponent(); + + currentAuthor = new Author("Peter"); + otherAuthor = new Author("Steven"); + this.chat.CurrentAuthor = currentAuthor; + } +} ``` ## Handling the Sent Message The user's input can be handled by hooking up to the __SendMessage__ event of __RadChat__. The event arguments are of type __RoutedEventArgs__ which are extended by the __Message__ property. -__Example 4: Subscribing to the SendMessage event__ +__Subscribing to the SendMessage event__ ```C# - + ``` - -__Example 5: SendMessage event handler__ +__SendMessage event handler__ ```C# - - private void RadChat_SendMessage(object sender, SendMessageEventArgs e) - { - // We will handle the event in order to add a new message manually - e.Handled = true; - - var updatedMessageText = "[Updated from event handler] " + (e.Message as TextMessage).Text; - this.chat.AddMessage(this.chat.CurrentAuthor, updatedMessageText); - } -``` -```VB.NET - - Private Sub RadChat_SendMessage(ByVal sender As Object, ByVal e As SendMessageEventArgs) - ' We will handle the event in order to add a new message manually - e.Handled = True - - Dim updatedMessageText = "[Updated from event handler] " & (TryCast(e.Message, TextMessage)).Text - Me.chat.AddMessage(Me.chat.CurrentAuthor, updatedMessageText) - End Sub +private void RadChat_SendMessage(object sender, SendMessageEventArgs e) +{ + // We will handle the event in order to add a new message manually + e.Handled = true; + + var updatedMessageText = "[Updated from event handler] " + (e.Message as TextMessage).Text; + this.chat.AddMessage(this.chat.CurrentAuthor, updatedMessageText); +} ``` This setup will have the following result. -#### __Figure 2: RadChat with Messages__ +__RadChat with Messages__ ![RadChat with Messages](images/RadChatSendMessage.gif) -## Setting a Theme - -The controls from our suite support different themes. You can see how to apply a theme different than the default one in the [Setting a Theme]({%slug styling-apperance-implicit-styles-overview%}) help article. - ->important Changing the theme using implicit styles will affect all controls that have styles defined in the merged resource dictionaries. This is applicable only for the controls in the scope in which the resources are merged. - -To change the theme, you can follow the steps below: - -* Choose between the themes and add reference to the corresponding theme assembly (ex: **Telerik.Windows.Themes.Material.dll**). You can see the different themes applied in the **Theming** examples from our [WPF Controls Examples](https://demos.telerik.com/wpf/) application. - -* Merge the ResourceDictionaries with the namespace required for the controls that you are using from the theme assembly. For the __RadChat__, you will need to merge the following resources: - - * __Telerik.Windows.Controls__ - * __Telerik.Windows.Controls.Input__ - * __Telerik.Windows.Controls.Navigation__ - * __Telerik.Windows.Controls.ConversationalUI__ - -__Example 6__ demonstrates how to merge the ResourceDictionaries so that they are applied globally for the entire application. - -__Example 6: Merge the ResourceDictionaries__ -```XAML - - - - - - - - - - - -``` - ->Alternatively, you can use the theme of the control via the {% if site.site_name == 'WPF' %}[StyleManager](https://docs.telerik.com/devtools/wpf/styling-and-appearance/stylemanager/common-styling-apperance-setting-theme-wpf){% else %}[StyleManager](https://docs.telerik.com/devtools/silverlight/styling-and-appearance/stylemanager/common-styling-apperance-setting-theme){% endif %}. - -__Figure 3__ shows a __RadChat__ with the **Material** theme applied. - -#### __Figure 3: RadChat with the Material theme__ -![RadChat with Material theme](images/radchat-setting-theme.png) - {% if site.site_name == 'WPF' %} ## Telerik UI for WPF Learning Resources diff --git a/controls/radchat/getting-started/images/RadChat_GettingStarted_01.png b/controls/radchat/getting-started/images/RadChat_GettingStarted_01.png index b15e867330..5b7f7b84f3 100644 Binary files a/controls/radchat/getting-started/images/RadChat_GettingStarted_01.png and b/controls/radchat/getting-started/images/RadChat_GettingStarted_01.png differ diff --git a/controls/radchat/getting-started/images/radchat-setting-theme.png b/controls/radchat/getting-started/images/radchat-setting-theme.png deleted file mode 100644 index b033d28921..0000000000 Binary files a/controls/radchat/getting-started/images/radchat-setting-theme.png and /dev/null differ diff --git a/controls/radchat/images/RadChat_Overview.png b/controls/radchat/images/RadChat_Overview.png index f950f28e31..567c4897e9 100644 Binary files a/controls/radchat/images/RadChat_Overview.png and b/controls/radchat/images/RadChat_Overview.png differ diff --git a/controls/radchat/images/chat-attachments-0.png b/controls/radchat/images/chat-attachments-0.png new file mode 100644 index 0000000000..05d50c9f29 Binary files /dev/null and b/controls/radchat/images/chat-attachments-0.png differ diff --git a/controls/radchat/images/chat-attachments-1.png b/controls/radchat/images/chat-attachments-1.png new file mode 100644 index 0000000000..a39cffa52f Binary files /dev/null and b/controls/radchat/images/chat-attachments-1.png differ diff --git a/controls/radchat/images/chat-attachments-2.png b/controls/radchat/images/chat-attachments-2.png new file mode 100644 index 0000000000..8b856805e7 Binary files /dev/null and b/controls/radchat/images/chat-attachments-2.png differ diff --git a/controls/radchat/images/chat-message-status-0.png b/controls/radchat/images/chat-message-status-0.png index d9fa413a5f..7d27466b33 100644 Binary files a/controls/radchat/images/chat-message-status-0.png and b/controls/radchat/images/chat-message-status-0.png differ diff --git a/controls/radchat/integration/facebook-integration.md b/controls/radchat/integration/facebook-integration.md deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/controls/radchat/overview.md b/controls/radchat/overview.md index 910d2dc92a..a0e972d03c 100644 --- a/controls/radchat/overview.md +++ b/controls/radchat/overview.md @@ -1,7 +1,7 @@ --- title: Overview page_title: Overview -description: Check our "Overview" documentation article for the RadChat {{ site.framework_name }} control. +description: Check our "Overview" documentation article for the RadChat WPF control. slug: chat-overview tags: overview published: True @@ -9,9 +9,9 @@ position: 0 CTAControlName: RadChat --- -# {{ site.framework_name }} Chat Overview +# WPF Chat Overview -The __RadChat__ component is exposed as of __R2 2018__. It enables easy implementation of conversational UI in WPF applications, whether by utilizing certain chatbot framework, by following a predefined logical tree, or just for integrating P2P chat capabilites. +The __RadChat__ component enables easy implementation of conversational UI in WPF applications, whether by utilizing certain chatbot framework, by following a predefined logical tree, or just for integrating P2P chat capabilites. {% if site.has_cta_panels == true %} {% include cta-panel-overview.html %} @@ -21,7 +21,7 @@ The __RadChat__ component is exposed as of __R2 2018__. It enables easy implemen ![RadChat](images/RadChat_Overview.png) -__Conversational UI's__ features list: +## Key Features * __Messages__: A predefined set of built-in messages depending on the type of data that needs to be sent. @@ -31,6 +31,8 @@ __Conversational UI's__ features list: * __Suggested Actions__: Make the user's input easier by adding suggestions. +* __Attachments__: Make the user's input easier by adding suggestions. + * __Type Indicator__: Indicate to the current user that another __Author__ is typing. * __ToolBar Commands__: Enabling user interaction with the __ToolBar__ through triggering __ToolBarCommands__. diff --git a/controls/radchat/populating-with-data/images/chat-populating-with-data-binding-to-collection-0.png b/controls/radchat/populating-with-data/images/chat-populating-with-data-binding-to-collection-0.png index 01ff384741..81b162c742 100644 Binary files a/controls/radchat/populating-with-data/images/chat-populating-with-data-binding-to-collection-0.png and b/controls/radchat/populating-with-data/images/chat-populating-with-data-binding-to-collection-0.png differ