|
1 | 1 | --- |
2 | 2 | layout: post |
3 | | -title: TypingIndicator in WPF AI AssistView control | Syncfusion |
| 3 | +title: OpenAI in WPF AI AssistView control | Syncfusion |
4 | 4 | description: Learn about how to connect the AI AssistView control with OpenAI and chat gpt conversation experience. |
5 | 5 | platform: wpf |
6 | 6 | control: SfAIAssistView |
@@ -208,4 +208,168 @@ Set the ViewModel as the DataContext for the AI AssistView or the parent window. |
208 | 208 | {% endhighlight %} |
209 | 209 | {% endtabs %} |
210 | 210 |
|
211 | | - |
| 211 | + |
| 212 | + |
| 213 | +## Customize AI Response Rendering with ViewTemplateSelector in SfAIAssistView |
| 214 | +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: |
| 215 | +- Markdown (via a Markdown viewer like MdXaml) |
| 216 | +- FlowDocument-based layouts |
| 217 | +- Images and custom visuals |
| 218 | +- HTML (via a WebBrowser control or third-party HTML renderer) |
| 219 | + |
| 220 | +This approach lets you tailor the appearance of assistant messages without modifying your data model. |
| 221 | + |
| 222 | +{% tabs %} |
| 223 | +{% highlight xaml %} |
| 224 | +<Page |
| 225 | + x:Class="GettingStarted.MainPage" |
| 226 | + xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" |
| 227 | + xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" |
| 228 | + xmlns:local="using:GettingStarted" |
| 229 | + xmlns:mdxam="clr-namespace:MdXaml;assembly=MdXaml" |
| 230 | + xmlns:d="http://schemas.microsoft.com/expression/blend/2008" |
| 231 | + xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" |
| 232 | + xmlns:syncfusion="using:Syncfusion.UI.Xaml.Chat" |
| 233 | + mc:Ignorable="d" |
| 234 | + Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> |
| 235 | + <Window.Resources> |
| 236 | + <local:ViewTemplateSelector x:Key="viewTS"> |
| 237 | + <local:ViewTemplateSelector.AITemplate> |
| 238 | + <DataTemplate> |
| 239 | + <Border Background="Transparent"> |
| 240 | + <StackPanel> |
| 241 | + <Image Height="200" Width="500" |
| 242 | + Source="statue-liberty.jpg" |
| 243 | + HorizontalAlignment="Left"/> |
| 244 | + <mdxam:MarkdownScrollViewer |
| 245 | + Markdown="{Binding Text}" |
| 246 | + Foreground="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" |
| 247 | + VerticalScrollBarVisibility="Auto" |
| 248 | + IsHitTestVisible="False" |
| 249 | + Padding="8"> |
| 250 | + <mdxam:MarkdownScrollViewer.MarkdownStyle> |
| 251 | + <Style TargetType="FlowDocument" BasedOn="{x:Static mdxam:MarkdownStyle.Standard}"> |
| 252 | + <Setter Property="FontSize" Value="12"/> |
| 253 | + <Setter Property="FontFamily" Value="Segoe UI"/> |
| 254 | + <Style.Resources> |
| 255 | + <Style TargetType="Paragraph" x:Key="H1"> |
| 256 | + <Setter Property="FontSize" Value="20"/> |
| 257 | + <Setter Property="FontWeight" Value="Bold"/> |
| 258 | + <Setter Property="Margin" Value="0,0,0,8"/> |
| 259 | + </Style> |
| 260 | + <Style TargetType="Paragraph" x:Key="H2"> |
| 261 | + <Setter Property="FontSize" Value="16"/> |
| 262 | + <Setter Property="FontWeight" Value="SemiBold"/> |
| 263 | + <Setter Property="Margin" Value="0,8,0,4"/> |
| 264 | + </Style> |
| 265 | + <Style TargetType="Image"> |
| 266 | + <Setter Property="MaxWidth" Value="400"/> |
| 267 | + <Setter Property="HorizontalAlignment" Value="Center"/> |
| 268 | + </Style> |
| 269 | + </Style.Resources> |
| 270 | + </Style> |
| 271 | + </mdxam:MarkdownScrollViewer.MarkdownStyle> |
| 272 | + </mdxam:MarkdownScrollViewer> |
| 273 | + </StackPanel> |
| 274 | + </Border> |
| 275 | + </DataTemplate> |
| 276 | + </local:ViewTemplateSelector.AITemplate> |
| 277 | + </local:ViewTemplateSelector> |
| 278 | + </Window.Resources> |
| 279 | + <Grid> |
| 280 | + <Grid.DataContext> |
| 281 | + <local:ViewModel/> |
| 282 | + </Grid.DataContext> |
| 283 | + <syncfusion:SfAIAssistView CurrentUser="{Binding CurrentUser}" |
| 284 | + Suggestions="{Binding Suggestion}" |
| 285 | + ShowTypingIndicator="True" |
| 286 | + TypingIndicator="{Binding TypingIndicator}" |
| 287 | + Messages="{Binding Chats}" |
| 288 | + ViewTemplateSelector="{StaticResource viewTS}"/> |
| 289 | + </Grid> |
| 290 | +</Page> |
| 291 | + |
| 292 | +{% endhighlight %} |
| 293 | +{% highlight C# %} |
| 294 | + |
| 295 | +public class ViewTemplateSelector : DataTemplateSelector |
| 296 | +{ |
| 297 | + public DataTemplate AITemplate { get; set; } |
| 298 | + |
| 299 | + public override DataTemplate SelectTemplate(object item, DependencyObject container) |
| 300 | + { |
| 301 | + if (item is AIMessage) |
| 302 | + { |
| 303 | + return AITemplate; |
| 304 | + } |
| 305 | + return null; |
| 306 | + } |
| 307 | +} |
| 308 | + |
| 309 | +public class AIMessage : NotificationObject, ITextMessage |
| 310 | +{ |
| 311 | + |
| 312 | + private string solution; |
| 313 | + |
| 314 | + /// <summary> |
| 315 | + /// Gets or sets the text to be display as the message. |
| 316 | + /// </summary> |
| 317 | + public string Solution |
| 318 | + { |
| 319 | + get |
| 320 | + { |
| 321 | + return this.solution; |
| 322 | + } |
| 323 | + set |
| 324 | + { |
| 325 | + this.solution = value; |
| 326 | + RaisePropertyChanged(nameof(Solution)); |
| 327 | + } |
| 328 | + } |
| 329 | + |
| 330 | + private Author author; |
| 331 | + |
| 332 | + /// <summary> |
| 333 | + /// Gets or sets the author to be display in the message. |
| 334 | + /// </summary> |
| 335 | + public Author Author |
| 336 | + { |
| 337 | + get { return author; } |
| 338 | + set |
| 339 | + { |
| 340 | + author = value; |
| 341 | + RaisePropertyChanged(nameof(Author)); |
| 342 | + } |
| 343 | + } |
| 344 | + |
| 345 | + private DateTime dateTime; |
| 346 | + |
| 347 | + /// <summary> |
| 348 | + /// Gets or sets the date and time details when the message was created. |
| 349 | + /// </summary> |
| 350 | + public DateTime DateTime |
| 351 | + { |
| 352 | + get { return dateTime; } |
| 353 | + set |
| 354 | + { |
| 355 | + dateTime = value; |
| 356 | + RaisePropertyChanged(nameof(DateTime)); |
| 357 | + } |
| 358 | + } |
| 359 | + |
| 360 | + private string text; |
| 361 | + |
| 362 | + /// <summary> |
| 363 | + /// Gets or sets the text to be display as the message. |
| 364 | + /// </summary> |
| 365 | + public string Text |
| 366 | + { |
| 367 | + get { return text; } |
| 368 | + set { text = value; RaisePropertyChanged(nameof(Text)); } |
| 369 | + } |
| 370 | +} |
| 371 | + |
| 372 | +{% endhighlight %} |
| 373 | +{% endtabs %} |
| 374 | + |
| 375 | + |
0 commit comments