Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion WindowsForms-toc.html
Original file line number Diff line number Diff line change
Expand Up @@ -4250,6 +4250,9 @@
<li>
<a href="/windowsforms/AI-AssistView/events">Events</a>
</li>
<li>
<a href="/windowsforms/AI-AssistView/customization">Customization</a>
</li>
</ul>
</li>
<li>
Expand Down Expand Up @@ -6137,7 +6140,7 @@
</li>
<li>
Release Notes
<ul><li>2026 Volume 1 - v33.*<ul><li> Weekly Nuget Release <ul><li><a href="/windowsforms/release-notes/v33.1.45">v33.1.45</a></li></ul></li><li><a href="/windowsforms/release-notes/v33.1.44">v33.1.44 Main Release</a></li></ul></li>
<ul><li>2026 Volume 1 - v33.*<ul><li> Weekly Nuget Release <ul><li><a href="/windowsforms/release-notes/v33.1.46">v33.1.46</a></li><li><a href="/windowsforms/release-notes/v33.1.45">v33.1.45</a></li></ul></li><li><a href="/windowsforms/release-notes/v33.1.44">v33.1.44 Main Release</a></li></ul></li>
<li>2025 Volume 4 - v32.*<ul><li> Weekly Nuget Release <ul><li><a href="/windowsforms/release-notes/v32.2.9">v32.2.9</a></li><li><a href="/windowsforms/release-notes/v32.2.8">v32.2.8</a></li><li><a href="/windowsforms/release-notes/v32.2.7">v32.2.7</a></li><li><a href="/windowsforms/release-notes/v32.2.5">v32.2.5</a></li><li><a href="/windowsforms/release-notes/v32.2.4">v32.2.4</a></li><li><a href="/windowsforms/release-notes/v32.1.25">v32.1.25</a></li><li><a href="/windowsforms/release-notes/v32.1.24">v32.1.24</a></li><li><a href="/windowsforms/release-notes/v32.1.23">v32.1.23</a></li><li><a href="/windowsforms/release-notes/v32.1.22">v32.1.22</a></li><li><a href="/windowsforms/release-notes/v32.1.21">v32.1.21</a></li><li><a href="/windowsforms/release-notes/v32.1.20">v32.1.20</a></li></ul></li><li><a href="/windowsforms/release-notes/v32.2.3">v32.2.3 Service Pack Release</a></li><li><a href="/windowsforms/release-notes/v32.1.19">v32.1.19 Main Release</a></li></ul></li>
<li>2025 Volume 3 - v31.*
<ul>
Expand Down
248 changes: 248 additions & 0 deletions WindowsForms/AI-AssistView/Customization.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,248 @@
---
layout: post
title: Customization in Windows Forms AI AssistView control | Syncfusion
description: Learn about customizing the BannerView and creating custom BotView and UserView in the Syncfusion AI AssistView control here.
platform: windowsforms
control: SfAIAssistView
documentation: ug
---

# Customization in AIAssistView

This section explains how to customize the BannerView, and how to create a custom BotView and UserView for the Windows Forms [SfAIAssistView](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.AIAssistView.SfAIAssistView.html) control

## Customizing BannerView

You can customize the BannerView and apply it to the AssistView by using the [SetBannerView](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.AIAssistView.SfAIAssistView.html#Syncfusion_WinForms_AIAssistView_SfAIAssistView_SetBannerView_System_String_System_String_System_Drawing_Image_Syncfusion_WinForms_AIAssistView_BannerStyle_) method.

The following example demonstrates how to customize the Title string, TitleFont, Subtitle string, SubtitleFont, ImageSize, SubtitleColor, and TitleColor of an AssistView banner.

{% tabs %}

{% highlight c# %}

public partial class Form1 : Form
{
ViewModel viewModel;
private SfAIAssistView sfAIAssistView1;
public Form1()
{
InitializeComponent();
viewModel = new ViewModel();

sfAIAssistView1 = new SfAIAssistView();
sfAIAssistView1.Location = new System.Drawing.Point(41, 40);
sfAIAssistView1.Size = new System.Drawing.Size(818, 457);
sfAIAssistView1.Dock = DockStyle.Fill;
this.Controls.Add(sfAIAssistView1);

sfAIAssistView1.DataBindings.Add("Messages", viewModel, "Chats", true, DataSourceUpdateMode.OnPropertyChanged);
sfAIAssistView1.DataBindings.Add("ShowTypingIndicator", viewModel, "ShowTypingIndicator", true, DataSourceUpdateMode.OnPropertyChanged);
sfAIAssistView1.DataBindings.Add("Suggestions", viewModel, "Suggestion", true, DataSourceUpdateMode.OnPropertyChanged);
viewModel.CurrentUser = sfAIAssistView1.User;

BannerTemplate();

sfAIAssistView1.TypingIndicator.Author = new Author() { Name = "Bot", AvatarImage = Image.FromFile(@"Asset\AI_Assist.png") };
sfAIAssistView1.TypingIndicator.DisplayText = "Typing";
}

private void BannerTemplate()
{

BannerStyle customStyle = new BannerStyle
{
TitleFont = new Font("Segoe UI", 14F, System.Drawing.FontStyle.Bold),
SubTitleFont = new Font("Segoe UI", 12F, System.Drawing.FontStyle.Italic),
ImageSize = AvatarSize.Medium,
SubTitleColor = Color.Red,
TitleColor = Color.Green,
};

string title = "AI Assist ";
string subTitle = "Your best AI Companion";
sfAIAssistView1.SetBannerView(title, subTitle, Image.FromFile(@"Asset\AI_Assist.png"), customStyle);
}
}

{% endhighlight %}

{% endtabs %}

![WindowsForms AI AssistView Control Customized BannerView](aiassistview_images/windowsforms_aiassistview_customize_bannerview.png)

## Creating a Custom BotView

You can create and set a custom BotView and apply it to the AssistView by using the [SetBotView](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.AIAssistView.SfAIAssistView.html#Syncfusion_WinForms_AIAssistView_SfAIAssistView_SetBotView_System_Object_System_Windows_Forms_Control_) method.

The following example demonstrates how to create and set a custom BotView in the AssistView.

{% tabs %}

{% highlight c# %}

public partial class Form1 : Form
{
public Form1()
{
viewModel.Chats.CollectionChanged += Chats_CollectionChanged;

// To Apply custom views to any existing default messages
foreach (var item in viewModel.Chats)
{
if (item is TextMessage tm)
{
sfAIAssistView1.SetBotView(tm, CreateBotView(tm));
}
}
}



private void Chats_CollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
{
if (e.Action != NotifyCollectionChangedAction.Add) return;

foreach (var newItem in e.NewItems ?? new object[0])
{
if (newItem is TextMessage message)
{
sfAIAssistView1.SetBotView(message, CreateBotView(message));
}
}
}

private Control CreateBotView(TextMessage message)
{
string text = string.IsNullOrEmpty(message?.Text) ? "Hello from the bot." : message.Text;

var container = new FlowLayoutPanel
{
AutoSize = true,

WrapContents = true,
Padding = new Padding(6),
BackColor = Color.Transparent
};

var lbl = new Label
{
Text = text,
AutoSize = true,
BackColor = Color.FromArgb(230, 240, 255),
ForeColor = Color.FromArgb(24, 24, 24),
Padding = new Padding(8),
Margin = new Padding(0, 0, 0, 6)
};

container.Controls.Add(lbl);

// Only show buttons for the initial prompt message
const string prompt = "I am an AI assistant. Please choose from the options below";
if (string.Equals(text?.Trim(), prompt, StringComparison.OrdinalIgnoreCase))
{
var btnRow = new FlowLayoutPanel
{
AutoSize = true,
WrapContents = true,
Margin = new Padding(0)
};

string[] choices = new[] { "What is WinForms?", "What is AI?" };
foreach (var c in choices)
{
var btn = new Button
{
Text = c,
AutoSize = true,
Tag = c,
BackColor = Color.WhiteSmoke,
Margin = new Padding(0, 0, 6, 0)
};

btn.Click += (s, e) =>
{
try
{
var choice = (string)((Button)s).Tag;
viewModel?.Chats.Add(new TextMessage
{
Author = viewModel.CurrentUser,
Text = choice
});
}
catch { }
};

btnRow.Controls.Add(btn);
}

container.Controls.Add(btnRow);
}

return container;
}
}

{% endhighlight %}

{% endtabs %}

![WindowsForms AI AssistView Control Custom BotView](aiassistview_images/windowsforms_aiassistview_custom_botview.png)

## Creating a Custom UserView

You can create and set a custom UserView and apply it to the AssistView by calling the [SetUserView](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.AIAssistView.SfAIAssistView.html#Syncfusion_WinForms_AIAssistView_SfAIAssistView_SetUserView_System_Object_System_Windows_Forms_Control_) method.

The following example demonstrates how to create and set a custom UserView in AssistView.

{% tabs %}

{% highlight c# %}

public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();

viewModel.Chats.CollectionChanged += Chats_CollectionChanged;

}

private void Chats_CollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
{
if (e.Action != NotifyCollectionChangedAction.Add) return;

foreach (var newItem in e.NewItems ?? new object[0])
{
if (newItem is TextMessage message)
{
sfAIAssistView1.SetUserView(message, CreateUserView(message));
}
}
}
private Control CreateUserView(TextMessage message)
{
string content = message?.Text ?? string.Empty;

var lbl = new Label
{
Text = content,
AutoSize = true,
MaximumSize = new System.Drawing.Size(520, 0),
BackColor = Color.LightGoldenrodYellow,
ForeColor = Color.Blue,
Padding = new Padding(5),
Margin = new Padding(0, 0, 0, 6)
};

return lbl;
}
}

{% endhighlight %}

{% endtabs %}

![WindowsForms AI AssistView Control Custom UserView](aiassistview_images/windowsforms_aiassistview_custom_userview.png)
4 changes: 2 additions & 2 deletions WindowsForms/AI-AssistView/Events.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
layout: post
title: Windows Forms AI AssistView control | Syncfusion
title: Events in Windows Forms AI AssistView control | Syncfusion
description: Learn here all about Events support in Syncfusion AI AssistView control, its elements and more details.
platform: windowsforms
control: SfAIAssistView
Expand All @@ -11,7 +11,7 @@ documentation: ug

## PromptRequest event

This event notifies users when a prompt is submitted in the control. It can be used to validate user input before processing or trigger custom actions based on the prompt content. The input message and its details are passed through the PromptRequestEventArgs. This argument provides the following details:
[PromptRequest](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.AIAssistView.SfAIAssistView.html#Syncfusion_WinForms_AIAssistView_SfAIAssistView_PromptRequest) event notifies users when a prompt is submitted in the control. It can be used to validate user input before processing or trigger custom actions based on the prompt content. The input message and its details are passed through the [PromptRequestEventArgs](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.AIAssistView.PromptRequestEventArgs.html). This argument provides the following details:

InputMessage : Represents the input message value of the AIAssistView.
Handled : Boolean value indicating whether the input message in the Messages collection has been handled by the event.
Expand Down
4 changes: 2 additions & 2 deletions WindowsForms/AI-AssistView/Getting-Started.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
layout: post
title: Windows Forms AI AssistView control | Syncfusion
title: Getting Started with Windows Forms AI AssistView control | Syncfusion
description: Learn about getting started with the Syncfusion Windows Forms AI AssistView (SfAIAssistView) control with its basic features.
platform: windowsforms
control: SfAIAssistView
Expand All @@ -9,7 +9,7 @@ documentation: ug

# Getting Started with Windows Forms AI AssistView

This section explains the steps required to add the Windows Forms `SfAIAssistView` control with its basic features.
This section explains the steps required to add the Windows Forms [SfAIAssistView](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.AIAssistView.SfAIAssistView.html) control with its basic features.

## Assembly Deployment

Expand Down
11 changes: 7 additions & 4 deletions WindowsForms/AI-AssistView/Open-AI.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
layout: post
title: Windows Forms AI AssistView control | Syncfusion
title: OpenAI in Windows Forms AI AssistView control | Syncfusion
description: Learn about how to connect the AI AssistView control with OpenAI and chat gpt conversation experience.
platform: windowsforms
control: SfAIAssistView
Expand All @@ -14,9 +14,9 @@ This section explains about how to connect the AI AssistView with OpenAI.
## Creating an application with NuGet reference.

1. Create a [Windows Forms app](https://learn.microsoft.com/en-us/visualstudio/ide/create-csharp-winform-visual-studio?view=visualstudio).
2. Add reference to [Syncfusion.SfAIAssistView.WinForms](https://www.nuget.org/packages) NuGet.
2. Add reference to [Syncfusion.SfAIAssistView.WinForms](https://www.nuget.org/packages/Syncfusion.SfAIAssistView.WinForms) NuGet.
3. Import the control namespace `Syncfusion.WinForms.AIAssistView` in C# code.
4. Initialize the `SfAIAssistView` control.
4. Initialize the [SfAIAssistView](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.AIAssistView.SfAIAssistView.html) control.
5. Add reference to [Microsoft Semantic NuGet](https://www.nuget.org/packages/Microsoft.SemanticKernel) NuGet.

## Creating the OpenAI view model class.
Expand Down Expand Up @@ -206,4 +206,7 @@ public partial class Form1 : Form

{% endtabs %}

![WindowsForms AI AssistView control open ai](aiassistview_images/windowsforms_aiassistview_openai.gif)
![WindowsForms AI AssistView control open ai](aiassistview_images/windowsforms_aiassistview_openai.gif)

N> You can also explore our [WinForms AIAssistView example demos](https://github.com/syncfusion/winforms-demos/tree/master/assistview)

2 changes: 1 addition & 1 deletion WindowsForms/AI-AssistView/Overview.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
layout: post
title: Windows Forms AI AssistView control | Syncfusion
title: About Windows Forms AI AssistView control | Syncfusion
description: Learn about the introduction of Syncfusion Windows Forms AI AssistView Control (SfAIAssistView) with essential features and more.
platform: windowsforms
control: SfAIAssistView
Expand Down
4 changes: 2 additions & 2 deletions WindowsForms/AI-AssistView/Suggestions.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
layout: post
title: Windows Forms AI AssistView control | Syncfusion
title: Suggestions in Windows Forms AI AssistView control | Syncfusion
description: Learn about the suggestion feature that displays AI-driven suggestions in the bottom right corner of the AI AssistView control.
platform: windowsforms
control: SfAIAssistView
Expand All @@ -9,7 +9,7 @@ documentation: ug

# Suggestions in Windows Forms AI AssistView

By using the `Suggestions` property, the AssistView displays AI-driven suggestions in the bottom right corner, making it easy for users to quickly respond or choose from relevant options.
By using the [Suggestions](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.AIAssistView.SfAIAssistView.html#Syncfusion_WinForms_AIAssistView_SfAIAssistView_Suggestions) property, the AssistView displays AI-driven suggestions in the bottom right corner, making it easy for users to quickly respond or choose from relevant options.

{% tabs %}

Expand Down
6 changes: 3 additions & 3 deletions WindowsForms/AI-AssistView/Typing-Indicator.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
layout: post
title: Windows Forms AI AssistView control | Syncfusion
title: Typing Indicator in Windows Forms AI AssistView control | Syncfusion
description: Learn about the typing indicator feature displayed in the AI AssistView control while the AI processes or generates a response.
platform: windowsforms
control: SfAIAssistView
Expand All @@ -9,9 +9,9 @@ documentation: ug

# Typing Indicator in Windows Forms AI AssistView

By using the `TypingIndicator` property, a typing indicator is shown while the AI is processing or generating a response, giving users real-time feedback and enhancing conversational flow.
By using the [TypingIndicator](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.AIAssistView.SfAIAssistView.html#Syncfusion_WinForms_AIAssistView_SfAIAssistView_TypingIndicator) property, a typing indicator is shown while the AI is processing or generating a response, giving users real-time feedback and enhancing conversational flow.

When the application runs, the TypingIndicator will show an animation representing the AI or user typing a message. This indicator is shown when the `ShowTypingIndicator` property value as true.
When the application runs, the TypingIndicator will show an animation representing the AI or user typing a message. This indicator is shown when the [ShowTypingIndicator](https://help.syncfusion.com/cr/windowsforms/Syncfusion.WinForms.AIAssistView.SfAIAssistView.html#Syncfusion_WinForms_AIAssistView_SfAIAssistView_ShowTypingIndicator) property value as true.

{% tabs %}

Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading