diff --git a/wpf/AI-AssistView/Input-Toolbar.md b/wpf/AI-AssistView/Input-Toolbar.md index 21250281f..075899adb 100644 --- a/wpf/AI-AssistView/Input-Toolbar.md +++ b/wpf/AI-AssistView/Input-Toolbar.md @@ -1,7 +1,7 @@ --- layout: post title: Input Toolbar in WPF AI AssistView control | Syncfusion -description: Learn about the input toolbar feature in the AI AssistView control, which enables users to access quick actions to input textbox responses through toolbar items. +description: The input toolbar in AI AssistView offers quick actions via toolbar items to streamline textbox response entry. platform: wpf control: SfAIAssistView documentation: ug @@ -38,7 +38,7 @@ Use the ItemTemplate property to define the appearance and behavior of each tool diff --git a/wpf/AI-AssistView/Open-AI.md b/wpf/AI-AssistView/Open-AI.md index 4702e700b..9eaa78f67 100644 --- a/wpf/AI-AssistView/Open-AI.md +++ b/wpf/AI-AssistView/Open-AI.md @@ -1,6 +1,6 @@ --- layout: post -title: TypingIndicator in WPF AI AssistView control | Syncfusion +title: Open-AI in WPF AI AssistView control | Syncfusion description: Learn about how to connect the AI AssistView control with OpenAI and chat gpt conversation experience. platform: wpf control: SfAIAssistView @@ -208,4 +208,169 @@ Set the ViewModel as the DataContext for the AI AssistView or the parent window. {% endhighlight %} {% endtabs %} -![WPF AI AssistView control open ai](aiassistview_images/wpf_aiassistview_openai.gif) \ No newline at end of file +![WPF AI AssistView control open ai](aiassistview_images/wpf_aiassistview_openai.gif) + +## Customize AI Response Rendering with ViewTemplateSelector in SfAIAssistView +Use the [ViewTemplateSelector](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Chat.SfAIAssistView.html#Syncfusion_UI_Xaml_Chat_SfAIAssistView_ViewTemplateSelector) property to assign a DataTemplateSelector that controls how messages (including AI responses) are rendered in SfAIAssistView. The selector can return different DataTemplates based on the message type or role (user/assistant/system), enabling rich presentations such as: +- Markdown (via a Markdown viewer like MdXaml) +- FlowDocument-based layouts +- Images and custom visuals +- HTML (via a WebBrowser control or third-party HTML renderer) + +This approach lets you tailor the appearance of assistant messages without modifying your data model. + +{% tabs %} +{% highlight xaml %} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +{% endhighlight %} +{% highlight C# %} + +public class ViewTemplateSelector : DataTemplateSelector +{ + public DataTemplate AITemplate { get; set; } + + public override DataTemplate SelectTemplate(object item, DependencyObject container) + { + if (item is AIMessage) + { + return AITemplate; + } + return null; + } +} + +public class AIMessage : NotificationObject, ITextMessage +{ + + private string solution; + + /// + /// Gets or sets the text to be display as the message. + /// + public string Solution + { + get + { + return this.solution; + } + set + { + this.solution = value; + RaisePropertyChanged(nameof(Solution)); + } + } + + private Author author; + + /// + /// Gets or sets the author to be display in the message. + /// + public Author Author + { + get { return author; } + set + { + author = value; + RaisePropertyChanged(nameof(Author)); + } + } + + private DateTime dateTime; + + /// + /// Gets or sets the date and time details when the message was created. + /// + public DateTime DateTime + { + get { return dateTime; } + set + { + dateTime = value; + RaisePropertyChanged(nameof(DateTime)); + } + } + + private string text; + + /// + /// Gets or sets the text to be display as the message. + /// + public string Text + { + get { return text; } + set { text = value; RaisePropertyChanged(nameof(Text)); } + } +} + +{% endhighlight %} +{% endtabs %} + +![WPF AI AssistView control ViewTemplateSelector](aiassistview_images/wpf_aiassistview_openai1.png) + diff --git a/wpf/AI-AssistView/aiassistview_images/wpf_aiassistview_openai1.png b/wpf/AI-AssistView/aiassistview_images/wpf_aiassistview_openai1.png new file mode 100644 index 000000000..952be87c2 Binary files /dev/null and b/wpf/AI-AssistView/aiassistview_images/wpf_aiassistview_openai1.png differ diff --git a/wpf/AI-AssistView/open-ai.md b/wpf/AI-AssistView/open-ai.md index 4702e700b..9eaa78f67 100644 --- a/wpf/AI-AssistView/open-ai.md +++ b/wpf/AI-AssistView/open-ai.md @@ -1,6 +1,6 @@ --- layout: post -title: TypingIndicator in WPF AI AssistView control | Syncfusion +title: Open-AI in WPF AI AssistView control | Syncfusion description: Learn about how to connect the AI AssistView control with OpenAI and chat gpt conversation experience. platform: wpf control: SfAIAssistView @@ -208,4 +208,169 @@ Set the ViewModel as the DataContext for the AI AssistView or the parent window. {% endhighlight %} {% endtabs %} -![WPF AI AssistView control open ai](aiassistview_images/wpf_aiassistview_openai.gif) \ No newline at end of file +![WPF AI AssistView control open ai](aiassistview_images/wpf_aiassistview_openai.gif) + +## Customize AI Response Rendering with ViewTemplateSelector in SfAIAssistView +Use the [ViewTemplateSelector](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Chat.SfAIAssistView.html#Syncfusion_UI_Xaml_Chat_SfAIAssistView_ViewTemplateSelector) property to assign a DataTemplateSelector that controls how messages (including AI responses) are rendered in SfAIAssistView. The selector can return different DataTemplates based on the message type or role (user/assistant/system), enabling rich presentations such as: +- Markdown (via a Markdown viewer like MdXaml) +- FlowDocument-based layouts +- Images and custom visuals +- HTML (via a WebBrowser control or third-party HTML renderer) + +This approach lets you tailor the appearance of assistant messages without modifying your data model. + +{% tabs %} +{% highlight xaml %} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +{% endhighlight %} +{% highlight C# %} + +public class ViewTemplateSelector : DataTemplateSelector +{ + public DataTemplate AITemplate { get; set; } + + public override DataTemplate SelectTemplate(object item, DependencyObject container) + { + if (item is AIMessage) + { + return AITemplate; + } + return null; + } +} + +public class AIMessage : NotificationObject, ITextMessage +{ + + private string solution; + + /// + /// Gets or sets the text to be display as the message. + /// + public string Solution + { + get + { + return this.solution; + } + set + { + this.solution = value; + RaisePropertyChanged(nameof(Solution)); + } + } + + private Author author; + + /// + /// Gets or sets the author to be display in the message. + /// + public Author Author + { + get { return author; } + set + { + author = value; + RaisePropertyChanged(nameof(Author)); + } + } + + private DateTime dateTime; + + /// + /// Gets or sets the date and time details when the message was created. + /// + public DateTime DateTime + { + get { return dateTime; } + set + { + dateTime = value; + RaisePropertyChanged(nameof(DateTime)); + } + } + + private string text; + + /// + /// Gets or sets the text to be display as the message. + /// + public string Text + { + get { return text; } + set { text = value; RaisePropertyChanged(nameof(Text)); } + } +} + +{% endhighlight %} +{% endtabs %} + +![WPF AI AssistView control ViewTemplateSelector](aiassistview_images/wpf_aiassistview_openai1.png) +