@progress/kendo-ui
Version:
This package is part of the [Kendo UI for jQuery](http://www.telerik.com/kendo-ui) suite.
3 lines (2 loc) • 18.3 kB
JavaScript
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("kendo.core.js"),require("kendo.data.js"),require("kendo.icons.js"),require("kendo.textarea.js"),require("kendo.button.js"),require("kendo.toolbar.js"),require("kendo.popup.js"),require("kendo.speechtotextbutton.js"),require("kendo.skeletoncontainer.js")):"function"==typeof define&&define.amd?define(["exports","kendo.core.min","kendo.data.min","kendo.icons.min","kendo.textarea.min","kendo.button.min","kendo.toolbar.min","kendo.popup.min","kendo.speechtotextbutton.min","kendo.skeletoncontainer.min"],e):e(((t="undefined"!=typeof globalThis?globalThis:t||self).kendo=t.kendo||{},t.kendo._globals=t.kendo._globals||{},t.kendo._globals.Inlineaiprompt={}))}(this,(function(t){const e=[{id:"rewrite",text:"Rewrite",icon:"arrow-rotate-cw",prompt:t=>`Rewrite the selected text while preserving its original meaning and intent.\n\n Selected Text:\n ${t}`},{id:"fix-spelling",text:"Fix spelling",icon:"spell-checker",prompt:t=>`Correct any spelling, grammar, or punctuation mistakes in the selected text while preserving its original meaning and intent.\n\n Selected Text:\n ${t}`},{id:"change-tone",text:"Change tone",icon:"tell-a-friend",items:[{id:"change-tone-neutral",text:"Neutral",prompt:t=>`Adjust the tone of the following text to be more neutral while preserving its original meaning and intent.\n\n Selected Text:\n ${t}`},{id:"change-tone-friendly",text:"Friendly",prompt:t=>`Adjust the tone of the following text to be more friendly while preserving its original meaning and intent.\n\n Selected Text:\n ${t}`},{id:"change-tone-casual",text:"Casual",prompt:t=>`Adjust the tone of the following text to be more casual while preserving its original meaning and intent.\n\n Selected Text:\n ${t}`},{id:"change-tone-formal",text:"Formal",prompt:t=>`Adjust the tone of the following text to be more formal while preserving its original meaning and intent.\n\n Selected Text:\n ${t}`}]},{id:"adjust-length",text:"Adjust length",icon:"col-resize",items:[{id:"adjust-length-shorten",text:"Shorten",prompt:t=>`Shorten the following text while preserving its original meaning and intent.\n\n Selected Text:\n ${t}`},{id:"adjust-length-lengthen",text:"Lengthen",prompt:t=>`Lengthen the following text while preserving its original meaning and intent.\n\n Selected Text:\n ${t}`}]}];!function(t){let n=window.kendo,o=n.ui.Widget,i=n.ui.TextArea,r=n.ui.SpeechToTextButton,s=".kendoInlineAIPrompt",a=n.ui,l="promptRequest",p="promptResponse",c="promptRequestCancel",u="commandExecute",d="outputAction",m="show",f="hide",h="k-speech-to-text-button",g="k-generating",_="k-disabled",x="k-prompt-send",b="!k-align-items-start",$="aria-label",k="aria-disabled",y=e;var v=t.extend;let A=o.extend({init:function(t,e){let i=this;e=e||{},i.options.systemPrompt=e.systemPrompt||i.options.systemPrompt,o.fn.init.call(i,t,e),e.commands&&(i.options.commands=e.commands),i.transport=new n.data.AiTransport({service:i.options.service,success:i._serviceSuccess.bind(i),requestStart:t=>{i._progress(!0)}}),i._initPopup(),i._initContextMenu(),i._bindEvents(),n.notify(i)},options:{name:"InlineAIPrompt",enable:!0,outputActions:null,encodedPromptOutputs:!0,readonly:!1,placeholder:"",speechToText:!1,service:null,isStreaming:!1,systemPrompt:(t,e)=>`You are an advanced AI language assistant.\n A user has selected a portion of their text and provided a query regarding how they want it modified.\n Your task is to accurately respond to their request while preserving the original intent of the text.\n Follow the instructions strictly and provide only the requested output unless explicitly asked to explain your changes.\n\n Selected Text:\n ${t}\n\n User's Request:\n ${e}\n\n Response:`,commands:y,messages:{promptSend:"Prompt Send",stopOutputRetrieval:"Stop Output Retrieval",commandsMenu:"Commands Menu",retryOutputAction:"Retry",copyOutputAction:"Copy",discardOutputAction:"Discard"}},events:[l,p,c,u,d,m,f],value:function(t){let e=this;e._textArea.value(t),e._textArea.trigger("change"),e._togglePromptSend()},enable:function(t){"boolean"==typeof t&&this._textArea.enable(t)},readonly:function(t){"boolean"==typeof t&&this._textArea.readonly(t)},startStreaming:function(){this._progress(!0)},stopStreaming:function(){let t=this;t._progress(!1),t._togglePromptSend(),t._focusOutputActions()},updatePromptOutputContent:function(t){let e=this._popup.element.find(".k-card-body");const o=this.options.encodedPromptOutputs?n.htmlEncode(t):t;e.html(o)},open:function(t,e){let n=this;if("number"==typeof t&&"number"==typeof e)return void n._popup.open(t,e);const o=n._popup.options.anchor,i=n._popup.options.origin,r=n._popup.options.position;n._popup.options.anchor=n.element,n._popup.options.origin="bottom center",n._popup.options.position="top center",n._popup.open(),n._popup.options.anchor=o,n._popup.options.origin=i,n._popup.options.position=r,n._textArea.focus()},close:function(){this._popup.close()},_serviceSuccess:function(t){const e=this,o=e.options.responseTemplate,i=()=>"";if(n.isPresent(o)){let r=n.isFunction(o)?o(t):n.template(o||i)({response:t});e._popup.element.find(".k-card-body").html(r)}else{const o=e.options.encodedPromptOutputs?n.htmlEncode(t.output):t.output;e._popup.element.find(".k-card-body").html(o)}e._popup.element.find(".k-card").show(),e.trigger(p,{response:t}),e._progress(!1),e._togglePromptSend(),e._focusOutputActions()},_initTextArea:function(e){const o=this,r=o.options.messages.promptSend;let s,a=v({},{_isInInlineAIPrompt:!0,enable:o.options.enable,readonly:o.options.readonly,size:"medium",rounded:"medium",overflow:"auto",fillMode:"solid",placeholder:o.options.placeholder||"Edit, generate or explain...",maxRows:5,resize:"auto",layoutFlow:"horizontal",prefixOptions:{separator:!1,template:()=>`${o._renderPrefixTemplate()}`},suffixOptions:{separator:!1,template:()=>`\n ${n.html.renderButton(`<button role='button' class='${x} ${_}' ${$}='${r}' ${k}='true'></button>`,{icon:"paper-plane",fillMode:"flat"})}`}});if(s=new i(e,a),s._prefixContainer.addClass(b),s._suffixContainer.addClass(b),t('<span class="k-input-separator k-input-separator-vertical"></span>').insertBefore(t(s.element)),o.options.speechToText||o.options.speechToText&&void 0===a.speechToText){let t=s._prefixContainer.find(`.${h}`);o._initSpeechToTextButton(t)}return s},_renderPrefixTemplate:function(){let t="";const e=this.options.messages.commandsMenu;if(t+=n.html.renderButton(`<button role='button' title='${e}' ${$}='${e}'></button>`,{icon:"menu",fillMode:"flat"}),this.options.speechToText){t+=`<button role='button' title='Speech To Text' ${$}='Start speech recognition' class='${h}' id='${n.guid()}'></button>`}return t},_initSpeechToTextButton:function(t){const e=this;let n=v({},{fillMode:"flat",integrationMode:e.options.speechToText.integrationMode||"webSpeech",lang:"en-US",continuous:!1,interimResults:!1,maxAlternatives:1,result:function(t){if(t.isFinal&&t.alternatives&&t.alternatives.length>0){let n=e._textArea.value()||"",o=n+(n?" ":"")+t.alternatives[0].transcript;e._textArea.value(o),e._textArea.trigger("change"),e._togglePromptSend()}}},e.options.speechToText);e._speechToTextButton=new r(t,n)},_togglePromptSend:function(){let e=this._textArea;(e.value()||"").replace(/\s/g,"").length?t(e._suffixContainer).find(`.${x}`).removeClass(_).attr(k,!1):t(e._suffixContainer).find(`.${x}`).addClass(_).attr(k,!0)},_initPopup:function(){const e=this,o=t(e._template()),i=e.options.popup;n.isPresent(i)&&(i.width&&o.width(i.width),i.height&&o.height(i.height)),o.css({"max-width":"98vw"}),e._popup=new n.ui.Popup(o,{anchor:e.element,appendTo:i?.appendTo||document.body,isRtl:n.support.isRtl(e.element),animation:i?.animation||{open:{effects:"zoom:in",duration:200},close:{effects:"zoom:out",duration:200}},open:function(t){this.element.find(".k-card").hide(),this.element.find(".k-card-body").empty(),this.element.find(".k-input-inner").val(""),e._textArea.value(""),e._textArea.element.removeAttr("style"),e._togglePromptSend(),e.trigger(m,t)},close:function(t){n.ui.progress(e._popup.element,!1),e._aiContextMenu?.close(),e.trigger(f,t)}});let r=e._popup.element.find("textarea").first();e._textArea=e._initTextArea(r)},_input:function(t){let e=this,n=e._textArea,o=t.currentTarget.value;o!=e._textArea.value()&&(n.value(o),n.trigger("change"),e._togglePromptSend())},_template:function(){const t=`<textarea ${$}='Prompt' id='${n.guid()}'></textarea>`;return`<div class="k-child-animation-container">\n <div class="k-prompt-popup k-popup">\n <div class="k-prompt">\n <div class="k-prompt-content">\n <div class="k-prompt-view">\n <div class="k-card">\n <div class="k-card-body" style="max-height: 150px; overflow-y: auto;"></div>\n <div class="k-actions k-actions-start k-actions-horizontal k-card-actions">\n ${this._renderOutputActions()}\n </div>\n </div>\n ${t}\n </div>\n </div>\n </div>\n </div>\n </div>`},_renderOutputActions:function(){let t=this,e=t.options;const o=t.options.messages.copyOutputAction,i=t.options.messages.retryOutputAction,r=t.options.messages.discardOutputAction;if(n.isPresent(e.outputActions)&&e.outputActions.length){let s="";return e.outputActions.forEach((function(e){if("string"==typeof e)switch(e){case"copy":s+=n.html.renderButton(`<button role='button' title='${o}' ${$}='${o}' ${n.attr("action")}='copy'>${o}</button>`,{icon:"copy",fillMode:"flat",themeColor:"primary"});break;case"retry":s+=n.html.renderButton(`<button role='button' title='${i}' ${$}='${i}' ${n.attr("action")}='retry'>${i}</button>`,{icon:"arrow-rotate-cw",fillMode:"flat",themeColor:"primary"});break;case"discard":s+=n.html.renderButton(`<button role='button' title ='${r}' ${$}='${r}' ${n.attr("action")}='discard'>${r}</button>`,{icon:"cancel-outline",fillMode:"flat"})}else s+=n.html.renderButton(`<button role='button' ${null!=e?.title?`title=${e.title} ${$}=${e.title}`:""} ${n.attr("action")}='${e?.command}'>${e?.text||t._isDefaultOutputAction(e?.command)&&t.options.messages[e?.command+"OutputAction"]||e?.command}</button>`,{rounded:e?.rounded||"medium",icon:e?.icon||t._renderDefaultOutputActionIcon(e?.command),fillMode:e?.fillMode||"flat",themeColor:e?.themeColor||"primary"})})),s}if(t.options._isEditor){return`\n ${n.html.renderButton(`<button role='button' title='${o}' ${$}='${o}' ${n.attr("action")}='copy'>${o}</button>`,{icon:"copy",fillMode:"flat",themeColor:"primary"})}\n ${n.html.renderButton(`<button title='Insert' ${$}="Insert" ${n.attr("action")}='insert'>Insert</button>`,{icon:"insert-bottom",fillMode:"flat",themeColor:"primary"})}\n ${n.html.renderButton(`<button title='Replace' ${$}="Replace" ${n.attr("action")}='replace'>Replace</button>`,{icon:"check",fillMode:"flat",themeColor:"primary"})}\n ${n.html.renderButton(`<button title='Discard' ${$}='Discard' ${n.attr("action")}='discard'>Discard</button>`,{icon:"cancel-outline",fillMode:"flat"})}\n `}return`\n ${n.html.renderButton(`<button role='button' title='${o}' ${$}='${o}' ${n.attr("action")}='copy'>${o}</button>`,{icon:"copy",fillMode:"flat",themeColor:"primary"})}\n ${n.html.renderButton(`<button role='button' title='${i}' ${$}='${i}' ${n.attr("action")}='retry'>${i}</button>`,{icon:"arrow-rotate-cw",fillMode:"flat",themeColor:"primary"})}\n ${n.html.renderButton(`<button role='button' title='${r}' ${$}='${r}' ${n.attr("action")}='discard'>${r}</button>`,{icon:"cancel-outline",fillMode:"flat"})}\n `},_renderDefaultOutputActionIcon(t){if(this._isDefaultOutputAction(t))switch(t){case"copy":return"copy";case"discard":return"cancel-outline";case"retry":return"arrow-rotate-cw";default:return}},_isDefaultOutputAction(t){switch(t){case"copy":case"discard":case"retry":return!0;default:return!1}},_initContextMenu:function(){const e=this;if(!e.options.commands||0===e.options.commands?.length)return void e._popup.element.find(".k-input-prefix button").addClass("k-disabled");const n=e.options.commands.map((t=>e._createCommandHtml(t))).join(""),o=t(`<ul>\n ${n}\n </ul>`);t("body").append(o),e._aiContextMenu=o.kendoContextMenu({target:e._popup.element,anchor:e._popup.element,showOn:"click",appendTo:t(document.body),filter:".invalid",select:e._executeCommand.bind(e)}).data("kendoContextMenu")},_createCommandHtml:function(t){const e=this,o=e._renderCommandIcon(t.icon),i=t.text,r=(t.items||[]).map((t=>e._createCommandHtml(t))).join("");return`<li ${n.attr("name")}=${t.id}>${o} ${i}${r?"<ul>"+r+"</ul>":""}</li>`},_renderCommandIcon:function(t){return n.isPresent(t)?n.isFunction(t)?t():n.html.renderIcon({icon:t}):""},_executeCommand:function(t){const e=this;let o=e._findCommand(e.options.commands,t.item.getAttribute(n.attr("name"))),i={query:o.id,selection:""};if(e._clearSelectedCommands(e.options.commands),n.isPresent(e._textArea)){const t=e._textArea.value();n.isPresent(t)&&""!=t&&(i.selection=t)}e.trigger(u,i);const r=i.selection||i.context;if(n.isPresent(o.prompt)){const t=o.prompt(r);e._requestService(t),e._aiContextMenu?.close()}o.selected=!0},_clearSelectedCommands:function(t){const e=this;t.forEach((function(t){n.isPresent(t.items)&&t.items.length>0&&e._clearSelectedCommands(t.items),t.hasOwnProperty("selected")&&delete t.selected}))},_findCommand:function(t,e,n=!1){const o=this;for(let i of t){if(n&&i.selected)return i;if(i.id===e)return i;if(i.items){let t=o._findCommand(i.items,e,n);if(t)return t}}},_bindEvents:function(){const e=this,o=e._popup,i=o.element;e._textArea.element.on("input"+s,e._input.bind(e)),i.find(`.k-input-prefix button[aria-label='${e.options.messages.commandsMenu}']`).on("click",(function(){e._aiContextMenu?.open()})),e._textArea._suffixContainer.find(`.${x}`).on("click",(function(){const t=e._textArea.value();e._requestService(t)})),i.find(".k-card-actions button").on("click",(function(r){let s=i.find(".k-card-body"),a=s.text(),l=n.isPresent(e._textArea)?e._textArea.value():"",p=e._findCommand(e.options.commands,0,!0),c=n.isPresent(p)?p.prompt(l):l;const u=t(r.currentTarget).attr(n.attr("action"));switch(u){case"copy":navigator.clipboard.writeText(a),e.trigger(d,{action:u,content:a});break;case"retry":e._requestService(c),e.trigger(d,{action:u,content:a});break;case"discard":s.empty(),i.find(".k-card").hide(),i.find(".k-input-inner").val(""),e.trigger(d,{action:u,content:a}),o.close();break;default:e.trigger(d,{action:u,content:a})}}))},_stopOutputRetrievalButton:function(t){let e=this;if(t){let t=e.options.messages.stopOutputRetrieval,o=n.html.renderButton(`<button role='button' title='${t}' ${$}='${t}' class='${x} ${g}'></button>`,{icon:"stop-sm",fillMode:"flat"});e._textArea._suffixContainer.find(`.${x}`).replaceWith(o),e._textArea._suffixContainer.find(`.${g}`).on("click",(function(t){e.trigger(c,e)}))}else{let t=e.options.messages.promptSend,o=n.html.renderButton(`<button role='button' title="${t}" ${$}=${t} class='${x} ${_}'></button>`,{icon:"paper-plane",fillMode:"flat"});e._textArea._suffixContainer.find(`.${g}`).replaceWith(o),e._textArea._suffixContainer.find(`.${x}`).on("click",(function(t){const n=e._textArea.value();e._requestService(n)}))}},_progress:function(t){this._stopOutputRetrievalButton(t),this._toggleSkeleton(t)},_toggleSkeleton:function(e){let n=this;n.skeleton&&n.skeleton.remove(),e?(n.skeleton=t("<span class='k-skeleton k-rounded-md k-skeleton-pulse'></span>").css({width:"100%",height:"100%"}),n._textArea._suffixContainer.find(`.${g}`).wrap(n.skeleton)):n._textArea._suffixContainer.find(`.${x}`).unwrap()},_requestService:function(t){const e=this,n="";if(!t.trim())return;const o=n,i=e.options.systemPrompt(o,t);e.trigger(l,{prompt:i}),e.options.isStreaming&&e._popup.element.find(".k-card").show(),e.options.service&&e.transport.read({prompt:i,history:[],isRetry:!1})},_focusOutputActions(){let e=this,n=e._popup.element.find(".k-actions"),o=n.children("button");n.find(t(document.activeElement)).length?0==o.length&&e._textArea.focus():t(o).first().focus()},focus:function(){this.element.trigger("focus")},setOptions:function(t){let e=this;e.destroy(),n.deepExtend(this.options,t),e.init(e.element,t)},destroy:function(){let t=this;t._popup?.close(),t._textArea?.destroy(),t._speechToTextButton?.destroy(),t._aiContextMenu?.destroy(),t.toolbar?.destroy(),t._selectedView?.destroy(),t._popup?.destroy(),t.element.off(s),o.fn.destroy.call(t)}});a.plugin(A)}(window.kendo.jQuery);var n=kendo;t.__meta__={id:"inlineaiprompt",name:"InlineAIPrompt",category:"web",description:"The InlineAIPrompt component simplifies the incorporation of external AI services into apps.",depends:["core","icons","textarea","button","toolbar","popup","data","speechtotextbutton","skeletoncontainer"]},t.default=n,Object.defineProperty(t,"__esModule",{value:!0})}));
//# sourceMappingURL=kendo.inlineaiprompt.min.js.map