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.

EditPreviewOpen In Dojo

    <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>