New to Kendo UI for jQuery? Start a free 30-day trial

OutputActions

configuration

An array of action configurations for the output cards. Can contain strings for built-in actions or objects with custom action properties.

Built-in actions:

"copy" - Copy output content to clipboard
"retry" - Retry generating the output
"rating" - Expands to both positive and negative rating buttons
"ratingPositive" - Renders the positive rating button
"ratingNegative" - Renders the negative rating button
"spacer" - Adds spacing between action buttons

Custom actions trigger the outputAction event with the action command and output data.

outputActions

Array

Default: ["copy", "retry"]

<div id="aiprompt"></div>
<script>
$("#aiprompt").kendoAIPrompt({
    outputActions: ["copy", "retry", "rating"]
});
</script>

<div id="aiprompt"></div>
<script>
$("#aiprompt").kendoAIPrompt({
    outputActions: [
        "copy",
        "retry",
        { command: "export", text: "Export", icon: "download" },
        "spacer",
        { command: "share", text: "Share", icon: "share" }
    ],
    outputAction: function(e) {
        if (e.command === "export") {
            // Handle export action
            // e.output contains the text content directly
            console.log("Exporting output ID:", e.outputId);
            console.log("Content:", e.output);
            console.log("Original prompt:", e.prompt);
        } else if (e.command === "share") {
            // Handle share action
            console.log("Sharing output:", e.output);
        }
    }
});
</script>

outputActions.command

String

The command identifier for the action. This is used to identify the action when the outputAction event is triggered.

<div id="aiprompt"></div>
<script>
$("#aiprompt").kendoAIPrompt({
    outputActions: [
        { command: "export", text: "Export", icon: "download" }
    ]
});
</script>

outputActions.fillMode

String

Specifies the fill mode of the action button. Available options: "solid", "outline", "flat", "none".

<div id="aiprompt"></div>
<script>
$("#aiprompt").kendoAIPrompt({
    outputActions: [
        { command: "primary", text: "Primary", fillMode: "solid" },
        { command: "secondary", text: "Secondary", fillMode: "outline" }
    ]
});
</script>

outputActions.icon

String

The icon name for the action button. Uses Kendo UI icon names.

<div id="aiprompt"></div>
<script>
$("#aiprompt").kendoAIPrompt({
    outputActions: [
        { command: "bookmark", text: "Bookmark", icon: "star" },
        { command: "share", text: "Share", icon: "share" }
    ]
});
</script>

outputActions.rounded

String

Specifies the border radius of the action button. Available options: "small", "medium", "large", "full", "none".

<div id="aiprompt"></div>
<script>
$("#aiprompt").kendoAIPrompt({
    outputActions: [
        { command: "rounded", text: "Rounded", rounded: "full" }
    ]
});
</script>

outputActions.text

String

The text displayed on the action button.

<div id="aiprompt"></div>
<script>
$("#aiprompt").kendoAIPrompt({
    outputActions: [
        { command: "export", text: "Export to PDF", icon: "download" }
    ]
});
</script>

outputActions.themeColor

String

Specifies the theme color of the action button. Available options: "base", "primary", "secondary", "tertiary", "success", "warning", "error", "info", "inverse".

<div id="aiprompt"></div>
<script>
$("#aiprompt").kendoAIPrompt({
    outputActions: [
        { command: "danger", text: "Delete", themeColor: "error" },
        { command: "success", text: "Approve", themeColor: "success" }
    ]
});
</script>

outputActions.title

String

Specifies the title attribute (tooltip) for the action button.

<div id="aiprompt"></div>
<script>
$("#aiprompt").kendoAIPrompt({
    outputActions: [
        { command: "help", icon: "question", title: "Get help with this output" }
    ]
});
</script>

outputActions.type

String

Specifies the type of the action. Available options: "button", "spacer". Default is "button".

<div id="aiprompt"></div>
<script>
$("#aiprompt").kendoAIPrompt({
    outputActions: [
        { command: "export", text: "Export" },
        { type: "spacer" },
        { command: "delete", text: "Delete", themeColor: "error" }
    ]
});
</script>