|
| 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 | + |
| 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 | + |
| 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 | + |
| 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 | + |
| 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 | + |
| 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 | + |
| 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 | + |
0 commit comments