Templates
The AIPrompt allows you to control the appearance of the prompt suggestion and view items by using template options.
For more information on the capabilities and syntax of the templates, see the Using Client Templates article. For a runnable example, refer to the demo on customizing the templates in the AIPrompt.
Prompt Suggestion Items Template
The list of prompt suggestions is displayed in the Prompt view. You can customize the appearance of the suggestion items through different template methods like PromptSuggestionItemTemplate(), PromptSuggestionItemTemplateHandler(), and PromptSuggestionItemTemplateId().
The following example demonstrates how to use the PromptSuggestionItemTemplateHandler() option to style each prompt suggestion item based on its content.
@(Html.Kendo().AIPrompt()
.Name("aiprompt")
.PromptSuggestionItemTemplateHandler("promptSuggestionTemplate")
.Views(views =>
{
views.Add().Type(ViewType.Prompt)
.PromptSuggestions(new string[] { "Out of office (contact colleague)", "LinkedIn post for work/life balance and well-being" });
views.Add().Type(ViewType.Output);
})
)
<script>
var promptSuggestionsData = [
{
suggestion: "Out of office (contact colleague)",
color:"yellow",
background: "red"
},
{
suggestion: "LinkedIn post for work/life balance and well-being",
color: "darkgreen",
background: "lightblue"
}];
function promptSuggestionTemplate(data) {
let suggestionText = data.suggestion;
let getSuggestionData = $.grep(promptSuggestionsData, function (item) {
return item.suggestion == suggestionText;
});
return `<span role="listitem" class="k-prompt-suggestion" style="color:${getSuggestionData[0].color}; background-color: ${getSuggestionData[0].background}">${getSuggestionData[0].suggestion}</span>`;
}
</script>
View Content Templates
The AIPrompt supports custom views through the Views() configuration. By using the ViewTemplate() and the FooterTemplate() methods, you can specify the content and footer of that custom view.
The following example demonstrates how to add a custom view in the AIPrompt component.
@(Html.Kendo().AIPrompt()
.Name("aiprompt")
.Views(views =>
{
views.Add().Type(ViewType.Custom).Name("myCustomView")
.ButtonText("Additional options")
.ViewTemplate("<div><p>Custom View content</p></div>")
.FooterTemplate("<div class='custom-footer'>Custom View footer</div>");
})
)