Views

The AIPrompt allows you to show pre-defined and custom views. The views configuration exposes a number of options that you can set for a view, such as text, name, or icon.

Below you will find a list of the supported view types:

• prompt—This view contains the prompt suggestions. Rendered by default.
• output—The output view is where you see the generated content, along with the copy, retry, and rating buttons. Rendered by default.
• commands—The commands view contains the actions a user can pick from to further process the generated content. Rendered only if a set of commands is passed.
• custom—With custom views, you can configure and show additional content based on your project's requirements. Use viewTemplate and footerTemplate to control the contents of the custom view.
  

The example below shows a possible configuration for all the view types:

    <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);
            },            
            views: [
                {
                    type: 'prompt',
                    promptSuggestions: promptData.map(x => x.suggestion)

                },
                {
                    type: 'output',
                },
                {
                type: 'commands',
                promptCommands: [
                        { id: "1", text: "Simplify", icon: "min-width" },
                        { id: "2", text: "Extend", icon: "arrows-left-right" },
                    ]
                },
                {
                    name: "custom",
                    type: "custom",
                    buttonIcon: "pencil",
                    buttonText: "Custom View",
                    viewTemplate: () => "<div class='custom-view'>Custom View</div>",
                    footerTemplate: () => `<div class="k-actions k-actions-start k-actions-horizontal k-prompt-actions">
                                <button ref-custom-button>Click me</button>
                            </div>`,
                    initializeComponents: function() {
                        var that = this;

                        that.element.find("[ref-custom-button]").kendoButton({
                            click: function(e) {
                                console.log("Custom button clicked", e);
                            }
                        });
                    }
                }   
            ]
        });
    </script>

See Also

• Templates in the AIPrompt
• JavaScript API Reference of the AIPrompt