diff --git a/blazor/ai-assistview/assist-view.md b/blazor/ai-assistview/assist-view.md index a3bcf1665b..aa8a7017af 100644 --- a/blazor/ai-assistview/assist-view.md +++ b/blazor/ai-assistview/assist-view.md @@ -97,6 +97,63 @@ The AI AssistView supports rendering responses as **Markdown** content, which is You can use markdown syntax like **bold**, *italic*, headings, lists, code blocks, and links to format your responses. +```cshtml + +@using Syncfusion.Blazor.InteractiveChat + +
+ +
+ +@code { + private List markdownSuggestions = new List + { + "What is Markdown?", + "How do I use bold?", + "Show code block example" + }; + + private List markdownPrompts = new List() + { + new AssistViewPrompt() + { + Prompt = "What is Markdown?", + Response = @"# Markdown Guide + +Markdown is a lightweight markup language: + +- **Headers:** Use `#`, `##`, `###` +- **Bold:** `**text**` for bold +- **Italic:** `*text*` for italic +- **Code:** Triple backticks for code blocks +- **Lists:** Use `-` for bullet points + +It's simple and perfect for documentation." + }, + new AssistViewPrompt() + { + Prompt = "How do I use bold?", + Response = @"# Bold Text in Markdown + +Use double asterisks `**text**` or double underscores `__text__`: + +**This is bold text** + +Both methods produce the same result." + } + }; + + private async Task PromptRequest(AssistViewPromptRequestedEventArgs args) + { + await Task.Delay(1000); + var markdownResponse = markdownPrompts.FirstOrDefault(prompt => prompt.Prompt == args.Prompt); + 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."; + args.Response = markdownResponse?.Response ?? defaultResponse; + } +} + +``` + ## Adding prompt suggestions You can use the [PromptSuggestions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_PromptSuggestions) property, to add the suggestions in both initial and on-demand which help users to refine their prompts. Additionally, custom header can be set for suggestions further enhancing the user experience. @@ -217,3 +274,45 @@ You can use the [ResponseIconCss](https://help.syncfusion.com/cr/blazor/Syncfusi You can use the [EnableScrollToBottom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_EnableScrollToBottom) property to show or hide the scroll-to-bottom indicator. By default, this property is `true`. When enabled, a floating icon/button appears when the user scrolls away from the bottom of the conversation. Clicking this icon smoothly scrolls the view to the bottom to display the latest response. +```cshtml + +@using Syncfusion.Blazor.InteractiveChat + +
+ +
+ +@code { + private List suggestions = new List + { + "What tools or apps can help me prioritize tasks?", + "How do I manage multiple projects effectively?" + }; + + private List prompts = new List() + { + new AssistViewPrompt() + { + Prompt = "What tools or apps can help me prioritize tasks?", + Response = "
Here are some effective task prioritization tools:
  • Todoist: A robust task manager with priority levels and project organization.
  • Asana: Project management tool with timeline and board views.
  • Microsoft To Do: Simple and integrated with Microsoft ecosystem.
  • Notion: All-in-one workspace for notes, databases, and tasks.
  • ClickUp: Comprehensive tool with customizable workflows and prioritization features.
" + }, + new AssistViewPrompt() + { + Prompt = "How do I manage multiple projects effectively?", + Response = "
Here are best practices for managing multiple projects:
  • Use a centralized dashboard: Track all projects in one place.
  • Set clear milestones: Break down each project into manageable phases.
  • Prioritize tasks: Focus on high-impact items first.
  • Delegate effectively: Assign tasks to team members based on skills.
  • Regular reviews: Conduct weekly or bi-weekly project status meetings.
" + } + }; + + private async Task PromptRequest(AssistViewPromptRequestedEventArgs args) + { + await Task.Delay(1000); + var promptData = prompts.FirstOrDefault(prompt => prompt.Prompt == args.Prompt); + 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."; + args.Response = string.IsNullOrEmpty(promptData.Response) ? defaultResponse : promptData.Response; + } +} + +``` + +![Blazor AI AssistView ScrollToBottom](./images/assistview-scroll-to-bottom.png) + diff --git a/blazor/ai-assistview/images/assistview-scroll-to-bottom.png b/blazor/ai-assistview/images/assistview-scroll-to-bottom.png new file mode 100644 index 0000000000..2a93ad9c6b Binary files /dev/null and b/blazor/ai-assistview/images/assistview-scroll-to-bottom.png differ