Assist View in EJ2 TypeScript AI AssistView

11 Aug 20261 minute to read

Setting prompt text

You can use the prompt property to define the prompt text for the AI AssistView control.

Setting prompt placeholder

You can use the promptPlaceholder property to set the placeholder text for the prompt textarea. The default value is Type prompt for assistance....

Prompt-response collection

You can use the prompts property to initialize the control with the configured data as a collection of prompts and responses or individual entries.

The prompts collection stores all the prompts and responses generated.

Update response as markdown

The AI AssistView supports rendering responses as Markdown content, which is automatically converted to HTML using the built-in Markdown Converter. When you pass markdown-formatted text in the response, it will be displayed as formatted HTML in the AI AssistView. The streaming of markdown content happens seamlessly with built-in support for dynamic rendering.

You can use markdown syntax like bold, italic, headings, lists, code blocks, and links to format your responses:

Adding prompt suggestions

You can use the 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.

Adding suggestion headers

You can use the promptSuggestionsHeader property to set the header text for the prompt suggestions in the AI AssistView.

Adding prompt iconCss

You can customize the appearance of the prompter avatar by using the promptIconCss property.

Adding response iconCss

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.

Show or hide clear button

You can use the showClearButton property to show or hide the clear button. By default, its value is false, when the clear button is clicked, the prompt text entered will be cleared.

Enable scroll to bottom icon

You can use the 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.