@progress/kendo-vue-conversational-ui 7.0.0-develop.6 → 7.0.0-develop.7

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 a=require("vue"),h=require("./AIPromptHeader.js"),s=require("./views/constants.js"),t=require("@progress/kendo-vue-common"),i=require("../package-metadata.js"),d=a.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{showLicenseWatermark:!1,licenseMessage:"",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(e){this.contextState.activeView=e},streaming(e){this.contextState.streaming=e},loading(e){this.contextState.loading=e}},methods:{onStateAction(e){this.contextState.activeView=e.activeView},onActiveViewChange(e){this.$emit("activeviewchange",e)},onPromptRequest(e,o){this.$emit("promptrequest",e,o)},onCommandExecute(e){this.$emit("commandexecute",e)},onCancel(){this.$emit("cancel")}},render(){t.validatePackage(i.packageMetadata),this.showLicenseWatermark=t.shouldShowValidationUI(i.packageMetadata),this.licenseMessage=t.getLicenseMessage(i.packageMetadata);const e=t.getDefaultSlots(this),{toolbarItems:o,dir:r}=this.$props,c=(o||[s.promptViewDefaults,s.outputViewDefaults]).map(n=>{const l=t.templateRendering.call(this,n.content,t.getListeners.call(this));return{...n,content:l}}),m=this.showLicenseWatermark?a.createVNode(t.WatermarkOverlay,{message:this.licenseMessage},null):null;return a.createVNode("div",{class:"k-prompt",dir:r},[a.createVNode(h.AIPromptHeader,{activeView:this.contextState.activeView,toolbarItems:c,onActiveviewchange:this.onActiveViewChange},null),e,m])}});exports.AIPrompt=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("vue"),h=require("./AIPromptHeader.js"),n=require("./views/constants.js"),t=require("@progress/kendo-vue-common"),o=require("../package-metadata.js"),g=a.defineComponent({name:"KendoAIPrompt",props:{activeView:{type:String,required:!0},dir:String,toolbarItems:Array,outputs:Array,promptPlaceholder:String,streaming:Boolean,loading:Boolean,suggestionsView:{type:String,default:"classic"}},provide(){return{kendoAIPrompt:this.$data.contextState}},data(){return{showLicenseWatermark:!1,licenseMessage:"",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,suggestionsView:this.$props.suggestionsView}}},watch:{activeView(e){this.contextState.activeView=e},streaming(e){this.contextState.streaming=e},loading(e){this.contextState.loading=e}},methods:{onStateAction(e){this.contextState.activeView=e.activeView},onActiveViewChange(e){this.$emit("activeviewchange",e)},onPromptRequest(e,i){this.$emit("promptrequest",e,i)},onCommandExecute(e){this.$emit("commandexecute",e)},onCancel(){this.$emit("cancel")}},render(){t.validatePackage(o.packageMetadata),this.showLicenseWatermark=t.shouldShowValidationUI(o.packageMetadata),this.licenseMessage=t.getLicenseMessage(o.packageMetadata);const e=t.getDefaultSlots(this),{toolbarItems:i,dir:r}=this.$props,c=(i||[n.promptViewDefaults,n.outputViewDefaults]).map(s=>{const l=t.templateRendering.call(this,s.content,t.getListeners.call(this));return{...s,content:l}}),m=this.showLicenseWatermark?a.createVNode(t.WatermarkOverlay,{message:this.licenseMessage},null):null;return a.createVNode("div",{class:"k-prompt",dir:r},[a.createVNode(h.AIPromptHeader,{activeView:this.contextState.activeView,toolbarItems:c,onActiveviewchange:this.onActiveViewChange},null),e,m])}});exports.AIPrompt=g;

package/ai-prompt/AIPrompt.mjs

@@ -8,9 +8,9 @@
 import { defineComponent as m, createVNode as i } from "vue";
 import { AIPromptHeader as h } from "./AIPromptHeader.mjs";
 import { promptViewDefaults as l, outputViewDefaults as p } from "./views/constants.mjs";
-import { validatePackage as d, shouldShowValidationUI as g, getLicenseMessage as u, getDefaultSlots as w, templateRendering as v, getListeners as S, WatermarkOverlay as V } from "@progress/kendo-vue-common";
+import { validatePackage as g, shouldShowValidationUI as d, getLicenseMessage as u, getDefaultSlots as w, templateRendering as v, getListeners as V, WatermarkOverlay as S } from "@progress/kendo-vue-common";
 import { packageMetadata as o } from "../package-metadata.mjs";
-const $ = /* @__PURE__ */ m({
+const P = /* @__PURE__ */ m({
   name: "KendoAIPrompt",
   props: {
     activeView: {
@@ -22,7 +22,11 @@ const $ = /* @__PURE__ */ m({
     outputs: Array,
     promptPlaceholder: String,
     streaming: Boolean,
-    loading: Boolean
+    loading: Boolean,
+    suggestionsView: {
+      type: String,
+      default: "classic"
+    }
   },
   provide() {
     return {
@@ -41,7 +45,8 @@ const $ = /* @__PURE__ */ m({
         onActiveViewChange: this.onActiveViewChange,
         onPromptRequest: this.onPromptRequest,
         onCommandExecute: this.onCommandExecute,
-        onStateAction: this.onStateAction
+        onStateAction: this.onStateAction,
+        suggestionsView: this.$props.suggestionsView
       }
     };
   },
@@ -74,29 +79,29 @@ const $ = /* @__PURE__ */ m({
     }
   },
   render() {
-    d(o), this.showLicenseWatermark = g(o), this.licenseMessage = u(o);
+    g(o), this.showLicenseWatermark = d(o), this.licenseMessage = u(o);
     const t = w(this), {
       toolbarItems: e,
-      dir: n
-    } = this.$props, s = (e || [l, p]).map((a) => {
-      const c = v.call(this, a.content, S.call(this));
+      dir: s
+    } = this.$props, n = (e || [l, p]).map((a) => {
+      const c = v.call(this, a.content, V.call(this));
       return {
         ...a,
         content: c
       };
-    }), r = this.showLicenseWatermark ? i(V, {
+    }), r = this.showLicenseWatermark ? i(S, {
       message: this.licenseMessage
     }, null) : null;
     return i("div", {
       class: "k-prompt",
-      dir: n
+      dir: s
     }, [i(h, {
       activeView: this.contextState.activeView,
-      toolbarItems: s,
+      toolbarItems: n,
       onActiveviewchange: this.onActiveViewChange
     }, null), t, r]);
   }
 });
 export {
-  $ as AIPrompt
+  P as AIPrompt
 };

package/ai-prompt/views/AIPromptView.js

@@ -5,5 +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"),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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),P=require("../AIPromptContent.js"),A=require("../AIPromptFooter.js"),k=require("./constants.js"),d=require("@progress/kendo-vue-inputs"),h=require("@progress/kendo-vue-buttons"),x=require("@progress/kendo-svg-icons"),R=require("./AIPromptViewRender.js"),b=require("../AIPromptExpander.js"),v=require("../../chat/components/SuggestionGroup.js"),o=require("@progress/kendo-vue-common");function m(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!t.isVNode(e)}const q=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)),g=()=>n?t.createVNode(t.Fragment,null,[t.createVNode(d.InputSeparator,{orientation:"horizontal"},null),t.createVNode("div",{class:"k-input-suffix k-input-suffix-horizontal"},[t.createVNode(h.SpeechToTextButton,t.mergeProps({fillMode:"flat",onStart:this.onSpeechStart,onEnd:this.onSpeechEnd,onResult:this.onSpeechResult},typeof n=="object"?n:{}),null)])]):null,S=t.createVNode(d.TextArea,{value:this.computedValue,onInput:this.onTextChange,placeholder:"Ask or generate content with AI ...",rows:2,class:"!k-flex-col",inputSuffix:g},null),f=o.getTemplate.call(this,{h:t.h,template:s,defaultRendering:S}),V=o.templateRendering.call(this,this.$props.generateButton,o.getListeners.call(this)),I=t.createVNode(h.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},m(e)?e:{default:()=>[e]}),i=o.getTemplate.call(this,{h:t.h,template:V,defaultRendering:I});return t.createVNode(R.AIPromptViewRender,{name:k.promptViewDefaults.name},{default:()=>{var l,p;return[t.createVNode(P.AIPromptContent,{streaming:(l=this.kendoAIPrompt)==null?void 0:l.streaming,onCancel:(p=this.kendoAIPrompt)==null?void 0:p.onCancel},{default:()=>[f,r&&r.length>0&&t.createVNode(b.AIPromptExpander,{title:"Prompt Suggestions"},{default:()=>{var c;return[t.createVNode(v.SuggestionGroup,{suggestionsView:(c=this.kendoAIPrompt)==null?void 0:c.suggestionsView,suggestions:r.map((u,a)=>({id:a,text:u,description:u})),onSuggestionClick:(u,a)=>this.handleSuggestionSelect(a.text)},null)]}})]}),t.createVNode(A.AIPromptFooter,null,m(i)?i:{default:()=>[i]})]}})}});exports.AIPromptView=q;

package/ai-prompt/views/AIPromptView.mjs

@@ -5,21 +5,21 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as A, createVNode as e, h as u, mergeProps as P, isVNode as R } from "vue";
-import { AIPromptContent as b } from "../AIPromptContent.mjs";
-import { AIPromptFooter as V } from "../AIPromptFooter.mjs";
-import { promptViewDefaults as v } from "./constants.mjs";
-import { TextArea as T } from "@progress/kendo-vue-inputs";
-import { Button as k, SpeechToTextButton as B } from "@progress/kendo-vue-buttons";
-import { sparklesIcon as C } from "@progress/kendo-svg-icons";
-import { AIPromptViewRender as j } from "./AIPromptViewRender.mjs";
-import { AIPromptExpander as O } from "../AIPromptExpander.mjs";
-import { SuggestionGroup as $ } from "../../chat/components/SuggestionGroup.mjs";
-import { templateRendering as m, getListeners as c, getTemplate as d } from "@progress/kendo-vue-common";
-function h(t) {
-  return typeof t == "function" || Object.prototype.toString.call(t) === "[object Object]" && !R(t);
+import { defineComponent as P, createVNode as e, h as m, Fragment as V, mergeProps as R, isVNode as b } from "vue";
+import { AIPromptContent as k } from "../AIPromptContent.mjs";
+import { AIPromptFooter as v } from "../AIPromptFooter.mjs";
+import { promptViewDefaults as T } from "./constants.mjs";
+import { TextArea as B, InputSeparator as C } from "@progress/kendo-vue-inputs";
+import { Button as j, SpeechToTextButton as w } from "@progress/kendo-vue-buttons";
+import { sparklesIcon as O } from "@progress/kendo-svg-icons";
+import { AIPromptViewRender as $ } from "./AIPromptViewRender.mjs";
+import { AIPromptExpander as y } from "../AIPromptExpander.mjs";
+import { SuggestionGroup as D } from "../../chat/components/SuggestionGroup.mjs";
+import { templateRendering as c, getListeners as d, getTemplate as h } from "@progress/kendo-vue-common";
+function g(t) {
+  return typeof t == "function" || Object.prototype.toString.call(t) === "[object Object]" && !b(t);
 }
-const K = /* @__PURE__ */ A({
+const H = /* @__PURE__ */ P({
   name: "KendoAIPromptView",
   props: {
     promptInput: [Object, String],
@@ -73,25 +73,27 @@ const K = /* @__PURE__ */ A({
     const t = "Generate", {
       promptSuggestions: o,
       enableSpeechToText: n
-    } = this.$props, r = m.call(this, this.$props.promptInput, c.call(this)), f = () => n ? e("div", {
+    } = this.$props, r = c.call(this, this.$props.promptInput, d.call(this)), f = () => n ? e(V, null, [e(C, {
+      orientation: "horizontal"
+    }, null), e("div", {
       class: "k-input-suffix k-input-suffix-horizontal"
-    }, [e(B, P({
+    }, [e(w, R({
       fillMode: "flat",
       onStart: this.onSpeechStart,
       onEnd: this.onSpeechEnd,
       onResult: this.onSpeechResult
-    }, typeof n == "object" ? n : {}), null)]) : null, g = e(T, {
+    }, typeof n == "object" ? n : {}), null)])]) : null, S = e(B, {
       value: this.computedValue,
       onInput: this.onTextChange,
       placeholder: "Ask or generate content with AI ...",
       rows: 2,
       class: "!k-flex-col",
       inputSuffix: f
-    }, null), S = d.call(this, {
-      h: u,
+    }, null), I = h.call(this, {
+      h: m,
       template: r,
-      defaultRendering: g
-    }), I = m.call(this, this.$props.generateButton, c.call(this)), x = e(k, {
+      defaultRendering: S
+    }), x = c.call(this, this.$props.generateButton, d.call(this)), A = e(j, {
       type: "button",
       themeColor: "primary",
       fillMode: "solid",
@@ -101,36 +103,40 @@ const K = /* @__PURE__ */ A({
       onClick: this.handleOnRequest,
       disabled: this.getButtonDisabledState(),
       title: "Generate",
-      svgIcon: C
-    }, h(t) ? t : {
+      svgIcon: O
+    }, g(t) ? t : {
       default: () => [t]
-    }), i = d.call(this, {
-      h: u,
-      template: I,
-      defaultRendering: x
+    }), i = h.call(this, {
+      h: m,
+      template: x,
+      defaultRendering: A
     });
-    return e(j, {
-      name: v.name
+    return e($, {
+      name: T.name
     }, {
       default: () => {
-        var s, a;
-        return [e(b, {
-          streaming: (s = this.kendoAIPrompt) == null ? void 0 : s.streaming,
+        var l, a;
+        return [e(k, {
+          streaming: (l = this.kendoAIPrompt) == null ? void 0 : l.streaming,
           onCancel: (a = this.kendoAIPrompt) == null ? void 0 : a.onCancel
         }, {
-          default: () => [S, o && o.length > 0 && e(O, {
+          default: () => [I, o && o.length > 0 && e(y, {
             title: "Prompt Suggestions"
           }, {
-            default: () => [e($, {
-              suggestions: o.map((p, l) => ({
-                id: l,
-                text: p,
-                description: p
-              })),
-              onSuggestionClick: (p, l) => this.handleSuggestionSelect(l.text)
-            }, null)]
+            default: () => {
+              var u;
+              return [e(D, {
+                suggestionsView: (u = this.kendoAIPrompt) == null ? void 0 : u.suggestionsView,
+                suggestions: o.map((p, s) => ({
+                  id: s,
+                  text: p,
+                  description: p
+                })),
+                onSuggestionClick: (p, s) => this.handleSuggestionSelect(s.text)
+              }, null)];
+            }
           })]
-        }), e(V, null, h(i) ? i : {
+        }), e(v, null, g(i) ? i : {
           default: () => [i]
         })];
       }
@@ -138,5 +144,5 @@ const K = /* @__PURE__ */ A({
   }
 });
 export {
-  K as AIPromptView
+  H as AIPromptView
 };

package/chat/components/SuggestionGroup.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 d=require("vue"),r=require("@progress/kendo-vue-common"),t=d.defineComponent({name:"KendoSuggestionGroup",props:{suggestions:{type:Array,required:!0},onSuggestionClick:{type:Function,required:!0}},methods:{handleSuggestionClick(i,e){e.disabled||this.onSuggestionClick(i,e)},handleKeyDown(i,e){(i.key==="Enter"||i.key===" ")&&(i.preventDefault(),this.onSuggestionClick(i,e))}},render(){const{suggestions:i}=this.$props;return d.createVNode("div",{role:"group",class:"k-suggestion-group"},[i.map(e=>d.createVNode("span",{role:"button",tabindex:e.disabled?-1:0,"aria-label":e.description,"aria-disabled":e.disabled,onClick:o=>!e.disabled&&this.handleSuggestionClick(o,e),onKeydown:o=>!e.disabled&&this.handleKeyDown(o,e),key:e.id,title:e.description,class:r.classNames("k-suggestion",{"k-disabled":e.disabled})},[e.text]))])}});exports.SuggestionGroup=t;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),r=require("@progress/kendo-vue-common"),d=t.defineComponent({name:"KendoSuggestionGroup",props:{suggestions:{type:Array,required:!0},onSuggestionClick:{type:Function,required:!0},suggestionsView:{type:String,default:"classic"}},methods:{handleSuggestionClick(i,o){o.disabled||this.onSuggestionClick(i,o)},handleKeyDown(i,o){(i.key==="Enter"||i.key===" ")&&(i.preventDefault(),this.onSuggestionClick(i,o))}},render(){const{suggestions:i,suggestionsView:o}=this.$props,n=()=>i.map(e=>t.createVNode("span",{role:"button",tabindex:e.disabled?-1:0,"aria-label":e.description,"aria-disabled":e.disabled,onClick:s=>!e.disabled&&this.handleSuggestionClick(s,e),onKeydown:s=>!e.disabled&&this.handleKeyDown(s,e),key:e.id,title:e.description,class:r.classNames(o==="classic"?"k-prompt-suggestion":"k-suggestion",{"k-disabled":e.disabled})},[e.text]));return o==="classic"?n():t.createVNode("div",{role:"group",class:"k-suggestion-group"},[n()])}});exports.SuggestionGroup=d;

package/chat/components/SuggestionGroup.mjs

@@ -5,9 +5,9 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as r, createVNode as o } from "vue";
-import { classNames as a } from "@progress/kendo-vue-common";
-const n = /* @__PURE__ */ r({
+import { defineComponent as d, createVNode as r } from "vue";
+import { classNames as n } from "@progress/kendo-vue-common";
+const c = /* @__PURE__ */ d({
   name: "KendoSuggestionGroup",
   props: {
     suggestions: {
@@ -17,38 +17,43 @@ const n = /* @__PURE__ */ r({
     onSuggestionClick: {
       type: Function,
       required: !0
+    },
+    suggestionsView: {
+      type: String,
+      default: "classic"
     }
   },
   methods: {
-    handleSuggestionClick(i, e) {
-      e.disabled || this.onSuggestionClick(i, e);
+    handleSuggestionClick(i, s) {
+      s.disabled || this.onSuggestionClick(i, s);
     },
-    handleKeyDown(i, e) {
-      (i.key === "Enter" || i.key === " ") && (i.preventDefault(), this.onSuggestionClick(i, e));
+    handleKeyDown(i, s) {
+      (i.key === "Enter" || i.key === " ") && (i.preventDefault(), this.onSuggestionClick(i, s));
     }
   },
   render() {
     const {
-      suggestions: i
-    } = this.$props;
-    return o("div", {
-      role: "group",
-      class: "k-suggestion-group"
-    }, [i.map((e) => o("span", {
+      suggestions: i,
+      suggestionsView: s
+    } = this.$props, t = () => i.map((e) => r("span", {
       role: "button",
       tabindex: e.disabled ? -1 : 0,
       "aria-label": e.description,
       "aria-disabled": e.disabled,
-      onClick: (d) => !e.disabled && this.handleSuggestionClick(d, e),
-      onKeydown: (d) => !e.disabled && this.handleKeyDown(d, e),
+      onClick: (o) => !e.disabled && this.handleSuggestionClick(o, e),
+      onKeydown: (o) => !e.disabled && this.handleKeyDown(o, e),
       key: e.id,
       title: e.description,
-      class: a("k-suggestion", {
+      class: n(s === "classic" ? "k-prompt-suggestion" : "k-suggestion", {
         "k-disabled": e.disabled
       })
-    }, [e.text]))]);
+    }, [e.text]));
+    return s === "classic" ? t() : r("div", {
+      role: "group",
+      class: "k-suggestion-group"
+    }, [t()]);
   }
 });
 export {
-  n as SuggestionGroup
+  c as SuggestionGroup
 };

package/dist/cdn/js/kendo-vue-conversational-ui.js

@@ -12,4 +12,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue"),require("@progress/kendo-vue-common"),require("@progress/kendo-vue-buttons"),require("@progress/kendo-svg-icons"),require("@progress/kendo-vue-inputs"),require("@progress/kendo-vue-layout"),require("@progress/kendo-vue-intl")):"function"==typeof define&&define.amd?define(["exports","vue","@progress/kendo-vue-common","@progress/kendo-vue-buttons","@progress/kendo-svg-icons","@progress/kendo-vue-inputs","@progress/kendo-vue-layout","@progress/kendo-vue-intl"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoVueConversationalUi={},e.Vue,e.KendoVueCommon,e.KendoVueButtons,e.KendoSVGIcons,e.KendoVueInputs,e.KendoVueLayout,e.KendoVueIntl)}(this,(function(e,t,o,n,i,a,r,s){"use strict";function l(e){return"function"==typeof e||"[object Object]"===Object.prototype.toString.call(e)&&!t.isVNode(e)}const d=t.defineComponent({name:"KendoAIPromptHeader",props:{activeView:String,toolbarItems:Array,onActiveviewchange:Function},methods:{handleClick(e){this.$emit("activeviewchange",e)}},render(){let e;const{activeView:i,toolbarItems:a}=this.$props;return t.createVNode("div",{class:"k-prompt-header"},[t.createVNode(n.Toolbar,{overflow:"none",keyboardNavigation:!1,class:"k-toolbar-flat"},l(e=a.map((function(e){const a=o.getTemplate.call(this,{h:t.h,template:e.content,defaultRendering:null,additionalProps:{item:e}});return e.content?a:t.createVNode(n.Button,{type:"button",key:e.name,class:o.classNames("k-toolbar-item",{"k-selected":i===e.name}),size:"medium",themeColor:"primary",fillMode:"flat",rounded:"full",title:e.buttonText,svgIcon:e.buttonIcon,onClick:()=>this.handleClick(e.name)},{default:()=>[e.buttonText]})}),this))?e:{default:()=>[e]})])}}),u={name:"Output view",buttonText:"Output",buttonIcon:i.commentIcon},c={name:"Commands view",buttonIcon:i.moreHorizontalIcon},p={name:"prompt-view",buttonText:"Ask AI",buttonIcon:i.sparklesIcon},m={name:"@progress/kendo-vue-conversational-ui",productName:"Kendo UI for Vue",productCode:"KENDOUIVUE",productCodes:["KENDOUIVUE"],publishDate:0,version:"7.0.0-develop.6",licensingDocsUrl:"https://www.telerik.com/kendo-vue-ui/my-license/"},h=t.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{showLicenseWatermark:!1,licenseMessage:"",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(e){this.contextState.activeView=e},streaming(e){this.contextState.streaming=e},loading(e){this.contextState.loading=e}},methods:{onStateAction(e){this.contextState.activeView=e.activeView},onActiveViewChange(e){this.$emit("activeviewchange",e)},onPromptRequest(e,t){this.$emit("promptrequest",e,t)},onCommandExecute(e){this.$emit("commandexecute",e)},onCancel(){this.$emit("cancel")}},render(){o.validatePackage(m),this.showLicenseWatermark=o.shouldShowValidationUI(m),this.licenseMessage=o.getLicenseMessage(m);const e=o.getDefaultSlots(this),{toolbarItems:n,dir:i}=this.$props,a=(n||[p,u]).map((e=>{const t=o.templateRendering.call(this,e.content,o.getListeners.call(this));return{...e,content:t}})),r=this.showLicenseWatermark?t.createVNode(o.WatermarkOverlay,{message:this.licenseMessage},null):null;return t.createVNode("div",{class:"k-prompt",dir:i},[t.createVNode(d,{activeView:this.contextState.activeView,toolbarItems:a,onActiveviewchange:this.onActiveViewChange},null),e,r])}}),g=t.defineComponent({name:"KendoAIPromptFooter",render(){const e=o.getDefaultSlots(this);return t.createVNode("div",{class:"k-prompt-footer"},[t.createVNode("div",{class:"k-actions k-actions-start k-actions-horizontal k-prompt-actions"},[e])])}}),v=t.defineComponent({name:"KendoAIPromptContent",props:{onCancel:Function,streaming:Boolean},inject:{kendoAIPrompt:{default:null}},computed:{showFloatingButton(){var e;const t=(null==(e=this.kendoAIPrompt)?void 0:e.activeView)===u.name;return this.streaming&&t}},methods:{handleKeyDown(e){"Escape"===e.key&&this.showFloatingButton&&this.onCancel&&(e.preventDefault(),this.$props.onCancel())}},render(){const e=o.getDefaultSlots(this);return t.createVNode("div",{class:"k-prompt-content",onKeydown:this.handleKeyDown},[this.showFloatingButton&&t.createVNode(n.FloatingActionButton,{onClick:this.onCancel,svgIcon:i.stopSmIcon,size:"small",positionMode:"absolute",class:"k-prompt-stop-fab k-generating"},null),t.createVNode("div",{class:"k-prompt-view"},[e])])}}),k=t.defineComponent({name:"KendoAIPromptViewRender",inheritAttrs:!1,props:{name:String},inject:{kendoAIPrompt:{default:null}},render(){const e=o.getDefaultSlots(this);return this.kendoAIPrompt.activeView===this.$props.name?e:null}});function f(e){return"function"==typeof e||"[object Object]"===Object.prototype.toString.call(e)&&!t.isVNode(e)}const V=t.defineComponent({name:"KendoAIPromptExpander",props:{title:String},data:()=>({expanded:!0}),methods:{buttonClick(){this.expanded=!this.expanded}},render(){const e=o.getDefaultSlots(this),{title:a}=this.$props;return t.createVNode("div",{class:"k-prompt-expander"},[t.createVNode(n.Button,{type:"button",fillMode:"flat",svgIcon:this.expanded?i.chevronUpIcon:i.chevronDownIcon,title:a,onClick:this.buttonClick},f(a)?a:{default:()=>[a]}),this.expanded&&t.createVNode("div",{class:"k-prompt-expander-content"},[e])])}}),I=t.defineComponent({name:"KendoSuggestionGroup",props:{suggestions:{type:Array,required:!0},onSuggestionClick:{type:Function,required:!0}},methods:{handleSuggestionClick(e,t){t.disabled||this.onSuggestionClick(e,t)},handleKeyDown(e,t){("Enter"===e.key||" "===e.key)&&(e.preventDefault(),this.onSuggestionClick(e,t))}},render(){const{suggestions:e}=this.$props;return t.createVNode("div",{role:"group",class:"k-suggestion-group"},[e.map((e=>t.createVNode("span",{role:"button",tabindex:e.disabled?-1:0,"aria-label":e.description,"aria-disabled":e.disabled,onClick:t=>!e.disabled&&this.handleSuggestionClick(t,e),onKeydown:t=>!e.disabled&&this.handleKeyDown(t,e),key:e.id,title:e.description,class:o.classNames("k-suggestion",{"k-disabled":e.disabled})},[e.text])))])}});function C(e){return"function"==typeof e||"[object Object]"===Object.prototype.toString.call(e)&&!t.isVNode(e)}const y=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 void 0!==this.$props.promptValue?this.$props.promptValue:this.value}},data:()=>({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 t=e.alternatives[0].transcript,o=this.value,n=o&&!o.endsWith(" ")&&!o.endsWith("\n");this.value=o+(n?" ":"")+t}},onSpeechStart(){},onSpeechEnd(){},getButtonDisabledState(){const e=void 0!==this.$props.promptValue?this.$props.promptValue:this.value;return!(null!=e&&e.trim())}},render(){const e="Generate",{promptSuggestions:r,enableSpeechToText:s}=this.$props,l=o.templateRendering.call(this,this.$props.promptInput,o.getListeners.call(this)),d=t.createVNode(a.TextArea,{value:this.computedValue,onInput:this.onTextChange,placeholder:"Ask or generate content with AI ...",rows:2,class:"!k-flex-col",inputSuffix:()=>s?t.createVNode("div",{class:"k-input-suffix k-input-suffix-horizontal"},[t.createVNode(n.SpeechToTextButton,t.mergeProps({fillMode:"flat",onStart:this.onSpeechStart,onEnd:this.onSpeechEnd,onResult:this.onSpeechResult},"object"==typeof s?s:{}),null)]):null},null),u=o.getTemplate.call(this,{h:t.h,template:l,defaultRendering:d}),c=o.templateRendering.call(this,this.$props.generateButton,o.getListeners.call(this)),m=t.createVNode(n.Button,{type:"button",themeColor:"primary",fillMode:"solid","aria-hidden":"true",rounded:"full",size:"medium",onClick:this.handleOnRequest,disabled:this.getButtonDisabledState(),title:"Generate",svgIcon:i.sparklesIcon},C(e)?e:{default:()=>[e]}),h=o.getTemplate.call(this,{h:t.h,template:c,defaultRendering:m});return t.createVNode(k,{name:p.name},{default:()=>{var e,o;return[t.createVNode(v,{streaming:null==(e=this.kendoAIPrompt)?void 0:e.streaming,onCancel:null==(o=this.kendoAIPrompt)?void 0:o.onCancel},{default:()=>[u,r&&r.length>0&&t.createVNode(V,{title:"Prompt Suggestions"},{default:()=>[t.createVNode(I,{suggestions:r.map(((e,t)=>({id:t,text:e,description:e}))),onSuggestionClick:(e,t)=>this.handleSuggestionSelect(t.text)},null)]})]}),t.createVNode(g,null,C(h)?h:{default:()=>[h]})]}})}}),b="avatar.alt",N="messageList.ariaLabel",A="aIPrompt.noOutputs",w={[b]:"Avatar",[N]:"Message list",[A]:"No output from Ai available"};function S(e){return"function"==typeof e||"[object Object]"===Object.prototype.toString.call(e)&&!t.isVNode(e)}let P=function(e){return e.positive="positive",e.negative="negative",e}({});const x=t.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:()=>({copiedIndex:-1,copyButtonIcon:i.copyIcon,contentRef:null}),methods:{retryPrompt(e){this.$emit("retry",e),this.kendoAIPrompt.onPromptRequest&&this.kendoAIPrompt.onPromptRequest.call(null,e.prompt,{...e,isRetry:!0}),this.scrollToTopOutput()},copyToClipboard(e,t){null!=e&&e.responseContent&&navigator.clipboard.writeText(e.responseContent),this.copiedIndex=t,this.copyButtonIcon=i.checkIcon,this.$emit("copy",null==e?void 0:e.responseContent),setTimeout((()=>{this.copyButtonIcon=i.copyIcon,this.copiedIndex=-1}),1e3)},outputRating(e,t){this.$emit("rating",e,t),this.kendoAIPrompt.onPromptRequest&&this.kendoAIPrompt.onPromptRequest.call(null,e.prompt,{...e,ratingType:t,isRetry:!1}),this.scrollToTopOutput()},scrollToTopOutput(){var e,t;null==(t=null==(e=this.contentRef)?void 0:e.scrollTo)||t.call(e,{top:0,behavior:"smooth"})}},render(){let e;const{outputs:o,showOutputRating:a,outputCard:l}=this.$props,d=s.provideLocalizationService(this),{header:c,body:p,actions:m}=l||{},h=t.createVNode(r.Card,null,{default:()=>[t.createVNode(r.CardHeader,null,{default:()=>[t.createVNode(r.CardTitle,null,{default:()=>[t.createVNode("span",{class:"k-skeleton k-skeleton-text k-skeleton-pulse",style:{width:"200px"}},null)]}),t.createVNode(r.CardSubtitle,null,{default:()=>[t.createVNode("span",{class:"k-skeleton k-skeleton-text k-skeleton-pulse",style:{width:"100%"}},null)]})]}),t.createVNode(r.CardBody,null,{default:()=>[t.createVNode("span",{class:"k-skeleton k-skeleton-rect k-skeleton-pulse",style:{height:"80px"}},null)]}),t.createVNode(r.CardActions,null,{default:()=>[t.createVNode("span",{class:"k-skeleton k-skeleton-text k-skeleton-pulse",style:{width:"100%"}},null)]})]}),g=null==o?void 0:o.map(((e,o)=>t.createVNode(r.Card,{key:`${e.id}_${o}`,class:e.class},{default:()=>[t.createVNode(r.CardHeader,null,{default:()=>[c?c(e):t.createVNode(t.Fragment,null,[e.title&&t.createVNode(r.CardTitle,null,{default:()=>[e.title]}),e.subTitle&&t.createVNode(r.CardSubtitle,null,{default:()=>[e.subTitle]})])]}),t.createVNode(r.CardBody,null,{default:()=>[p?p(e):e.responseContent]}),t.createVNode(r.CardActions,null,{default:()=>[m?m(e):t.createVNode(t.Fragment,null,[t.createVNode(n.Button,{type:"button",size:"medium",themeColor:"primary",fillMode:"flat",rounded:"medium",title:"Copy",svgIcon:this.copiedIndex===o?this.copyButtonIcon:i.copyIcon,"aria-hidden":"true",onClick:()=>this.copyToClipboard(e,o)},{default:()=>["Copy"]}),t.createVNode(n.Button,{type:"button",size:"medium",themeColor:"base",fillMode:"flat",rounded:"medium",title:"Retry",svgIcon:i.arrowRotateCwIcon,"aria-hidden":"true",onClick:()=>this.retryPrompt(e)},{default:()=>["Retry"]}),a&&t.createVNode(t.Fragment,null,[t.createVNode("span",{class:"k-spacer"},null),t.createVNode(n.Button,{type:"button",size:"medium",themeColor:"positive"===e.ratingType?"primary":"base",fillMode:"flat",rounded:"medium",title:"Rate up",svgIcon:i.thumbUpOutlineIcon,"aria-hidden":"true",onClick:()=>this.outputRating(e,"positive")},null),t.createVNode(n.Button,{type:"button",size:"medium",themeColor:"negative"===e.ratingType?"primary":"base",fillMode:"flat",rounded:"medium",title:"Rate down",svgIcon:i.thumbDownOutlineIcon,"aria-hidden":"true",onClick:()=>this.outputRating(e,"negative")},null)])])]})]}))),f=t.createVNode(r.Card,null,{default:()=>[t.createVNode(r.CardBody,null,S(e=d.toLanguageString(A,w[A]))?e:{default:()=>[e]})]});return t.createVNode(k,{name:u.name},{default:()=>{var e,o;return[t.createVNode(v,{ref:e=>this.contentRef=e,streaming:null==(e=this.kendoAIPrompt)?void 0:e.streaming,onCancel:null==(o=this.kendoAIPrompt)?void 0:o.onCancel},{default:()=>{var e,o;return[t.createVNode("div",{class:"k-card-list"},[(null==(e=this.kendoAIPrompt)?void 0:e.loading)&&h,g,(!g||0===g.length)&&!(null!=(o=this.kendoAIPrompt)&&o.loading)&&f])]}})]}})}}),R=t.defineComponent({name:"KendoAIPromptCommandsView",props:{commands:Array},inject:{kendoAIPrompt:{default:null}},render(){const{commands:e}=this.$props,o=e=>{var t;const o=e.target;(null==(t=o.items)||!t.length)&&this.kendoAIPrompt.onCommandExecute&&(this.$emit("commandexecute",o),this.kendoAIPrompt.onCommandExecute.call(null,o))};return t.createVNode(k,{name:c.name},{default:()=>{var n,i;return[t.createVNode(v,{streaming:null==(n=this.kendoAIPrompt)?void 0:n.streaming,onCancel:null==(i=this.kendoAIPrompt)?void 0:i.onCancel},{default:()=>[t.createVNode("div",{class:"k-prompt-view"},[t.createVNode(r.PanelBar,{onSelect:o,items:e},null)])]})]}})}});e.AIPrompt=h,e.AIPromptCommandsView=R,e.AIPromptContent=v,e.AIPromptFooter=g,e.AIPromptHeader=d,e.AIPromptOutputRating=P,e.AIPromptOutputView=x,e.AIPromptView=y,e.AIPromptViewRender=k,e.SuggestionGroup=I,e.commandsViewDefaults=c,e.outputViewDefaults=u,e.promptViewDefaults=p}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue"),require("@progress/kendo-vue-common"),require("@progress/kendo-vue-buttons"),require("@progress/kendo-svg-icons"),require("@progress/kendo-vue-inputs"),require("@progress/kendo-vue-layout"),require("@progress/kendo-vue-intl")):"function"==typeof define&&define.amd?define(["exports","vue","@progress/kendo-vue-common","@progress/kendo-vue-buttons","@progress/kendo-svg-icons","@progress/kendo-vue-inputs","@progress/kendo-vue-layout","@progress/kendo-vue-intl"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoVueConversationalUi={},e.Vue,e.KendoVueCommon,e.KendoVueButtons,e.KendoSVGIcons,e.KendoVueInputs,e.KendoVueLayout,e.KendoVueIntl)}(this,(function(e,t,o,n,i,a,s,r){"use strict";function l(e){return"function"==typeof e||"[object Object]"===Object.prototype.toString.call(e)&&!t.isVNode(e)}const d=t.defineComponent({name:"KendoAIPromptHeader",props:{activeView:String,toolbarItems:Array,onActiveviewchange:Function},methods:{handleClick(e){this.$emit("activeviewchange",e)}},render(){let e;const{activeView:i,toolbarItems:a}=this.$props;return t.createVNode("div",{class:"k-prompt-header"},[t.createVNode(n.Toolbar,{overflow:"none",keyboardNavigation:!1,class:"k-toolbar-flat"},l(e=a.map((function(e){const a=o.getTemplate.call(this,{h:t.h,template:e.content,defaultRendering:null,additionalProps:{item:e}});return e.content?a:t.createVNode(n.Button,{type:"button",key:e.name,class:o.classNames("k-toolbar-item",{"k-selected":i===e.name}),size:"medium",themeColor:"primary",fillMode:"flat",rounded:"full",title:e.buttonText,svgIcon:e.buttonIcon,onClick:()=>this.handleClick(e.name)},{default:()=>[e.buttonText]})}),this))?e:{default:()=>[e]})])}}),u={name:"Output view",buttonText:"Output",buttonIcon:i.commentIcon},c={name:"Commands view",buttonIcon:i.moreHorizontalIcon},p={name:"prompt-view",buttonText:"Ask AI",buttonIcon:i.sparklesIcon},m={name:"@progress/kendo-vue-conversational-ui",productName:"Kendo UI for Vue",productCode:"KENDOUIVUE",productCodes:["KENDOUIVUE"],publishDate:0,version:"7.0.0-develop.7",licensingDocsUrl:"https://www.telerik.com/kendo-vue-ui/my-license/"},h=t.defineComponent({name:"KendoAIPrompt",props:{activeView:{type:String,required:!0},dir:String,toolbarItems:Array,outputs:Array,promptPlaceholder:String,streaming:Boolean,loading:Boolean,suggestionsView:{type:String,default:"classic"}},provide(){return{kendoAIPrompt:this.$data.contextState}},data(){return{showLicenseWatermark:!1,licenseMessage:"",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,suggestionsView:this.$props.suggestionsView}}},watch:{activeView(e){this.contextState.activeView=e},streaming(e){this.contextState.streaming=e},loading(e){this.contextState.loading=e}},methods:{onStateAction(e){this.contextState.activeView=e.activeView},onActiveViewChange(e){this.$emit("activeviewchange",e)},onPromptRequest(e,t){this.$emit("promptrequest",e,t)},onCommandExecute(e){this.$emit("commandexecute",e)},onCancel(){this.$emit("cancel")}},render(){o.validatePackage(m),this.showLicenseWatermark=o.shouldShowValidationUI(m),this.licenseMessage=o.getLicenseMessage(m);const e=o.getDefaultSlots(this),{toolbarItems:n,dir:i}=this.$props,a=(n||[p,u]).map((e=>{const t=o.templateRendering.call(this,e.content,o.getListeners.call(this));return{...e,content:t}})),s=this.showLicenseWatermark?t.createVNode(o.WatermarkOverlay,{message:this.licenseMessage},null):null;return t.createVNode("div",{class:"k-prompt",dir:i},[t.createVNode(d,{activeView:this.contextState.activeView,toolbarItems:a,onActiveviewchange:this.onActiveViewChange},null),e,s])}}),g=t.defineComponent({name:"KendoAIPromptFooter",render(){const e=o.getDefaultSlots(this);return t.createVNode("div",{class:"k-prompt-footer"},[t.createVNode("div",{class:"k-actions k-actions-start k-actions-horizontal k-prompt-actions"},[e])])}}),v=t.defineComponent({name:"KendoAIPromptContent",props:{onCancel:Function,streaming:Boolean},inject:{kendoAIPrompt:{default:null}},computed:{showFloatingButton(){var e;const t=(null==(e=this.kendoAIPrompt)?void 0:e.activeView)===u.name;return this.streaming&&t}},methods:{handleKeyDown(e){"Escape"===e.key&&this.showFloatingButton&&this.onCancel&&(e.preventDefault(),this.$props.onCancel())}},render(){const e=o.getDefaultSlots(this);return t.createVNode("div",{class:"k-prompt-content",onKeydown:this.handleKeyDown},[this.showFloatingButton&&t.createVNode(n.FloatingActionButton,{onClick:this.onCancel,svgIcon:i.stopSmIcon,size:"small",positionMode:"absolute",class:"k-prompt-stop-fab k-generating"},null),t.createVNode("div",{class:"k-prompt-view"},[e])])}}),k=t.defineComponent({name:"KendoAIPromptViewRender",inheritAttrs:!1,props:{name:String},inject:{kendoAIPrompt:{default:null}},render(){const e=o.getDefaultSlots(this);return this.kendoAIPrompt.activeView===this.$props.name?e:null}});function f(e){return"function"==typeof e||"[object Object]"===Object.prototype.toString.call(e)&&!t.isVNode(e)}const V=t.defineComponent({name:"KendoAIPromptExpander",props:{title:String},data:()=>({expanded:!0}),methods:{buttonClick(){this.expanded=!this.expanded}},render(){const e=o.getDefaultSlots(this),{title:a}=this.$props;return t.createVNode("div",{class:"k-prompt-expander"},[t.createVNode(n.Button,{type:"button",fillMode:"flat",svgIcon:this.expanded?i.chevronUpIcon:i.chevronDownIcon,title:a,onClick:this.buttonClick},f(a)?a:{default:()=>[a]}),this.expanded&&t.createVNode("div",{class:"k-prompt-expander-content"},[e])])}}),I=t.defineComponent({name:"KendoSuggestionGroup",props:{suggestions:{type:Array,required:!0},onSuggestionClick:{type:Function,required:!0},suggestionsView:{type:String,default:"classic"}},methods:{handleSuggestionClick(e,t){t.disabled||this.onSuggestionClick(e,t)},handleKeyDown(e,t){("Enter"===e.key||" "===e.key)&&(e.preventDefault(),this.onSuggestionClick(e,t))}},render(){const{suggestions:e,suggestionsView:n}=this.$props,i=()=>e.map((e=>t.createVNode("span",{role:"button",tabindex:e.disabled?-1:0,"aria-label":e.description,"aria-disabled":e.disabled,onClick:t=>!e.disabled&&this.handleSuggestionClick(t,e),onKeydown:t=>!e.disabled&&this.handleKeyDown(t,e),key:e.id,title:e.description,class:o.classNames("classic"===n?"k-prompt-suggestion":"k-suggestion",{"k-disabled":e.disabled})},[e.text])));return"classic"===n?i():t.createVNode("div",{role:"group",class:"k-suggestion-group"},[i()])}});function C(e){return"function"==typeof e||"[object Object]"===Object.prototype.toString.call(e)&&!t.isVNode(e)}const y=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 void 0!==this.$props.promptValue?this.$props.promptValue:this.value}},data:()=>({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 t=e.alternatives[0].transcript,o=this.value,n=o&&!o.endsWith(" ")&&!o.endsWith("\n");this.value=o+(n?" ":"")+t}},onSpeechStart(){},onSpeechEnd(){},getButtonDisabledState(){const e=void 0!==this.$props.promptValue?this.$props.promptValue:this.value;return!(null!=e&&e.trim())}},render(){const e="Generate",{promptSuggestions:s,enableSpeechToText:r}=this.$props,l=o.templateRendering.call(this,this.$props.promptInput,o.getListeners.call(this)),d=t.createVNode(a.TextArea,{value:this.computedValue,onInput:this.onTextChange,placeholder:"Ask or generate content with AI ...",rows:2,class:"!k-flex-col",inputSuffix:()=>r?t.createVNode(t.Fragment,null,[t.createVNode(a.InputSeparator,{orientation:"horizontal"},null),t.createVNode("div",{class:"k-input-suffix k-input-suffix-horizontal"},[t.createVNode(n.SpeechToTextButton,t.mergeProps({fillMode:"flat",onStart:this.onSpeechStart,onEnd:this.onSpeechEnd,onResult:this.onSpeechResult},"object"==typeof r?r:{}),null)])]):null},null),u=o.getTemplate.call(this,{h:t.h,template:l,defaultRendering:d}),c=o.templateRendering.call(this,this.$props.generateButton,o.getListeners.call(this)),m=t.createVNode(n.Button,{type:"button",themeColor:"primary",fillMode:"solid","aria-hidden":"true",rounded:"full",size:"medium",onClick:this.handleOnRequest,disabled:this.getButtonDisabledState(),title:"Generate",svgIcon:i.sparklesIcon},C(e)?e:{default:()=>[e]}),h=o.getTemplate.call(this,{h:t.h,template:c,defaultRendering:m});return t.createVNode(k,{name:p.name},{default:()=>{var e,o;return[t.createVNode(v,{streaming:null==(e=this.kendoAIPrompt)?void 0:e.streaming,onCancel:null==(o=this.kendoAIPrompt)?void 0:o.onCancel},{default:()=>[u,s&&s.length>0&&t.createVNode(V,{title:"Prompt Suggestions"},{default:()=>{var e;return[t.createVNode(I,{suggestionsView:null==(e=this.kendoAIPrompt)?void 0:e.suggestionsView,suggestions:s.map(((e,t)=>({id:t,text:e,description:e}))),onSuggestionClick:(e,t)=>this.handleSuggestionSelect(t.text)},null)]}})]}),t.createVNode(g,null,C(h)?h:{default:()=>[h]})]}})}}),b="avatar.alt",w="messageList.ariaLabel",N="aIPrompt.noOutputs",S={[b]:"Avatar",[w]:"Message list",[N]:"No output from Ai available"};function A(e){return"function"==typeof e||"[object Object]"===Object.prototype.toString.call(e)&&!t.isVNode(e)}let P=function(e){return e.positive="positive",e.negative="negative",e}({});const x=t.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:()=>({copiedIndex:-1,copyButtonIcon:i.copyIcon,contentRef:null}),methods:{retryPrompt(e){this.$emit("retry",e),this.kendoAIPrompt.onPromptRequest&&this.kendoAIPrompt.onPromptRequest.call(null,e.prompt,{...e,isRetry:!0}),this.scrollToTopOutput()},copyToClipboard(e,t){null!=e&&e.responseContent&&navigator.clipboard.writeText(e.responseContent),this.copiedIndex=t,this.copyButtonIcon=i.checkIcon,this.$emit("copy",null==e?void 0:e.responseContent),setTimeout((()=>{this.copyButtonIcon=i.copyIcon,this.copiedIndex=-1}),1e3)},outputRating(e,t){this.$emit("rating",e,t),this.kendoAIPrompt.onPromptRequest&&this.kendoAIPrompt.onPromptRequest.call(null,e.prompt,{...e,ratingType:t,isRetry:!1}),this.scrollToTopOutput()},scrollToTopOutput(){var e,t;null==(t=null==(e=this.contentRef)?void 0:e.scrollTo)||t.call(e,{top:0,behavior:"smooth"})}},render(){let e;const{outputs:o,showOutputRating:a,outputCard:l}=this.$props,d=r.provideLocalizationService(this),{header:c,body:p,actions:m}=l||{},h=t.createVNode(s.Card,null,{default:()=>[t.createVNode(s.CardHeader,null,{default:()=>[t.createVNode(s.CardTitle,null,{default:()=>[t.createVNode("span",{class:"k-skeleton k-skeleton-text k-skeleton-pulse",style:{width:"200px"}},null)]}),t.createVNode(s.CardSubtitle,null,{default:()=>[t.createVNode("span",{class:"k-skeleton k-skeleton-text k-skeleton-pulse",style:{width:"100%"}},null)]})]}),t.createVNode(s.CardBody,null,{default:()=>[t.createVNode("span",{class:"k-skeleton k-skeleton-rect k-skeleton-pulse",style:{height:"80px"}},null)]}),t.createVNode(s.CardActions,null,{default:()=>[t.createVNode("span",{class:"k-skeleton k-skeleton-text k-skeleton-pulse",style:{width:"100%"}},null)]})]}),g=null==o?void 0:o.map(((e,o)=>t.createVNode(s.Card,{key:`${e.id}_${o}`,class:e.class},{default:()=>[t.createVNode(s.CardHeader,null,{default:()=>[c?c(e):t.createVNode(t.Fragment,null,[e.title&&t.createVNode(s.CardTitle,null,{default:()=>[e.title]}),e.subTitle&&t.createVNode(s.CardSubtitle,null,{default:()=>[e.subTitle]})])]}),t.createVNode(s.CardBody,null,{default:()=>[p?p(e):e.responseContent]}),t.createVNode(s.CardActions,null,{default:()=>[m?m(e):t.createVNode(t.Fragment,null,[t.createVNode(n.Button,{type:"button",size:"medium",themeColor:"primary",fillMode:"flat",rounded:"medium",title:"Copy",svgIcon:this.copiedIndex===o?this.copyButtonIcon:i.copyIcon,"aria-hidden":"true",onClick:()=>this.copyToClipboard(e,o)},{default:()=>["Copy"]}),t.createVNode(n.Button,{type:"button",size:"medium",themeColor:"base",fillMode:"flat",rounded:"medium",title:"Retry",svgIcon:i.arrowRotateCwIcon,"aria-hidden":"true",onClick:()=>this.retryPrompt(e)},{default:()=>["Retry"]}),a&&t.createVNode(t.Fragment,null,[t.createVNode("span",{class:"k-spacer"},null),t.createVNode(n.Button,{type:"button",size:"medium",themeColor:"positive"===e.ratingType?"primary":"base",fillMode:"flat",rounded:"medium",title:"Rate up",svgIcon:i.thumbUpOutlineIcon,"aria-hidden":"true",onClick:()=>this.outputRating(e,"positive")},null),t.createVNode(n.Button,{type:"button",size:"medium",themeColor:"negative"===e.ratingType?"primary":"base",fillMode:"flat",rounded:"medium",title:"Rate down",svgIcon:i.thumbDownOutlineIcon,"aria-hidden":"true",onClick:()=>this.outputRating(e,"negative")},null)])])]})]}))),f=t.createVNode(s.Card,null,{default:()=>[t.createVNode(s.CardBody,null,A(e=d.toLanguageString(N,S[N]))?e:{default:()=>[e]})]});return t.createVNode(k,{name:u.name},{default:()=>{var e,o;return[t.createVNode(v,{ref:e=>this.contentRef=e,streaming:null==(e=this.kendoAIPrompt)?void 0:e.streaming,onCancel:null==(o=this.kendoAIPrompt)?void 0:o.onCancel},{default:()=>{var e,o;return[t.createVNode("div",{class:"k-card-list"},[(null==(e=this.kendoAIPrompt)?void 0:e.loading)&&h,g,(!g||0===g.length)&&!(null!=(o=this.kendoAIPrompt)&&o.loading)&&f])]}})]}})}}),R=t.defineComponent({name:"KendoAIPromptCommandsView",props:{commands:Array},inject:{kendoAIPrompt:{default:null}},render(){const{commands:e}=this.$props,o=e=>{var t;const o=e.target;(null==(t=o.items)||!t.length)&&this.kendoAIPrompt.onCommandExecute&&(this.$emit("commandexecute",o),this.kendoAIPrompt.onCommandExecute.call(null,o))};return t.createVNode(k,{name:c.name},{default:()=>{var n,i;return[t.createVNode(v,{streaming:null==(n=this.kendoAIPrompt)?void 0:n.streaming,onCancel:null==(i=this.kendoAIPrompt)?void 0:i.onCancel},{default:()=>[t.createVNode("div",{class:"k-prompt-view"},[t.createVNode(s.PanelBar,{onSelect:o,items:e},null)])]})]}})}});e.AIPrompt=h,e.AIPromptCommandsView=R,e.AIPromptContent=v,e.AIPromptFooter=g,e.AIPromptHeader=d,e.AIPromptOutputRating=P,e.AIPromptOutputView=x,e.AIPromptView=y,e.AIPromptViewRender=k,e.SuggestionGroup=I,e.commandsViewDefaults=c,e.outputViewDefaults=u,e.promptViewDefaults=p}));

package/index.d.mts

@@ -28,6 +28,10 @@ outputs: PropType<AIPromptOutputInterface[]>;
 promptPlaceholder: PropType<string>;
 streaming: PropType<boolean>;
 loading: PropType<boolean>;
+suggestionsView: {
+type: PropType<SuggestionsView>;
+default: string;
+};
 }>, {}, {
 showLicenseWatermark: boolean;
 licenseMessage: string;
@@ -49,7 +53,13 @@ outputs: PropType<AIPromptOutputInterface[]>;
 promptPlaceholder: PropType<string>;
 streaming: PropType<boolean>;
 loading: PropType<boolean>;
-}>> & Readonly<{}>, {}, {}, {}, {}, string, () => {
+suggestionsView: {
+type: PropType<SuggestionsView>;
+default: string;
+};
+}>> & Readonly<{}>, {
+suggestionsView: SuggestionsView;
+}, {}, {}, {}, string, () => {
 kendoAIPrompt: any;
 }, true, {}, any>;
 
@@ -126,6 +136,7 @@ declare interface AIPromptContextInterface {
     activeView?: string;
     streaming?: boolean;
     loading?: boolean;
+    suggestionsView?: SuggestionsView;
     onCancel?: () => void;
     onPromptRequest?: (prompt?: string, outputItem?: AIPromptOutputInterface) => void;
     onCommandExecute?: (command: AIPromptCommandInterface) => void;
@@ -324,6 +335,13 @@ export declare interface AIPromptProps {
      * Called when the prompt is cancelled.
      */
     onCancel?: () => void;
+    /**
+     * Optionally specifies the rendering for the suggestions displayed in the AI Prompt component.
+     * 'suggestionsView' can be either 'classic' or 'modern'.
+     * - 'classic': Uses a rectangular styling for suggestions.
+     * - 'modern': Uses a chip-like styling for suggestions.
+     */
+    suggestionsView?: SuggestionsView;
 }
 
 /**
@@ -398,7 +416,7 @@ export declare interface AIPromptViewRenderProps {
 
 /**
  * Represents the structure of a chat suggestion item that can be displayed above the message input.
- *
+ * @hidden
  * @interface ChatSuggestion
  */
 export declare interface ChatSuggestion {
@@ -406,6 +424,7 @@ export declare interface ChatSuggestion {
     text: string;
     description?: string;
     disabled?: boolean;
+    suggestionsView?: SuggestionsView;
 }
 
 /**
@@ -460,6 +479,10 @@ onSuggestionClick: {
 type: PropType<(event: MouseEvent, suggestion: ChatSuggestion) => void>;
 required: true;
 };
+suggestionsView: {
+type: PropType<SuggestionsView>;
+default: string;
+};
 }>, {}, {}, {}, {
 handleSuggestionClick(event: MouseEvent, suggestion: ChatSuggestion): void;
 handleKeyDown(event: KeyboardEvent, suggestion: ChatSuggestion): void;
@@ -472,11 +495,25 @@ onSuggestionClick: {
 type: PropType<(event: MouseEvent, suggestion: ChatSuggestion) => void>;
 required: true;
 };
-}>> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+suggestionsView: {
+type: PropType<SuggestionsView>;
+default: string;
+};
+}>> & Readonly<{}>, {
+suggestionsView: SuggestionsView;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 
 export declare interface SuggestionGroupProps {
     suggestions: ChatSuggestion[];
     onSuggestionClick: (event: MouseEvent, suggestion: ChatSuggestion) => void;
 }
 
+/**
+ * Represents the rendering options for suggestions in the AI Prompt component.
+ * 'suggestionsView' can be either 'classic' or 'modern'.
+ * - 'classic': Uses a rectangular styling for suggestions.
+ * - 'modern': Uses a chip-like styling for suggestions.
+ */
+export declare type SuggestionsView = 'classic' | 'modern';
+
 export { }

package/index.d.ts

@@ -28,6 +28,10 @@ outputs: PropType<AIPromptOutputInterface[]>;
 promptPlaceholder: PropType<string>;
 streaming: PropType<boolean>;
 loading: PropType<boolean>;
+suggestionsView: {
+type: PropType<SuggestionsView>;
+default: string;
+};
 }>, {}, {
 showLicenseWatermark: boolean;
 licenseMessage: string;
@@ -49,7 +53,13 @@ outputs: PropType<AIPromptOutputInterface[]>;
 promptPlaceholder: PropType<string>;
 streaming: PropType<boolean>;
 loading: PropType<boolean>;
-}>> & Readonly<{}>, {}, {}, {}, {}, string, () => {
+suggestionsView: {
+type: PropType<SuggestionsView>;
+default: string;
+};
+}>> & Readonly<{}>, {
+suggestionsView: SuggestionsView;
+}, {}, {}, {}, string, () => {
 kendoAIPrompt: any;
 }, true, {}, any>;
 
@@ -126,6 +136,7 @@ declare interface AIPromptContextInterface {
     activeView?: string;
     streaming?: boolean;
     loading?: boolean;
+    suggestionsView?: SuggestionsView;
     onCancel?: () => void;
     onPromptRequest?: (prompt?: string, outputItem?: AIPromptOutputInterface) => void;
     onCommandExecute?: (command: AIPromptCommandInterface) => void;
@@ -324,6 +335,13 @@ export declare interface AIPromptProps {
      * Called when the prompt is cancelled.
      */
     onCancel?: () => void;
+    /**
+     * Optionally specifies the rendering for the suggestions displayed in the AI Prompt component.
+     * 'suggestionsView' can be either 'classic' or 'modern'.
+     * - 'classic': Uses a rectangular styling for suggestions.
+     * - 'modern': Uses a chip-like styling for suggestions.
+     */
+    suggestionsView?: SuggestionsView;
 }
 
 /**
@@ -398,7 +416,7 @@ export declare interface AIPromptViewRenderProps {
 
 /**
  * Represents the structure of a chat suggestion item that can be displayed above the message input.
- *
+ * @hidden
  * @interface ChatSuggestion
  */
 export declare interface ChatSuggestion {
@@ -406,6 +424,7 @@ export declare interface ChatSuggestion {
     text: string;
     description?: string;
     disabled?: boolean;
+    suggestionsView?: SuggestionsView;
 }
 
 /**
@@ -460,6 +479,10 @@ onSuggestionClick: {
 type: PropType<(event: MouseEvent, suggestion: ChatSuggestion) => void>;
 required: true;
 };
+suggestionsView: {
+type: PropType<SuggestionsView>;
+default: string;
+};
 }>, {}, {}, {}, {
 handleSuggestionClick(event: MouseEvent, suggestion: ChatSuggestion): void;
 handleKeyDown(event: KeyboardEvent, suggestion: ChatSuggestion): void;
@@ -472,11 +495,25 @@ onSuggestionClick: {
 type: PropType<(event: MouseEvent, suggestion: ChatSuggestion) => void>;
 required: true;
 };
-}>> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+suggestionsView: {
+type: PropType<SuggestionsView>;
+default: string;
+};
+}>> & Readonly<{}>, {
+suggestionsView: SuggestionsView;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 
 export declare interface SuggestionGroupProps {
     suggestions: ChatSuggestion[];
     onSuggestionClick: (event: MouseEvent, suggestion: ChatSuggestion) => void;
 }
 
+/**
+ * Represents the rendering options for suggestions in the AI Prompt component.
+ * 'suggestionsView' can be either 'classic' or 'modern'.
+ * - 'classic': Uses a rectangular styling for suggestions.
+ * - 'modern': Uses a chip-like styling for suggestions.
+ */
+export declare type SuggestionsView = 'classic' | 'modern';
+
 export { }

package/package-metadata.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={name:"@progress/kendo-vue-conversational-ui",productName:"Kendo UI for Vue",productCode:"KENDOUIVUE",productCodes:["KENDOUIVUE"],publishDate: 1754860622,version:"7.0.0-develop.6",licensingDocsUrl:"https://www.telerik.com/kendo-vue-ui/my-license/"};exports.packageMetadata=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={name:"@progress/kendo-vue-conversational-ui",productName:"Kendo UI for Vue",productCode:"KENDOUIVUE",productCodes:["KENDOUIVUE"],publishDate: 1754905645,version:"7.0.0-develop.7",licensingDocsUrl:"https://www.telerik.com/kendo-vue-ui/my-license/"};exports.packageMetadata=e;

package/package-metadata.mjs

@@ -10,8 +10,8 @@ const e = {
   productName: "Kendo UI for Vue",
   productCode: "KENDOUIVUE",
   productCodes: ["KENDOUIVUE"],
-  publishDate: 1754860622,
-  version: "7.0.0-develop.6",
+  publishDate: 1754905645,
+  version: "7.0.0-develop.7",
   licensingDocsUrl: "https://www.telerik.com/kendo-vue-ui/my-license/"
 };
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-vue-conversational-ui",
-  "version": "7.0.0-develop.6",
+  "version": "7.0.0-develop.7",
   "description": "TODO",
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -19,11 +19,11 @@
   "sideEffects": false,
   "peerDependencies": {
     "@progress/kendo-licensing": "^1.7.0",
-    "@progress/kendo-vue-buttons": "7.0.0-develop.6",
-    "@progress/kendo-vue-common": "7.0.0-develop.6",
-    "@progress/kendo-vue-intl": "7.0.0-develop.6",
-    "@progress/kendo-vue-inputs": "7.0.0-develop.6",
-    "@progress/kendo-vue-layout": "7.0.0-develop.6",
+    "@progress/kendo-vue-buttons": "7.0.0-develop.7",
+    "@progress/kendo-vue-common": "7.0.0-develop.7",
+    "@progress/kendo-vue-intl": "7.0.0-develop.7",
+    "@progress/kendo-vue-inputs": "7.0.0-develop.7",
+    "@progress/kendo-vue-layout": "7.0.0-develop.7",
     "@progress/kendo-svg-icons": "^4.4.0",
     "vue": "^3.0.2"
   },
@@ -44,7 +44,7 @@
     "package": {
       "productName": "Kendo UI for Vue",
       "productCode": "KENDOUIVUE",
-      "publishDate": 1754860622,
+      "publishDate": 1754905645,
       "licensingDocsUrl": "https://www.telerik.com/kendo-vue-ui/my-license/"
     }
   },