@progress/kendo-ui
Version:
This package is part of the [Kendo UI for jQuery](http://www.telerik.com/kendo-ui) suite.
217 lines (216 loc) • 8.2 kB
JavaScript
import "./kendo.core-B45DfgdW.js";
import "./kendo.icons.js";
import "./kendo.html.button.js";
//#region ../src/kendo.toolcall.js
const __meta__ = {
id: "toolcall",
name: "ToolCall",
category: "web",
description: "The ToolCall component.",
depends: [
"core",
"html.button",
"icons"
]
};
(function($, undefined) {
const kendo = window.kendo;
const Widget = kendo.ui.Widget;
const encode = kendo.htmlEncode;
const NS = ".kendoToolCall";
const EXPANDED_CHANGE = "expandedChange";
const ACTION = "action";
const STATE_COLORS = {
active: "info",
completed: "success",
awaitingApproval: "warning",
error: "error"
};
const ToolCall = Widget.extend({
init: function(element, options) {
const that = this;
Widget.fn.init.call(that, element, options);
that._render();
that._bindEvents();
kendo.notify(that);
},
options: {
name: "ToolCall",
svgIcon: "wrench",
label: null,
secondaryLabel: null,
state: "active",
expandable: false,
expanded: false,
parameters: null,
result: null,
approvalText: null,
errorText: null,
statusSVGIcon: null,
parametersTemplate: null,
approvalTemplate: null,
resultTemplate: null,
errorTemplate: null,
messages: {
states: {
active: "Active",
completed: "Completed",
awaitingApproval: "Awaiting Approval",
error: "Error"
},
approve: "Approve",
reject: "Reject",
parametersLabel: "Parameters",
resultLabel: "Result"
}
},
events: [EXPANDED_CHANGE, ACTION],
_render: function() {
const that = this;
const opts = that.options;
that.element.addClass("k-agent-step k-tool-call").toggleClass("k-agent-completed", opts.state === "completed");
that.element.html(that._headHtml());
that._head = that.element.find(".k-agent-step-head");
that._head.find(".k-svg-icon").attr("aria-hidden", "true");
that._body = $(`<div class="k-agent-step-body"></div>`);
that._renderBody();
if (opts.expanded) that._body.appendTo(that.element);
},
_headHtml: function() {
const opts = this.options;
const headExpandedAttr = opts.expandable ? ` aria-expanded="${!!opts.expanded}"` : "";
const labelHtml = opts.label ? `<span class="k-agent-step-label">${encode(opts.label)}</span>` : "";
const secondaryHtml = opts.secondaryLabel ? `<span class="k-agent-step-sep">·</span><span class="k-agent-step-secondary">${encode(opts.secondaryLabel)}</span>` : "";
const stateLabel = opts.messages.states && opts.messages.states[opts.state] || opts.state;
const stateColor = STATE_COLORS[opts.state] || "info";
let badgeHtml = "";
if (opts.state !== "active") {
const iconName = opts.statusSVGIcon || {
completed: "check-circle",
awaitingApproval: "clock",
error: "exclamation-circle"
}[opts.state];
const iconHtml = iconName ? kendo.ui.icon({
icon: iconName,
iconClass: "k-badge-icon"
}) : "";
badgeHtml = `<span class="k-badge k-badge-sm k-badge-${encode(stateColor)} k-rounded-full">${iconHtml}${encode(stateLabel)}</span>`;
}
const expandIconHtml = opts.expandable ? kendo.ui.icon({
icon: opts.expanded ? "chevron-up" : "chevron-right",
iconClass: "k-agent-step-expand"
}) : "";
return `<button class="k-agent-step-head"${headExpandedAttr}>` + kendo.ui.icon({
icon: opts.svgIcon,
iconClass: "k-agent-step-icon"
}) + `<span class="k-agent-step-content">` + labelHtml + secondaryHtml + badgeHtml + expandIconHtml + "</span></button>";
},
_renderBody: function() {
const that = this;
const opts = that.options;
let html = "";
if (opts.parameters !== null) html += that._parametersHtml();
if (opts.state === "awaitingApproval") html += that._approvalHtml();
if (opts.result !== null) html += that._resultHtml();
if (opts.state === "error") html += that._errorHtml();
that._body.html(html);
that._body.find(".k-svg-icon").attr("aria-hidden", "true");
},
_parametersHtml: function() {
const opts = this.options;
if (opts.parametersTemplate !== null) {
const tmpl = opts.parametersTemplate;
return `<div class="k-tool-call-parameters"><div class="k-tool-call-label">${encode(opts.messages.parametersLabel)}</div>${tmpl(opts)}</div>`;
}
return `<div class="k-tool-call-parameters"><div class="k-tool-call-label">${encode(opts.messages.parametersLabel)}</div><pre class="k-pre"><code class="k-code">${encode(JSON.stringify(opts.parameters, null, 2))}</code></pre></div>`;
},
_approvalHtml: function() {
const opts = this.options;
if (opts.approvalTemplate !== null) return `<div class="k-tool-call-approval">${opts.approvalTemplate(opts)}</div>`;
return `<div class="k-tool-call-approval"><div class="k-card">${opts.approvalText ? `<div class="k-card-body"><p>${encode(opts.approvalText)}</p></div>` : ""}<div class="k-actions k-actions-end k-actions-horizontal k-card-actions">${kendo.html.renderButton(`<button class="k-tool-call-reject" data-action="reject">${encode(opts.messages.reject || "Reject")}</button>`, { fillMode: "outline" })}${kendo.html.renderButton(`<button class="k-tool-call-approve" data-action="approve">${encode(opts.messages.approve || "Approve")}</button>`, {
fillMode: "solid",
themeColor: "primary"
})}</div></div></div>`;
},
_resultHtml: function() {
const opts = this.options;
if (opts.resultTemplate !== null) {
const tmpl = opts.resultTemplate;
return `<div class="k-tool-call-result"><div class="k-tool-call-label">${encode(opts.messages.resultLabel)}</div>${tmpl(opts)}</div>`;
}
return `<div class="k-tool-call-result"><div class="k-tool-call-label">${encode(opts.messages.resultLabel)}</div><pre class="k-pre"><code class="k-code">${encode(JSON.stringify(opts.result, null, 2))}</code></pre></div>`;
},
_errorHtml: function() {
const opts = this.options;
if (opts.errorTemplate !== null) return `<div class="k-tool-call-error">${opts.errorTemplate(opts)}</div>`;
if (opts.errorText) return `<div class="k-messagebox k-messagebox-error">${encode(opts.errorText)}</div>`;
return "";
},
_bindEvents: function() {
const that = this;
if (that.options.expandable) that._head.on("click.kendoToolCall", that._onToggle.bind(that)).on("keydown.kendoToolCall", that._onKeydown.bind(that));
that._body.on("click.kendoToolCall", "[data-action]", that._onAction.bind(that));
},
_onToggle: function() {
const that = this;
const expand = !that.options.expanded;
if (!that.trigger(EXPANDED_CHANGE, { expanded: expand })) that.toggle(expand);
},
_onKeydown: function(e) {
const that = this;
if (e.keyCode === kendo.keys.ENTER || e.keyCode === kendo.keys.SPACEBAR) {
that._onToggle();
e.preventDefault();
}
},
_onAction: function(e) {
const that = this;
const action = $(e.currentTarget).data("action");
that.trigger(ACTION, { action });
},
toggle: function(expand) {
const that = this;
if (expand === undefined) expand = !that.options.expanded;
that.options.expanded = expand;
if (that.options.expandable) {
that._head.attr("aria-expanded", expand);
const newIcon = $(kendo.ui.icon({
icon: expand ? "chevron-up" : "chevron-right",
iconClass: "k-agent-step-expand"
})).attr("aria-hidden", "true");
that._head.find(".k-agent-step-expand").replaceWith(newIcon);
}
if (expand) that._body.appendTo(that.element);
else that._body.detach();
},
expand: function() {
if (this.options.expandable) this.toggle(true);
},
collapse: function() {
this.toggle(false);
},
setState: function(state) {
const that = this;
if (that._head) that._head.off(NS);
if (that._body) {
that._body.off(NS);
that._body.detach();
}
that.options.state = state;
that.options.expanded = false;
that._render();
that._bindEvents();
},
destroy: function() {
const that = this;
if (that._head) that._head.off(NS);
if (that._body) that._body.off(NS);
that.element.off(NS);
Widget.fn.destroy.call(that);
}
});
kendo.ui.plugin(ToolCall);
})(window.kendo.jQuery);
var kendo_toolcall_default = kendo;
//#endregion
export { __meta__, kendo_toolcall_default as default };