Templates
The AIPrompt provides full control over the rendering of the items by using Kendo UI templates.
For a complete example, refer to the demo on customizing the AIPrompt templates.
PromptSuggestion Template
The promptSuggestionItemTemplate allows you to customize the appearance of the prompt suggestion items in the prompt view.
<div id="aiprompt"></div>
<script>
var promptData = [
{
suggestion: "Out of office (contact colleague)",
output: "Out of office response generated by AI",
color: "green"
},
{
suggestion: "LinkedIn post for work/life balance and well-being",
output: "LinkedIn post response generated by AI",
color: "red"
}]
$("#aiprompt").kendoAIPrompt({
promptRequest: function(ev) {
//mocked response from AI service
const response = promptData.find((s) => s.suggestion === ev.prompt);
const output = {
id: kendo.guid(),
output: response.output,
prompt: ev.prompt,
isRetry: ev.isRetry,
};
this.addPromptOutput(output);
this.activeView(1);
},
promptSuggestionItemTemplate: ({ suggestion }) => `<span role="listitem" class="k-prompt-suggestion" style="color:${suggestion.color};">${suggestion.text}</span>`,
views: [
{
type: 'prompt',
promptSuggestions: promptData.map(x => ({color : x.color, text : x.suggestion }))
},
{
type: 'output',
}
]
});
</script>