Customizing the Views
The Angular AIPrompt comes with four view types that render different content and let you address different user interactions. You can alter the views by changing the icons and text of the toolbar button and even add entirely custom views. Changing the default active view is also supported.
Currently, the AIPrompt supports the following built-in views:
- Prompt View—provides an input field that allows the users to interact with the AI model by typing their instructions or requests.
- Output View—allows you to visualize the responses generated by the AI model.
- Command View—renders a list of executable commands.
- Custom View—enables you to fully customize the content of the view.
For more details on how to configure the views, refer to the Configuration article.
Custom Text
Each view allows you to override its default button text by setting the buttonText property.
The following example demonstrates customizing the Prompt View button text.
Custom Icons
To customize the default Font and SVG icons, set the icon and svgIcon properties respectively.
The following example demonstrates customizing the Prompt View button icons.
Custom View
The AIPrompt provides a designated CustomViewComponent which allows you to determine the exact view content.
To specify the custom content, use the ng-template tag and pass its reference to the built-in viewTemplate property.
The following example demonstrates the custom view in action.
Setting the Active View
By default, the AIPrompt will display the first declared view as active. To control this, use the built-in activeView property. The property supports two-way binding and helps you keep track of the currently selected view index.
