Skip to content

Commit c8cf0be

Browse files
dineshvinayagamsf3930dineshvinayagamsf3930
authored
Merge branch 'development' into 909736-Improvement
2 parents 6d05b3a + 080e7e4 commit c8cf0be

File tree

64 files changed

+2076
-24
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

64 files changed

+2076
-24
lines changed

‎blazor-toc.html‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -602,12 +602,22 @@
602602
</li>
603603
<li>AI AssistView
604604
<ul>
605-
<li>Getting Started
605+
<li>Getting Started
606606
<ul>
607607
<li> <a href="/blazor/ai-assistview/getting-started-webapp">Blazor Web App</a></li>
608608
<li> <a href="/blazor/ai-assistview/getting-started">Blazor Server and WASM App</a></li>
609609
</ul>
610610
</li>
611+
<li><a href="/blazor/ai-assistview/assist-view">Assist view</a></li>
612+
<li><a href="/blazor/ai-assistview/toolbar-items">Toolbar items</a></li>
613+
<li><a href="/blazor/ai-assistview/custom-view">Custom views</a></li>
614+
<li><a href="/blazor/ai-assistview/templates">Templates</a></li>
615+
<li><a href="/blazor/ai-assistview/appearance">Appearance</a></li>
616+
<li><a href="/blazor/ai-assistview/methods">Methods</a></li>
617+
<li><a href="/blazor/ai-assistview/events">Events</a></li>
618+
<li>
619+
<a href="/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html"> API Reference</a>
620+
</li>
611621
</ul>
612622
</li>
613623
<li>AppBar
@@ -2887,7 +2897,9 @@
28872897
<li> <a href="/blazor/gantt-chart/custom-binding">Custom Binding</a></li>
28882898
</ul>
28892899
</li>
2890-
2900+
<li>
2901+
<a href="/blazor/gantt-chart/performance">Performance Best Practices</a>
2902+
</li>
28912903
<li> <a href="/blazor/gantt-chart/columns">Columns</a>
28922904
<ul>
28932905
<li><a href="/blazor/gantt-chart/column-reordering">Column Rordering</a></li>
@@ -3073,6 +3085,7 @@
30733085
<li> <a href="/blazor/image-editor/frame">Frame</a></li>
30743086
<li> <a href="/blazor/image-editor/resize">Resize</a></li>
30753087
<li> <a href="/blazor/image-editor/z-order">Z-Order</a></li>
3088+
<li> <a href="/blazor/image-editor/redact">Redact</a></li>
30763089
<li> <a href="/blazor/image-editor/localization">Localization</a></li>
30773090
<li> <a href="/blazor/image-editor/accessibility">Accessibility</a></li>
30783091
<li>
@@ -3317,6 +3330,7 @@
33173330
<li><a href="/blazor/mention/working-with-data">Working with Data</a></li>
33183331
<li><a href="/blazor/mention/filtering-data">Filtering Data</a></li>
33193332
<li><a href="/blazor/mention/sorting">Sorting</a></li>
3333+
<li> <a href="/blazor/mention/disabled-items">Disabled Items</a></li>
33203334
<li><a href="/blazor/mention/templates">Templates</a></li>
33213335
<li><a href="/blazor/mention/localization">Localization</a></li>
33223336
<li><a href="/blazor/mention/customization">Customization</a></li>

‎blazor/ai-assistview/appearance.md‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
---
2+
layout: post
3+
title: Appearance in Blazor AI AssistView Component | Syncfusion
4+
description: Checkout and learn here all about Appearance with Syncfusion Blazor AI AssistView component in Blazor Server App and Blazor WebAssembly App.
5+
platform: Blazor
6+
control: AI AssistView
7+
documentation: ug
8+
---
9+
10+
# Appearance in Blazor AI AssistView component
11+
12+
## Setting width
13+
14+
You can use the `Width` property to set the width of the AI AssistView.
15+
16+
```cshtml
17+
18+
@using Syncfusion.Blazor.InteractiveChat
19+
20+
<div class="aiassist-container" style="height: 350px; width: 750px;">
21+
<SfAIAssistView Width="650px" PromptRequested="@PromptRequest"></SfAIAssistView>
22+
</div>
23+
24+
@code {
25+
private async Task PromptRequest(AssistViewPromptRequestedEventArgs args)
26+
{
27+
await Task.Delay(1000);
28+
var defaultResponse = "For real-time prompt processing, connect the AI AssistView component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.";
29+
args.Response = defaultResponse;
30+
}
31+
}
32+
33+
```
34+
35+
![Blazor AI AssistView Width](./images/ai-assistview-width.png)
36+
37+
## Setting height
38+
39+
You can use the `Height` property to set the height of the AI AssistView.
40+
41+
> By default, the component `Width` & `Height` will be inherited based on the parent dimensions.
42+
43+
```cshtml
44+
45+
@using Syncfusion.Blazor.InteractiveChat
46+
47+
<div class="aiassist-container" style="height: 450px; width: 650px;">
48+
<SfAIAssistView Height="350px" PromptRequested="@PromptRequest"></SfAIAssistView>
49+
</div>
50+
51+
@code {
52+
private async Task PromptRequest(AssistViewPromptRequestedEventArgs args)
53+
{
54+
await Task.Delay(1000);
55+
var defaultResponse = "For real-time prompt processing, connect the AI AssistView component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.";
56+
args.Response = defaultResponse;
57+
}
58+
}
59+
60+
```
61+
62+
![Blazor AI AssistView Height](./images/ai-assistview-height.png)
63+
64+
## CssClass
65+
66+
You can customize the appearance of the AI AssistView component by using the `CssClass` property.
67+
68+
```cshtml
69+
70+
@using Syncfusion.Blazor.InteractiveChat
71+
72+
<div class="aiassist-container" style="height: 350px; width: 650px;">
73+
<SfAIAssistView CssClass="e-custom" PromptRequested="@PromptRequest"></SfAIAssistView>
74+
</div>
75+
76+
@code {
77+
private async Task PromptRequest(AssistViewPromptRequestedEventArgs args)
78+
{
79+
await Task.Delay(1000);
80+
var defaultResponse = "For real-time prompt processing, connect the AI AssistView component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.";
81+
args.Response = defaultResponse;
82+
}
83+
}
84+
<style>
85+
.e-aiassistview.e-custom {
86+
border-color: #e0e0e0;
87+
background-color: #f4f4f4;
88+
box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.2);
89+
}
90+
91+
.e-aiassistview.e-custom .e-view-header .e-toolbar,
92+
.e-aiassistview.e-custom .e-view-header .e-toolbar-items {
93+
background: #d5d5d5;
94+
}
95+
96+
.e-aiassistview.e-custom .e-view-content .e-input-group {
97+
border: 3px solid #e0e0e0;
98+
}
99+
</style>
100+
101+
```
102+
103+
![Blazor AI AssistView Custom Class](./images/ai-assistview-custom-class.png)

‎blazor/ai-assistview/assist-view.md‎

Lines changed: 211 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,211 @@
1+
---
2+
layout: post
3+
title: Assist view in Blazor AI AssistView Component | Syncfusion
4+
description: Checkout and learn here all about Assist view with Syncfusion Blazor AI AssistView component in Blazor Server App and Blazor WebAssembly App.
5+
platform: Blazor
6+
control: AI AssistView
7+
documentation: ug
8+
---
9+
10+
# Assist view in Blazor AI AssistView component
11+
12+
## Setting prompt text
13+
14+
You can use the `Prompt` property to define the prompt text for the AI AssistView component.
15+
16+
```cshtml
17+
18+
@using Syncfusion.Blazor.InteractiveChat
19+
20+
<div class="aiassist-container" style="height: 350px; width: 650px;">
21+
<SfAIAssistView Prompt = "What tools or apps can help me prioritize tasks?" PromptRequested="@PromptRequest"></SfAIAssistView>
22+
</div>
23+
24+
@code {
25+
private async Task PromptRequest(AssistViewPromptRequestedEventArgs args)
26+
{
27+
await Task.Delay(1000);
28+
var defaultResponse = "For real-time prompt processing, connect the AI AssistView component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.";
29+
args.Response = defaultResponse;
30+
}
31+
}
32+
33+
```
34+
35+
![Blazor AI AssistView PromptText](./images/prompt-text.png)
36+
37+
## Setting prompt placeholder
38+
39+
You can use the `PromptPlaceholder` property to set the placeholder text for the prompt textarea. The default value is `Type prompt for assistance...`.
40+
41+
```cshtml
42+
43+
@using Syncfusion.Blazor.InteractiveChat
44+
45+
<div class="aiassist-container" style="height: 350px; width: 650px;">
46+
<SfAIAssistView PromptPlaceholder="Type a message..." PromptRequested="@PromptRequest"></SfAIAssistView>
47+
</div>
48+
49+
@code {
50+
private async Task PromptRequest(AssistViewPromptRequestedEventArgs args)
51+
{
52+
await Task.Delay(1000);
53+
var defaultResponse = "For real-time prompt processing, connect the AI AssistView component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.";
54+
args.Response = defaultResponse;
55+
}
56+
}
57+
58+
```
59+
60+
![Blazor AI AssistView PromptPlaceholder](./images/prompt-placeholder.png)
61+
62+
## Prompt-response collection
63+
64+
By using the `Prompts` property, you can specify the collection of prompts and responses, allowing you to load pre-defined pairs or individual entries ensuring the AI AssistView component is initialized with the configured data.
65+
66+
The `Prompts` collection stores all the prompts and responses generated.
67+
68+
```cshtml
69+
70+
@using Syncfusion.Blazor.InteractiveChat
71+
72+
<div class="aiassist-container" style="height: 350px; width: 650px;">
73+
<SfAIAssistView Prompts="@prompts" PromptRequested="@PromptRequest"></SfAIAssistView>
74+
</div>
75+
76+
@code {
77+
private List<AssistViewPrompt> prompts = new List<AssistViewPrompt>()
78+
{
79+
new AssistViewPrompt() { Prompt = "What is AI?", Response = "<div>AI stands for Artificial Intelligence, enabling machines to mimic human intelligence for tasks such as learning, problem-solving, and decision-making.</div>" }
80+
};
81+
private async Task PromptRequest(AssistViewPromptRequestedEventArgs args)
82+
{
83+
await Task.Delay(1000);
84+
var isPromptFound = prompts.Any(prompt => prompt.Prompt == args.Prompt);
85+
var promptData = prompts.FirstOrDefault(prompt => prompt.Prompt == args.Prompt);
86+
var defaultResponse = "For real-time prompt processing, connect the AI AssistView component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.";
87+
args.Response = isPromptFound ? promptData.Response : defaultResponse;
88+
}
89+
}
90+
91+
```
92+
93+
![Blazor AI AssistView Prompts](./images/assistview-prompts.png)
94+
95+
## Adding prompt suggestions
96+
97+
By using the `PromptSuggestions` property, you can configure the list of suggested prompts in the AI AssistView. Users can choose from these suggestions to use as their prompts.
98+
99+
```cshtml
100+
101+
@using Syncfusion.Blazor.InteractiveChat
102+
103+
<div class="aiassist-container" style="height: 350px; width: 650px;">
104+
<SfAIAssistView PromptSuggestions="@suggestions" PromptRequested="@PromptRequest"></SfAIAssistView>
105+
</div>
106+
107+
@code {
108+
List<string> suggestions = new List<string> { "Best practices for clean, maintainable code?", "How to optimize code editor for speed?" };
109+
private async Task PromptRequest(AssistViewPromptRequestedEventArgs args)
110+
{
111+
await Task.Delay(1000);
112+
var response1 = "Use clear naming, break code into small functions, avoid repetition, write tests, and follow coding standards.";
113+
var response2 = "Install useful extensions, set up shortcuts, enable linting, and customize settings for smoother development.";
114+
var defaultResponse = "For real-time prompt processing, connect the AI AssistView component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.";
115+
args.Response = args.Prompt == suggestions[0] ? response1 : args.Prompt == suggestions[1] ? response2 : defaultResponse;
116+
}
117+
}
118+
119+
```
120+
121+
![Blazor AI AssistView PromptSuggestions](./images/assistview-suggestions.png)
122+
123+
### Adding suggestion headers
124+
125+
You can use the `PromptSuggestionsHeader` property to set the header text for the prompt suggestions in the AI AssistView.
126+
127+
```cshtml
128+
129+
@using Syncfusion.Blazor.InteractiveChat
130+
131+
<div class="aiassist-container" style="height: 350px; width: 650px;">
132+
<SfAIAssistView PromptSuggestions="@suggestions" PromptSuggestionsHeader="Suggested Prompts" PromptRequested="@PromptRequest"></SfAIAssistView>
133+
</div>
134+
135+
@code {
136+
List<string> suggestions = new List<string> { "Best practices for clean, maintainable code?", "How to optimize code editor for speed?" };
137+
private async Task PromptRequest(AssistViewPromptRequestedEventArgs args)
138+
{
139+
await Task.Delay(1000);
140+
var response1 = "Use clear naming, break code into small functions, avoid repetition, write tests, and follow coding standards.";
141+
var response2 = "Install useful extensions, set up shortcuts, enable linting, and customize settings for smoother development.";
142+
var defaultResponse = "For real-time prompt processing, connect the AI AssistView component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.";
143+
args.Response = args.Prompt == suggestions[0] ? response1 : args.Prompt == suggestions[1] ? response2 : defaultResponse;
144+
}
145+
}
146+
147+
```
148+
149+
![Blazor AI AssistView PromptSuggestionsHeader](./images/assistview-suggestion-header.png)
150+
151+
## Adding prompt iconCSS
152+
153+
You can customize the appearance of the prompter avatar by using the `PromptIconCss` property.
154+
155+
```cshtml
156+
157+
@using Syncfusion.Blazor.InteractiveChat
158+
159+
<div class="aiassist-container" style="height: 350px; width: 650px;">
160+
<SfAIAssistView Prompts="@prompts" PromptRequested="@PromptRequest" PromptIconCss="e-icons e-user"></SfAIAssistView>
161+
</div>
162+
163+
@code {
164+
private List<AssistViewPrompt> prompts = new List<AssistViewPrompt>()
165+
{
166+
new AssistViewPrompt() { Prompt = "What is AI?", Response = "<div>AI stands for Artificial Intelligence, enabling machines to mimic human intelligence for tasks such as learning, problem-solving, and decision-making.</div>" }
167+
};
168+
private async Task PromptRequest(AssistViewPromptRequestedEventArgs args)
169+
{
170+
await Task.Delay(1000);
171+
var isPromptFound = prompts.Any(prompt => prompt.Prompt == args.Prompt);
172+
var promptData = prompts.FirstOrDefault(prompt => prompt.Prompt == args.Prompt);
173+
var defaultResponse = "For real-time prompt processing, connect the AI AssistView component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.";
174+
args.Response = isPromptFound ? promptData.Response : defaultResponse;
175+
}
176+
}
177+
178+
```
179+
180+
![Blazor AI AssistView PromptIcon](./images/assistview-prompt-icon.png)
181+
182+
## Adding response iconCSS
183+
184+
You can use the `ResponseIconCss` property to customize the appearance of the responder avatar. By default, the `e-assistview-icon` class is added as the built-in AI AssistView response icon.
185+
186+
```cshtml
187+
188+
@using Syncfusion.Blazor.InteractiveChat
189+
190+
<div class="aiassist-container" style="height: 350px; width: 650px;">
191+
<SfAIAssistView Prompts="@prompts" PromptRequested="@PromptRequest" ResponseIconCss="e-icons e-star-filled"></SfAIAssistView>
192+
</div>
193+
194+
@code {
195+
private List<AssistViewPrompt> prompts = new List<AssistViewPrompt>()
196+
{
197+
new AssistViewPrompt() { Prompt = "What is AI?", Response = "<div>AI stands for Artificial Intelligence, enabling machines to mimic human intelligence for tasks such as learning, problem-solving, and decision-making.</div>" }
198+
};
199+
private async Task PromptRequest(AssistViewPromptRequestedEventArgs args)
200+
{
201+
await Task.Delay(1000);
202+
var isPromptFound = prompts.Any(prompt => prompt.Prompt == args.Prompt);
203+
var promptData = prompts.FirstOrDefault(prompt => prompt.Prompt == args.Prompt);
204+
var defaultResponse = "For real-time prompt processing, connect the AI AssistView component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.";
205+
args.Response = isPromptFound ? promptData.Response : defaultResponse;
206+
}
207+
}
208+
209+
```
210+
211+
![Blazor AI AssistView ResponseIconCss](./images/assistview-response-icon.png)

0 commit comments

Comments
 (0)