@progress/kendo-vue-conversational-ui 7.0.0-develop.3 → 7.0.0-develop.4

package/ai-prompt/AIPrompt.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("vue"),c=require("./AIPromptHeader.js"),m=require("./views/AIPromptView.js"),u=require("./views/AIPromptOutputView.js"),i=require("@progress/kendo-vue-common"),p=o.defineComponent({name:"KendoAIPrompt",props:{activeView:{type:String,required:!0},dir:String,toolbarItems:Array,outputs:Array,promptPlaceholder:String},provide(){return{kendoAIPrompt:this.$data.contextState}},data(){return{contextState:{activeView:this.$props.activeView,onActiveViewChange:this.onActiveViewChange,onPromptRequest:this.onPromptRequest,onCommandExecute:this.onCommandExecute,onStateAction:this.onStateAction}}},watch:{activeView(t){this.contextState.activeView=t}},methods:{onStateAction(t){this.contextState.activeView=t.activeView},onActiveViewChange(t){this.$emit("activeviewchange",t)},onPromptRequest(t,e){this.$emit("promptrequest",t,e)},onCommandExecute(t){this.$emit("commandexecute",t)}},render(){const t=i.getDefaultSlots(this),{toolbarItems:e,dir:r}=this.$props,a=(e||[m.promptViewDefaults,u.outputViewDefaults]).map(n=>{const s=i.templateRendering.call(this,n.content,i.getListeners.call(this));return{...n,content:s}});return o.createVNode("div",{class:"k-prompt",dir:r},[o.createVNode(c.AIPromptHeader,{activeView:this.contextState.activeView,toolbarItems:a,onActiveviewchange:this.onActiveViewChange},null),t])}});exports.AIPrompt=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("vue"),m=require("./AIPromptHeader.js"),a=require("./views/constants.js"),i=require("@progress/kendo-vue-common"),p=o.defineComponent({name:"KendoAIPrompt",props:{activeView:{type:String,required:!0},dir:String,toolbarItems:Array,outputs:Array,promptPlaceholder:String,streaming:Boolean,loading:Boolean},provide(){return{kendoAIPrompt:this.$data.contextState}},data(){return{contextState:{activeView:this.$props.activeView,streaming:this.$props.streaming,loading:this.$props.loading,onCancel:this.onCancel,onActiveViewChange:this.onActiveViewChange,onPromptRequest:this.onPromptRequest,onCommandExecute:this.onCommandExecute,onStateAction:this.onStateAction}}},watch:{activeView(t){this.contextState.activeView=t},streaming(t){this.contextState.streaming=t},loading(t){this.contextState.loading=t}},methods:{onStateAction(t){this.contextState.activeView=t.activeView},onActiveViewChange(t){this.$emit("activeviewchange",t)},onPromptRequest(t,e){this.$emit("promptrequest",t,e)},onCommandExecute(t){this.$emit("commandexecute",t)},onCancel(){this.$emit("cancel")}},render(){const t=i.getDefaultSlots(this),{toolbarItems:e,dir:r}=this.$props,s=(e||[a.promptViewDefaults,a.outputViewDefaults]).map(n=>{const c=i.templateRendering.call(this,n.content,i.getListeners.call(this));return{...n,content:c}});return o.createVNode("div",{class:"k-prompt",dir:r},[o.createVNode(m.AIPromptHeader,{activeView:this.contextState.activeView,toolbarItems:s,onActiveviewchange:this.onActiveViewChange},null),t])}});exports.AIPrompt=p;

package/ai-prompt/AIPrompt.mjs

@@ -7,10 +7,9 @@
  */
 import { defineComponent as s, createVNode as i } from "vue";
 import { AIPromptHeader as c } from "./AIPromptHeader.mjs";
-import { promptViewDefaults as m } from "./views/AIPromptView.mjs";
-import { outputViewDefaults as p } from "./views/AIPromptOutputView.mjs";
-import { getDefaultSlots as h, templateRendering as u, getListeners as d } from "@progress/kendo-vue-common";
-const g = /* @__PURE__ */ s({
+import { promptViewDefaults as m, outputViewDefaults as p } from "./views/constants.mjs";
+import { getDefaultSlots as h, templateRendering as l, getListeners as d } from "@progress/kendo-vue-common";
+const V = /* @__PURE__ */ s({
   name: "KendoAIPrompt",
   props: {
     activeView: {
@@ -20,7 +19,9 @@ const g = /* @__PURE__ */ s({
     dir: String,
     toolbarItems: Array,
     outputs: Array,
-    promptPlaceholder: String
+    promptPlaceholder: String,
+    streaming: Boolean,
+    loading: Boolean
   },
   provide() {
     return {
@@ -31,6 +32,9 @@ const g = /* @__PURE__ */ s({
     return {
       contextState: {
         activeView: this.$props.activeView,
+        streaming: this.$props.streaming,
+        loading: this.$props.loading,
+        onCancel: this.onCancel,
         onActiveViewChange: this.onActiveViewChange,
         onPromptRequest: this.onPromptRequest,
         onCommandExecute: this.onCommandExecute,
@@ -41,6 +45,12 @@ const g = /* @__PURE__ */ s({
   watch: {
     activeView(t) {
       this.contextState.activeView = t;
+    },
+    streaming(t) {
+      this.contextState.streaming = t;
+    },
+    loading(t) {
+      this.contextState.loading = t;
     }
   },
   methods: {
@@ -55,17 +65,20 @@ const g = /* @__PURE__ */ s({
     },
     onCommandExecute(t) {
       this.$emit("commandexecute", t);
+    },
+    onCancel() {
+      this.$emit("cancel");
     }
   },
   render() {
     const t = h(this), {
       toolbarItems: e,
       dir: n
-    } = this.$props, r = (e || [m, p]).map((o) => {
-      const a = u.call(this, o.content, d.call(this));
+    } = this.$props, a = (e || [m, p]).map((o) => {
+      const r = l.call(this, o.content, d.call(this));
       return {
         ...o,
-        content: a
+        content: r
       };
     });
     return i("div", {
@@ -73,11 +86,11 @@ const g = /* @__PURE__ */ s({
       dir: n
     }, [i(c, {
       activeView: this.contextState.activeView,
-      toolbarItems: r,
+      toolbarItems: a,
       onActiveviewchange: this.onActiveViewChange
     }, null), t]);
   }
 });
 export {
-  g as AIPrompt
+  V as AIPrompt
 };

package/ai-prompt/AIPromptContent.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),o=require("@progress/kendo-vue-common"),n=e.defineComponent({name:"KendoAIPromptContent",render(){const t=o.getDefaultSlots(this);return e.createVNode("div",{class:"k-prompt-content"},[e.createVNode("div",{class:"k-prompt-view"},[t])])}});exports.AIPromptContent=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),n=require("@progress/kendo-vue-common"),s=require("@progress/kendo-svg-icons"),i=require("@progress/kendo-vue-buttons"),r=require("./views/constants.js"),a=e.defineComponent({name:"KendoAIPromptContent",props:{onCancel:Function,streaming:Boolean},inject:{kendoAIPrompt:{default:null}},computed:{showFloatingButton(){var o;const t=((o=this.kendoAIPrompt)==null?void 0:o.activeView)===r.outputViewDefaults.name;return this.streaming&&t}},methods:{handleKeyDown(t){t.key==="Escape"&&this.showFloatingButton&&this.onCancel&&(t.preventDefault(),this.$props.onCancel())}},render(){const t=n.getDefaultSlots(this);return e.createVNode("div",{class:"k-prompt-content",onKeydown:this.handleKeyDown},[this.showFloatingButton&&e.createVNode(i.FloatingActionButton,{onClick:this.onCancel,svgIcon:s.stopSmIcon,size:"small",positionMode:"absolute",class:"k-prompt-stop-fab k-generating"},null),e.createVNode("div",{class:"k-prompt-view"},[t])])}});exports.AIPromptContent=a;

package/ai-prompt/AIPromptContent.mjs

@@ -5,19 +5,50 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as e, createVNode as t } from "vue";
-import { getDefaultSlots as n } from "@progress/kendo-vue-common";
-const p = /* @__PURE__ */ e({
+import { defineComponent as e, createVNode as o } from "vue";
+import { getDefaultSlots as i } from "@progress/kendo-vue-common";
+import { stopSmIcon as s } from "@progress/kendo-svg-icons";
+import { FloatingActionButton as r } from "@progress/kendo-vue-buttons";
+import { outputViewDefaults as a } from "./views/constants.mjs";
+const d = /* @__PURE__ */ e({
   name: "KendoAIPromptContent",
+  props: {
+    onCancel: Function,
+    streaming: Boolean
+  },
+  inject: {
+    kendoAIPrompt: {
+      default: null
+    }
+  },
+  computed: {
+    showFloatingButton() {
+      var n;
+      const t = ((n = this.kendoAIPrompt) == null ? void 0 : n.activeView) === a.name;
+      return this.streaming && t;
+    }
+  },
+  methods: {
+    handleKeyDown(t) {
+      t.key === "Escape" && this.showFloatingButton && this.onCancel && (t.preventDefault(), this.$props.onCancel());
+    }
+  },
   render() {
-    const o = n(this);
-    return t("div", {
-      class: "k-prompt-content"
-    }, [t("div", {
+    const t = i(this);
+    return o("div", {
+      class: "k-prompt-content",
+      onKeydown: this.handleKeyDown
+    }, [this.showFloatingButton && o(r, {
+      onClick: this.onCancel,
+      svgIcon: s,
+      size: "small",
+      positionMode: "absolute",
+      class: "k-prompt-stop-fab k-generating"
+    }, null), o("div", {
       class: "k-prompt-view"
-    }, [o])]);
+    }, [t])]);
   }
 });
 export {
-  p as AIPromptContent
+  d as AIPromptContent
 };

package/ai-prompt/AIPromptHeader.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("vue"),n=require("@progress/kendo-vue-common"),r=require("@progress/kendo-vue-buttons");function c(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!o.isVNode(e)}const s=o.defineComponent({name:"KendoAIPromptHeader",props:{activeView:String,toolbarItems:Array,onActiveviewchange:Function},methods:{handleClick(e){this.$emit("activeviewchange",e)}},render(){let e;const{activeView:a,toolbarItems:l}=this.$props;return o.createVNode("div",{class:"k-prompt-header"},[o.createVNode(r.Toolbar,{overflow:"none",keyboardNavigation:!1,class:"k-toolbar-flat"},c(e=l.map(function(t){const i=n.getTemplate.call(this,{h:o.h,template:t.content,defaultRendering:null,additionalProps:{item:t}});return t.content?i:o.createVNode(r.Button,{type:"button",key:t.name,class:n.classNames("k-toolbar-item",{"k-selected":a===t.name}),size:"medium",themeColor:"primary",fillMode:"flat",rounded:"full",title:t.buttonText,svgIcon:t.buttonIcon,"aria-hidden":"true",onClick:()=>this.handleClick(t.name)},{default:()=>[t.buttonText]})},this))?e:{default:()=>[e]})])}});exports.AIPromptHeader=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("vue"),n=require("@progress/kendo-vue-common"),r=require("@progress/kendo-vue-buttons");function i(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!o.isVNode(e)}const s=o.defineComponent({name:"KendoAIPromptHeader",props:{activeView:String,toolbarItems:Array,onActiveviewchange:Function},methods:{handleClick(e){this.$emit("activeviewchange",e)}},render(){let e;const{activeView:a,toolbarItems:l}=this.$props;return o.createVNode("div",{class:"k-prompt-header"},[o.createVNode(r.Toolbar,{overflow:"none",keyboardNavigation:!1,class:"k-toolbar-flat"},i(e=l.map(function(t){const c=n.getTemplate.call(this,{h:o.h,template:t.content,defaultRendering:null,additionalProps:{item:t}});return t.content?c:o.createVNode(r.Button,{type:"button",key:t.name,class:n.classNames("k-toolbar-item",{"k-selected":a===t.name}),size:"medium",themeColor:"primary",fillMode:"flat",rounded:"full",title:t.buttonText,svgIcon:t.buttonIcon,onClick:()=>this.handleClick(t.name)},{default:()=>[t.buttonText]})},this))?e:{default:()=>[e]})])}});exports.AIPromptHeader=s;

package/ai-prompt/AIPromptHeader.mjs

@@ -56,7 +56,6 @@ const v = /* @__PURE__ */ l({
         rounded: "full",
         title: e.buttonText,
         svgIcon: e.buttonIcon,
-        "aria-hidden": "true",
         onClick: () => this.handleClick(e.name)
       }, {
         default: () => [e.buttonText]

package/ai-prompt/views/AIPromptCommandsView.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),c=require("../AIPromptContent.js"),d=require("./AIPromptViewRender.js"),s=require("@progress/kendo-svg-icons"),i=require("@progress/kendo-vue-layout"),t={name:"commands-view",buttonIcon:s.moreHorizontalIcon},u=e.defineComponent({name:"KendoAIPromptCommandsView",props:{commands:Array},inject:{kendoAIPrompt:{default:null}},render(){const{commands:m}=this.$props,r=a=>{var n;const o=a.target;!((n=o.items)!=null&&n.length)&&this.kendoAIPrompt.onCommandExecute&&(this.$emit("commandexecute",o),this.kendoAIPrompt.onCommandExecute.call(null,o))};return e.createVNode(d.AIPromptViewRender,{name:t.name},{default:()=>[e.createVNode(c.AIPromptContent,null,{default:()=>[e.createVNode("div",{class:"k-prompt-view"},[e.createVNode(i.PanelBar,{onSelect:r,items:m},null)])]})]})}});exports.AIPromptCommandsView=u;exports.commandsViewDefaults=t;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),a=require("../AIPromptContent.js"),s=require("./AIPromptViewRender.js"),d=require("./constants.js"),c=require("@progress/kendo-vue-layout"),i=t.defineComponent({name:"KendoAIPromptCommandsView",props:{commands:Array},inject:{kendoAIPrompt:{default:null}},render(){const{commands:m}=this.$props,r=o=>{var n;const e=o.target;!((n=e.items)!=null&&n.length)&&this.kendoAIPrompt.onCommandExecute&&(this.$emit("commandexecute",e),this.kendoAIPrompt.onCommandExecute.call(null,e))};return t.createVNode(s.AIPromptViewRender,{name:d.commandsViewDefaults.name},{default:()=>{var o,e;return[t.createVNode(a.AIPromptContent,{streaming:(o=this.kendoAIPrompt)==null?void 0:o.streaming,onCancel:(e=this.kendoAIPrompt)==null?void 0:e.onCancel},{default:()=>[t.createVNode("div",{class:"k-prompt-view"},[t.createVNode(c.PanelBar,{onSelect:r,items:m},null)])]})]}})}});exports.AIPromptCommandsView=i;

package/ai-prompt/views/AIPromptCommandsView.mjs

@@ -5,15 +5,12 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as a, createVNode as o } from "vue";
+import { defineComponent as a, createVNode as m } from "vue";
 import { AIPromptContent as i } from "../AIPromptContent.mjs";
 import { AIPromptViewRender as d } from "./AIPromptViewRender.mjs";
-import { moreHorizontalIcon as c } from "@progress/kendo-svg-icons";
-import { PanelBar as s } from "@progress/kendo-vue-layout";
-const l = {
-  name: "commands-view",
-  buttonIcon: c
-}, C = /* @__PURE__ */ a({
+import { commandsViewDefaults as s } from "./constants.mjs";
+import { PanelBar as p } from "@progress/kendo-vue-layout";
+const C = /* @__PURE__ */ a({
   name: "KendoAIPromptCommandsView",
   props: {
     commands: Array
@@ -26,26 +23,31 @@ const l = {
   render() {
     const {
       commands: n
-    } = this.$props, t = (r) => {
-      var e;
-      const m = r.target;
-      !((e = m.items) != null && e.length) && this.kendoAIPrompt.onCommandExecute && (this.$emit("commandexecute", m), this.kendoAIPrompt.onCommandExecute.call(null, m));
+    } = this.$props, r = (e) => {
+      var t;
+      const o = e.target;
+      !((t = o.items) != null && t.length) && this.kendoAIPrompt.onCommandExecute && (this.$emit("commandexecute", o), this.kendoAIPrompt.onCommandExecute.call(null, o));
     };
-    return o(d, {
-      name: l.name
+    return m(d, {
+      name: s.name
     }, {
-      default: () => [o(i, null, {
-        default: () => [o("div", {
-          class: "k-prompt-view"
-        }, [o(s, {
-          onSelect: t,
-          items: n
-        }, null)])]
-      })]
+      default: () => {
+        var e, o;
+        return [m(i, {
+          streaming: (e = this.kendoAIPrompt) == null ? void 0 : e.streaming,
+          onCancel: (o = this.kendoAIPrompt) == null ? void 0 : o.onCancel
+        }, {
+          default: () => [m("div", {
+            class: "k-prompt-view"
+          }, [m(p, {
+            onSelect: r,
+            items: n
+          }, null)])]
+        })];
+      }
     });
   }
 });
 export {
-  C as AIPromptCommandsView,
-  l as commandsViewDefaults
+  C as AIPromptCommandsView
 };

package/ai-prompt/views/AIPromptOutputView.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),I=require("../AIPromptContent.js"),s=require("../../messages/main.js"),f=require("./AIPromptViewRender.js"),i=require("@progress/kendo-vue-layout"),r=require("@progress/kendo-svg-icons"),a=require("@progress/kendo-vue-buttons"),g=require("@progress/kendo-vue-intl"),c=require("@progress/kendo-vue-common");function C(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!t.isVNode(e)}let V=function(e){return e.positive="positive",e.negative="negative",e}({});const p={name:"output-view",buttonText:"Output",buttonIcon:r.commentIcon},b=t.defineComponent({name:"KendoAIPromptOutputView",emits:{copy:null,retry:null,rating:null},props:{outputs:Array,outputCard:[String,Function,Object],showOutputRating:Boolean},inject:{kendoAIPrompt:{default:null},kendoLocalizationService:{default:null}},data(){return{copiedIndex:-1,copyButtonIcon:r.copyIcon}},methods:{retryPrompt(e){this.$emit("retry",e),this.kendoAIPrompt.onPromptRequest&&this.kendoAIPrompt.onPromptRequest.call(null,e.prompt,{...e,isRetry:!0})},copyToClipboard(e,n){e!=null&&e.responseContent&&navigator.clipboard.writeText(e.responseContent),this.copiedIndex=n,this.copyButtonIcon=r.checkIcon,this.$emit("copy",e==null?void 0:e.responseContent),setTimeout(()=>{this.copyButtonIcon=r.copyIcon,this.copiedIndex=-1},1e3)},outputRating(e,n){this.$emit("rating",e,n),this.kendoAIPrompt.onPromptRequest&&this.kendoAIPrompt.onPromptRequest.call(null,e.prompt,{...e,ratingType:n,isRetry:!1})}},render(){let e;const{outputs:n,showOutputRating:l,outputCard:u}=this.$props,m=g.provideLocalizationService(this),h=c.templateRendering.call(this,u,c.getListeners.call(this));return t.createVNode(f.AIPromptViewRender,{name:p.name},{default:()=>[t.createVNode(I.AIPromptContent,null,{default:()=>[t.createVNode("div",{class:"k-card-list"},[n&&n.length>0?n.map(function(o,d){const y=c.getTemplate.call(this,{h:t.h,template:h,defaultRendering:null,additionalProps:{output:o}});return u?y:t.createVNode(i.Card,{key:o.id,class:o.class},{default:()=>[t.createVNode(i.CardHeader,null,{default:()=>[o.title&&t.createVNode(i.CardTitle,null,{default:()=>[o.title]}),o.subTitle&&t.createVNode(i.CardSubtitle,null,{default:()=>[o.subTitle]})]}),t.createVNode(i.CardBody,null,{default:()=>[o.responseContent]}),t.createVNode(i.CardActions,null,{default:()=>[t.createVNode(a.Button,{type:"button",size:"medium",themeColor:"primary",fillMode:"flat",rounded:"medium",title:"Copy",svgIcon:this.copiedIndex===d?this.copyButtonIcon:r.copyIcon,"aria-hidden":"true",onClick:()=>this.copyToClipboard(o,d)},{default:()=>["Copy"]}),t.createVNode(a.Button,{type:"button",size:"medium",themeColor:"base",fillMode:"flat",rounded:"medium",title:"Retry",svgIcon:r.rotateIcon,"aria-hidden":"true",onClick:()=>this.retryPrompt(o,d)},{default:()=>["Retry"]}),l&&t.createVNode("span",{class:"k-spacer"},null),l&&t.createVNode(a.Button,{type:"button",size:"medium",themeColor:o.ratingType==="positive"?"primary":"base",fillMode:"flat",rounded:"medium",title:"Rate up",svgIcon:r.thumbUpOutlineIcon,"aria-hidden":"true",onClick:()=>this.outputRating(o,"positive")},null),l&&t.createVNode(a.Button,{type:"button",size:"medium",themeColor:o.ratingType==="negative"?"primary":"base",fillMode:"flat",rounded:"medium",title:"Rate down",svgIcon:r.thumbDownOutlineIcon,"aria-hidden":"true",onClick:()=>this.outputRating(o,"negative")},null)]})]})},this):t.createVNode(i.Card,null,{default:()=>[t.createVNode(i.CardBody,null,C(e=m.toLanguageString(s.aIPromptNoOutputs,s.messages[s.aIPromptNoOutputs]))?e:{default:()=>[e]})]})])]})]})}});exports.AIPromptOutputRating=V;exports.AIPromptOutputView=b;exports.outputViewDefaults=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),C=require("../AIPromptContent.js"),c=require("../../messages/main.js"),g=require("./AIPromptViewRender.js"),N=require("./constants.js"),n=require("@progress/kendo-vue-layout"),l=require("@progress/kendo-svg-icons"),s=require("@progress/kendo-vue-buttons"),P=require("@progress/kendo-vue-intl");function b(t){return typeof t=="function"||Object.prototype.toString.call(t)==="[object Object]"&&!e.isVNode(t)}let R=function(t){return t.positive="positive",t.negative="negative",t}({});const v=e.defineComponent({name:"KendoAIPromptOutputView",emits:{copy:null,retry:null,rating:null},props:{outputs:Array,outputCard:Object,showOutputRating:Boolean},inject:{kendoAIPrompt:{default:null},kendoLocalizationService:{default:null}},data(){return{copiedIndex:-1,copyButtonIcon:l.copyIcon,contentRef:null}},methods:{retryPrompt(t){this.$emit("retry",t),this.kendoAIPrompt.onPromptRequest&&this.kendoAIPrompt.onPromptRequest.call(null,t.prompt,{...t,isRetry:!0}),this.scrollToTopOutput()},copyToClipboard(t,r){t!=null&&t.responseContent&&navigator.clipboard.writeText(t.responseContent),this.copiedIndex=r,this.copyButtonIcon=l.checkIcon,this.$emit("copy",t==null?void 0:t.responseContent),setTimeout(()=>{this.copyButtonIcon=l.copyIcon,this.copiedIndex=-1},1e3)},outputRating(t,r){this.$emit("rating",t,r),this.kendoAIPrompt.onPromptRequest&&this.kendoAIPrompt.onPromptRequest.call(null,t.prompt,{...t,ratingType:r,isRetry:!1}),this.scrollToTopOutput()},scrollToTopOutput(){var t,r;(r=(t=this.contentRef)==null?void 0:t.scrollTo)==null||r.call(t,{top:0,behavior:"smooth"})}},render(){let t;const{outputs:r,showOutputRating:k,outputCard:y}=this.$props,f=P.provideLocalizationService(this),{header:u,body:p,actions:m}=y||{},I=e.createVNode(n.Card,null,{default:()=>[e.createVNode(n.CardHeader,null,{default:()=>[e.createVNode(n.CardTitle,null,{default:()=>[e.createVNode("span",{class:"k-skeleton k-skeleton-text k-skeleton-pulse",style:{width:"200px"}},null)]}),e.createVNode(n.CardSubtitle,null,{default:()=>[e.createVNode("span",{class:"k-skeleton k-skeleton-text k-skeleton-pulse",style:{width:"100%"}},null)]})]}),e.createVNode(n.CardBody,null,{default:()=>[e.createVNode("span",{class:"k-skeleton k-skeleton-rect k-skeleton-pulse",style:{height:"80px"}},null)]}),e.createVNode(n.CardActions,null,{default:()=>[e.createVNode("span",{class:"k-skeleton k-skeleton-text k-skeleton-pulse",style:{width:"100%"}},null)]})]}),d=r==null?void 0:r.map((o,a)=>e.createVNode(n.Card,{key:`${o.id}_${a}`,class:o.class},{default:()=>[e.createVNode(n.CardHeader,null,{default:()=>[u?u(o):e.createVNode(e.Fragment,null,[o.title&&e.createVNode(n.CardTitle,null,{default:()=>[o.title]}),o.subTitle&&e.createVNode(n.CardSubtitle,null,{default:()=>[o.subTitle]})])]}),e.createVNode(n.CardBody,null,{default:()=>[p?p(o):o.responseContent]}),e.createVNode(n.CardActions,null,{default:()=>[m?m(o):e.createVNode(e.Fragment,null,[e.createVNode(s.Button,{type:"button",size:"medium",themeColor:"primary",fillMode:"flat",rounded:"medium",title:"Copy",svgIcon:this.copiedIndex===a?this.copyButtonIcon:l.copyIcon,"aria-hidden":"true",onClick:()=>this.copyToClipboard(o,a)},{default:()=>["Copy"]}),e.createVNode(s.Button,{type:"button",size:"medium",themeColor:"base",fillMode:"flat",rounded:"medium",title:"Retry",svgIcon:l.arrowRotateCwIcon,"aria-hidden":"true",onClick:()=>this.retryPrompt(o)},{default:()=>["Retry"]}),k&&e.createVNode(e.Fragment,null,[e.createVNode("span",{class:"k-spacer"},null),e.createVNode(s.Button,{type:"button",size:"medium",themeColor:o.ratingType==="positive"?"primary":"base",fillMode:"flat",rounded:"medium",title:"Rate up",svgIcon:l.thumbUpOutlineIcon,"aria-hidden":"true",onClick:()=>this.outputRating(o,"positive")},null),e.createVNode(s.Button,{type:"button",size:"medium",themeColor:o.ratingType==="negative"?"primary":"base",fillMode:"flat",rounded:"medium",title:"Rate down",svgIcon:l.thumbDownOutlineIcon,"aria-hidden":"true",onClick:()=>this.outputRating(o,"negative")},null)])])]})]})),V=e.createVNode(n.Card,null,{default:()=>[e.createVNode(n.CardBody,null,b(t=f.toLanguageString(c.aIPromptNoOutputs,c.messages[c.aIPromptNoOutputs]))?t:{default:()=>[t]})]});return e.createVNode(g.AIPromptViewRender,{name:N.outputViewDefaults.name},{default:()=>{var o,a;return[e.createVNode(C.AIPromptContent,{ref:i=>this.contentRef=i,streaming:(o=this.kendoAIPrompt)==null?void 0:o.streaming,onCancel:(a=this.kendoAIPrompt)==null?void 0:a.onCancel},{default:()=>{var i,h;return[e.createVNode("div",{class:"k-card-list"},[((i=this.kendoAIPrompt)==null?void 0:i.loading)&&I,d,(!d||d.length===0)&&!((h=this.kendoAIPrompt)!=null&&h.loading)&&V])]}})]}})}});exports.AIPromptOutputRating=R;exports.AIPromptOutputView=v;

package/ai-prompt/views/AIPromptOutputView.mjs

@@ -5,26 +5,22 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as h, createVNode as t, h as y, isVNode as g } from "vue";
-import { AIPromptContent as I } from "../AIPromptContent.mjs";
-import { aIPromptNoOutputs as d, messages as C } from "../../messages/main.mjs";
-import { AIPromptViewRender as b } from "./AIPromptViewRender.mjs";
-import { Card as m, CardHeader as v, CardTitle as R, CardSubtitle as P, CardBody as c, CardActions as k } from "@progress/kendo-vue-layout";
-import { commentIcon as T, copyIcon as a, rotateIcon as w, thumbUpOutlineIcon as A, thumbDownOutlineIcon as O, checkIcon as B } from "@progress/kendo-svg-icons";
-import { Button as i } from "@progress/kendo-vue-buttons";
-import { provideLocalizationService as S } from "@progress/kendo-vue-intl";
-import { templateRendering as z, getListeners as V, getTemplate as j } from "@progress/kendo-vue-common";
-function x(e) {
-  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !g(e);
+import { defineComponent as w, createVNode as t, Fragment as a, isVNode as A } from "vue";
+import { AIPromptContent as O } from "../AIPromptContent.mjs";
+import { aIPromptNoOutputs as k, messages as x } from "../../messages/main.mjs";
+import { AIPromptViewRender as B } from "./AIPromptViewRender.mjs";
+import { outputViewDefaults as z } from "./constants.mjs";
+import { Card as d, CardHeader as y, CardTitle as g, CardSubtitle as I, CardBody as p, CardActions as C } from "@progress/kendo-vue-layout";
+import { copyIcon as m, arrowRotateCwIcon as S, thumbUpOutlineIcon as V, thumbDownOutlineIcon as $, checkIcon as j } from "@progress/kendo-svg-icons";
+import { Button as r } from "@progress/kendo-vue-buttons";
+import { provideLocalizationService as q } from "@progress/kendo-vue-intl";
+function M(e) {
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !A(e);
 }
-let U = /* @__PURE__ */ function(e) {
+let G = /* @__PURE__ */ function(e) {
   return e.positive = "positive", e.negative = "negative", e;
 }({});
-const q = {
-  name: "output-view",
-  buttonText: "Output",
-  buttonIcon: T
-}, E = /* @__PURE__ */ h({
+const J = /* @__PURE__ */ w({
   name: "KendoAIPromptOutputView",
   emits: {
     copy: null,
@@ -33,7 +29,7 @@ const q = {
   },
   props: {
     outputs: Array,
-    outputCard: [String, Function, Object],
+    outputCard: Object,
     showOutputRating: Boolean
   },
   inject: {
@@ -47,7 +43,8 @@ const q = {
   data() {
     return {
       copiedIndex: -1,
-      copyButtonIcon: a
+      copyButtonIcon: m,
+      contentRef: null
     };
   },
   methods: {
@@ -55,11 +52,11 @@ const q = {
       this.$emit("retry", e), this.kendoAIPrompt.onPromptRequest && this.kendoAIPrompt.onPromptRequest.call(null, e.prompt, {
         ...e,
         isRetry: !0
-      });
+      }), this.scrollToTopOutput();
     },
     copyToClipboard(e, n) {
-      e != null && e.responseContent && navigator.clipboard.writeText(e.responseContent), this.copiedIndex = n, this.copyButtonIcon = B, this.$emit("copy", e == null ? void 0 : e.responseContent), setTimeout(() => {
-        this.copyButtonIcon = a, this.copiedIndex = -1;
+      e != null && e.responseContent && navigator.clipboard.writeText(e.responseContent), this.copiedIndex = n, this.copyButtonIcon = j, this.$emit("copy", e == null ? void 0 : e.responseContent), setTimeout(() => {
+        this.copyButtonIcon = m, this.copiedIndex = -1;
       }, 1e3);
     },
     outputRating(e, n) {
@@ -67,6 +64,13 @@ const q = {
         ...e,
         ratingType: n,
         isRetry: !1
+      }), this.scrollToTopOutput();
+    },
+    scrollToTopOutput() {
+      var e, n;
+      (n = (e = this.contentRef) == null ? void 0 : e.scrollTo) == null || n.call(e, {
+        top: 0,
+        behavior: "smooth"
       });
     }
   },
@@ -74,97 +78,132 @@ const q = {
     let e;
     const {
       outputs: n,
-      showOutputRating: r,
-      outputCard: s
-    } = this.$props, p = S(this), u = z.call(this, s, V.call(this));
-    return t(b, {
-      name: q.name
-    }, {
-      default: () => [t(I, null, {
-        default: () => [t("div", {
-          class: "k-card-list"
-        }, [n && n.length > 0 ? n.map(function(o, l) {
-          const f = j.call(this, {
-            h: y,
-            template: u,
-            defaultRendering: null,
-            additionalProps: {
-              output: o
+      showOutputRating: R,
+      outputCard: b
+    } = this.$props, P = q(this), {
+      header: c,
+      body: u,
+      actions: f
+    } = b || {}, T = t(d, null, {
+      default: () => [t(y, null, {
+        default: () => [t(g, null, {
+          default: () => [t("span", {
+            class: "k-skeleton k-skeleton-text k-skeleton-pulse",
+            style: {
+              width: "200px"
             }
-          });
-          return s ? f : t(m, {
-            key: o.id,
-            class: o.class
-          }, {
-            default: () => [t(v, null, {
-              default: () => [o.title && t(R, null, {
-                default: () => [o.title]
-              }), o.subTitle && t(P, null, {
-                default: () => [o.subTitle]
-              })]
-            }), t(c, null, {
-              default: () => [o.responseContent]
-            }), t(k, null, {
-              default: () => [t(i, {
-                type: "button",
-                size: "medium",
-                themeColor: "primary",
-                fillMode: "flat",
-                rounded: "medium",
-                title: "Copy",
-                svgIcon: this.copiedIndex === l ? this.copyButtonIcon : a,
-                "aria-hidden": "true",
-                onClick: () => this.copyToClipboard(o, l)
-              }, {
-                default: () => ["Copy"]
-              }), t(i, {
-                type: "button",
-                size: "medium",
-                themeColor: "base",
-                fillMode: "flat",
-                rounded: "medium",
-                title: "Retry",
-                svgIcon: w,
-                "aria-hidden": "true",
-                onClick: () => this.retryPrompt(o, l)
-              }, {
-                default: () => ["Retry"]
-              }), r && t("span", {
-                class: "k-spacer"
-              }, null), r && t(i, {
-                type: "button",
-                size: "medium",
-                themeColor: o.ratingType === "positive" ? "primary" : "base",
-                fillMode: "flat",
-                rounded: "medium",
-                title: "Rate up",
-                svgIcon: A,
-                "aria-hidden": "true",
-                onClick: () => this.outputRating(o, "positive")
-              }, null), r && t(i, {
-                type: "button",
-                size: "medium",
-                themeColor: o.ratingType === "negative" ? "primary" : "base",
-                fillMode: "flat",
-                rounded: "medium",
-                title: "Rate down",
-                svgIcon: O,
-                "aria-hidden": "true",
-                onClick: () => this.outputRating(o, "negative")
-              }, null)]
-            })]
-          });
-        }, this) : t(m, null, {
-          default: () => [t(c, null, x(e = p.toLanguageString(d, C[d])) ? e : {
-            default: () => [e]
-          })]
+          }, null)]
+        }), t(I, null, {
+          default: () => [t("span", {
+            class: "k-skeleton k-skeleton-text k-skeleton-pulse",
+            style: {
+              width: "100%"
+            }
+          }, null)]
+        })]
+      }), t(p, null, {
+        default: () => [t("span", {
+          class: "k-skeleton k-skeleton-rect k-skeleton-pulse",
+          style: {
+            height: "80px"
+          }
+        }, null)]
+      }), t(C, null, {
+        default: () => [t("span", {
+          class: "k-skeleton k-skeleton-text k-skeleton-pulse",
+          style: {
+            width: "100%"
+          }
+        }, null)]
+      })]
+    }), s = n == null ? void 0 : n.map((o, l) => t(d, {
+      key: `${o.id}_${l}`,
+      class: o.class
+    }, {
+      default: () => [t(y, null, {
+        default: () => [c ? c(o) : t(a, null, [o.title && t(g, null, {
+          default: () => [o.title]
+        }), o.subTitle && t(I, null, {
+          default: () => [o.subTitle]
         })])]
+      }), t(p, null, {
+        default: () => [u ? u(o) : o.responseContent]
+      }), t(C, null, {
+        default: () => [f ? f(o) : t(a, null, [t(r, {
+          type: "button",
+          size: "medium",
+          themeColor: "primary",
+          fillMode: "flat",
+          rounded: "medium",
+          title: "Copy",
+          svgIcon: this.copiedIndex === l ? this.copyButtonIcon : m,
+          "aria-hidden": "true",
+          onClick: () => this.copyToClipboard(o, l)
+        }, {
+          default: () => ["Copy"]
+        }), t(r, {
+          type: "button",
+          size: "medium",
+          themeColor: "base",
+          fillMode: "flat",
+          rounded: "medium",
+          title: "Retry",
+          svgIcon: S,
+          "aria-hidden": "true",
+          onClick: () => this.retryPrompt(o)
+        }, {
+          default: () => ["Retry"]
+        }), R && t(a, null, [t("span", {
+          class: "k-spacer"
+        }, null), t(r, {
+          type: "button",
+          size: "medium",
+          themeColor: o.ratingType === "positive" ? "primary" : "base",
+          fillMode: "flat",
+          rounded: "medium",
+          title: "Rate up",
+          svgIcon: V,
+          "aria-hidden": "true",
+          onClick: () => this.outputRating(o, "positive")
+        }, null), t(r, {
+          type: "button",
+          size: "medium",
+          themeColor: o.ratingType === "negative" ? "primary" : "base",
+          fillMode: "flat",
+          rounded: "medium",
+          title: "Rate down",
+          svgIcon: $,
+          "aria-hidden": "true",
+          onClick: () => this.outputRating(o, "negative")
+        }, null)])])]
+      })]
+    })), v = t(d, null, {
+      default: () => [t(p, null, M(e = P.toLanguageString(k, x[k])) ? e : {
+        default: () => [e]
       })]
     });
+    return t(B, {
+      name: z.name
+    }, {
+      default: () => {
+        var o, l;
+        return [t(O, {
+          ref: (i) => this.contentRef = i,
+          streaming: (o = this.kendoAIPrompt) == null ? void 0 : o.streaming,
+          onCancel: (l = this.kendoAIPrompt) == null ? void 0 : l.onCancel
+        }, {
+          default: () => {
+            var i, h;
+            return [t("div", {
+              class: "k-card-list"
+            }, [((i = this.kendoAIPrompt) == null ? void 0 : i.loading) && T, s, (!s || s.length === 0) && !((h = this.kendoAIPrompt) != null && h.loading) && v])];
+          }
+        })];
+      }
+    });
   }
 });
 export {
-  U as AIPromptOutputRating,
-  E as AIPromptOutputView,
-  q as outputViewDefaults
+  G as AIPromptOutputRating,
+  J as AIPromptOutputView
 };

package/ai-prompt/views/AIPromptView.js

@@ -5,4 +5,5 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),g=require("../AIPromptContent.js"),I=require("../AIPromptFooter.js"),V=require("@progress/kendo-vue-buttons"),f=require("@progress/kendo-vue-inputs"),i=require("@progress/kendo-svg-icons"),A=require("./AIPromptViewRender.js"),P=require("../AIPromptExpander.js"),n=require("@progress/kendo-vue-common");function p(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!t.isVNode(e)}const s={name:"prompt-view",buttonText:"Ask AI",buttonIcon:i.sparklesIcon},k=t.defineComponent({name:"KendoAIPromptView",props:{promptInput:[Object,String],generateButton:[Object,String],promptValue:String,promptSuggestions:Array},inject:{kendoAIPrompt:{default:null}},computed:{computedValue(){return this.$props.promptValue!==void 0?this.$props.promptValue:this.value}},data(){return{value:""}},methods:{handleOnRequest(){this.kendoAIPrompt.onPromptRequest&&this.kendoAIPrompt.onPromptRequest.call(null,this.value),this.value=""},handleSuggestionSelect(e){this.value=e},onTextChange(e){this.value=e.value}},render(){let e;const o="Generate",{promptSuggestions:r}=this.$props,a=n.templateRendering.call(this,this.$props.promptInput,n.getListeners.call(this)),c=t.createVNode(f.TextArea,{value:this.computedValue,onChange:this.onTextChange,placeholder:"Ask or generate content with AI ...",rows:2},null),d=n.getTemplate.call(this,{h:t.h,template:a,defaultRendering:c}),m=n.templateRendering.call(this,this.$props.generateButton,n.getListeners.call(this)),h=t.createVNode(V.Button,{type:"button",themeColor:"primary",fillMode:"solid","aria-hidden":"true",rounded:"full",size:"medium",onClick:this.handleOnRequest,title:"Generate",svgIcon:i.sparklesIcon},p(o)?o:{default:()=>[o]}),u=n.getTemplate.call(this,{h:t.h,template:m,defaultRendering:h});return t.createVNode(A.AIPromptViewRender,{name:s.name},{default:()=>[t.createVNode(g.AIPromptContent,null,{default:()=>[d,r&&r.length>0&&t.createVNode(P.AIPromptExpander,{title:"Prompt Suggestions"},p(e=r.map(function(l){return t.createVNode("div",{key:l,class:"k-prompt-suggestion",onClick:()=>this.handleSuggestionSelect(l)},[l])},this))?e:{default:()=>[e]})]}),t.createVNode(I.AIPromptFooter,null,p(u)?u:{default:()=>[u]})]})}});exports.AIPromptView=k;exports.promptViewDefaults=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),I=require("../AIPromptContent.js"),V=require("../AIPromptFooter.js"),P=require("./constants.js"),A=require("@progress/kendo-vue-inputs"),c=require("@progress/kendo-vue-buttons"),x=require("@progress/kendo-svg-icons"),R=require("./AIPromptViewRender.js"),b=require("../AIPromptExpander.js"),k=require("../../chat/components/SuggestionGroup.js"),o=require("@progress/kendo-vue-common");function d(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!t.isVNode(e)}const v=t.defineComponent({name:"KendoAIPromptView",props:{promptInput:[Object,String],generateButton:[Object,String],promptValue:String,promptSuggestions:Array,enableSpeechToText:[Boolean,Object]},inject:{kendoAIPrompt:{default:null}},computed:{computedValue(){return this.$props.promptValue!==void 0?this.$props.promptValue:this.value}},data(){return{value:""}},methods:{handleOnRequest(){this.kendoAIPrompt.onPromptRequest&&this.kendoAIPrompt.onPromptRequest.call(null,this.computedValue),this.value=""},handleSuggestionSelect(e){this.value=e},onTextChange(e){this.value=e.value},onSpeechResult(e){if(e.isFinal&&e.alternatives.length>0){const r=e.alternatives[0].transcript,n=this.value,s=n&&!n.endsWith(" ")&&!n.endsWith(`
+`);this.value=n+(s?" ":"")+r}},onSpeechStart(){},onSpeechEnd(){},getButtonDisabledState(){const e=this.$props.promptValue!==void 0?this.$props.promptValue:this.value;return!(e!=null&&e.trim())}},render(){const e="Generate",{promptSuggestions:r,enableSpeechToText:n}=this.$props,s=o.templateRendering.call(this,this.$props.promptInput,o.getListeners.call(this)),h=()=>n?t.createVNode("div",{class:"k-input-suffix k-input-suffix-horizontal"},[t.createVNode(c.SpeechToTextButton,t.mergeProps({fillMode:"flat",onStart:this.onSpeechStart,onEnd:this.onSpeechEnd,onResult:this.onSpeechResult},typeof n=="object"?n:{}),null)]):null,m=t.createVNode(A.TextArea,{value:this.computedValue,onInput:this.onTextChange,placeholder:"Ask or generate content with AI ...",rows:2,class:"!k-flex-col",inputSuffix:h},null),g=o.getTemplate.call(this,{h:t.h,template:s,defaultRendering:m}),f=o.templateRendering.call(this,this.$props.generateButton,o.getListeners.call(this)),S=t.createVNode(c.Button,{type:"button",themeColor:"primary",fillMode:"solid","aria-hidden":"true",rounded:"full",size:"medium",onClick:this.handleOnRequest,disabled:this.getButtonDisabledState(),title:"Generate",svgIcon:x.sparklesIcon},d(e)?e:{default:()=>[e]}),i=o.getTemplate.call(this,{h:t.h,template:f,defaultRendering:S});return t.createVNode(R.AIPromptViewRender,{name:P.promptViewDefaults.name},{default:()=>{var a,p;return[t.createVNode(I.AIPromptContent,{streaming:(a=this.kendoAIPrompt)==null?void 0:a.streaming,onCancel:(p=this.kendoAIPrompt)==null?void 0:p.onCancel},{default:()=>[g,r&&r.length>0&&t.createVNode(b.AIPromptExpander,{title:"Prompt Suggestions"},{default:()=>[t.createVNode(k.SuggestionGroup,{suggestions:r.map((u,l)=>({id:l,text:u,description:u})),onSuggestionClick:(u,l)=>this.handleSuggestionSelect(l.text)},null)]})]}),t.createVNode(V.AIPromptFooter,null,d(i)?i:{default:()=>[i]})]}})}});exports.AIPromptView=v;