@progress/kendo-react-conversational-ui/dist/cdn/js/kendo-react-conversational-ui.js

React Chat component allows the user to participate in chat sessions with users or chat bots. KendoReact Conversational UI components

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * 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("react"),require("@progress/kendo-react-common"),require("@progress/kendo-react-intl"),require("prop-types"),require("@progress/kendo-svg-icons"),require("@progress/kendo-react-buttons"),require("@progress/kendo-react-layout"),require("@progress/kendo-react-inputs"),require("@progress/kendo-react-popup")):"function"==typeof define&&define.amd?define(["exports","react","@progress/kendo-react-common","@progress/kendo-react-intl","prop-types","@progress/kendo-svg-icons","@progress/kendo-react-buttons","@progress/kendo-react-layout","@progress/kendo-react-inputs","@progress/kendo-react-popup"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactConversationalUi={},e.React,e.KendoReactCommon,e.KendoReactIntl,e.PropTypes,e.KendoSvgIcons,e.KendoReactButtons,e.KendoReactLayout,e.KendoReactInputs,e.KendoReactPopup)}(this,(function(e,t,s,n,o,a,r,i,l,c){"use strict";function p(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(s){if("default"!==s){var n=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(t,s,n.get?n:{enumerable:!0,get:function(){return e[s]}})}})),t.default=e,Object.freeze(t)}var m=p(t);let u=class extends m.Component{componentDidUpdate(e){!e.selected&&this.props.selected&&this.elementToFocus.focus()}};const d=class extends u{render(){return m.createElement("div",{className:this.getClassNames(),tabIndex:this.props.tabIndex,onClick:()=>this.props.onRequestSelection(this.props.item.selectionIndex),onFocus:()=>this.props.onRequestSelection(this.props.item.selectionIndex),ref:e=>{this.elementToFocus=e}},this.getTimestampView(),this.getMainView(),this.getStatusView())}getMainView(){return this.props.item.typing?m.createElement("div",{className:"k-chat-bubble"},m.createElement("div",{className:"k-typing-indicator"},m.createElement("span",null),m.createElement("span",null),m.createElement("span",null))):this.props.template?m.createElement(this.props.template,{item:this.props.item}):this.props.item.text?m.createElement("div",{className:"k-chat-bubble"},this.props.item.text):null}getTimestampView(){let e=null;return this.props.item.timestamp&&(e=m.createElement("time",{className:"k-message-time","aria-hidden":!this.props.selected},n.provideIntlService(this).formatDate(this.props.item.timestamp,this.props.dateFormat))),e}getStatusView(){let e=null;return this.props.item.status&&(e=m.createElement("span",{className:"k-message-status"},this.props.item.status)),e}getClassNames(){return s.classNames({"k-only":this.props.isOnlyItemInGroup},{"k-first":this.props.isFirstItemInGroup&&!this.props.isOnlyItemInGroup},{"k-last":this.props.isLastItemInGroup&&!this.props.isOnlyItemInGroup},{"k-selected":this.props.selected},{"k-focus":this.props.selected},"k-message")}};d.defaultProps={dateFormat:"g",tabIndex:-1};let h=d;n.registerForIntl(h);const g=(e,t)=>e&&t.author&&e.id===t.author.id,k=e=>e[e.length-1],I=e=>(t,s,n)=>{const o=n===e-1;return((e,t)=>{const s=t.timestamp,n=k(e);if(s&&(!n||((e,t)=>e&&t&&(t.getDate()!==e.getDate()||t.getMonth()!==e.getMonth()||t.getFullYear()!==e.getFullYear()))(s,n.timestamp))){const t={type:"date-marker",timestamp:s,trackBy:s.getTime()};e.push(t)}})(t,s),((e,t,s)=>{const n=k(e);let o;t.typing&&!s||(n&&"message-group"===n.type&&(o=n.messages),o&&g(t.author,k(o))?o.push(t):e.push({type:"message-group",messages:[t],author:t.author,timestamp:t.timestamp,trackBy:t}))})(t,s,o),s.attachments&&s.attachments.length>1&&t.push({type:"attachment-group",attachments:s.attachments,attachmentLayout:s.attachmentLayout,timestamp:s.timestamp,trackBy:s}),s.suggestedActions&&o&&t.push({type:"action-group",actions:s.suggestedActions,timestamp:s.timestamp,trackBy:s}),t};let E=class extends u{constructor(){super(...arguments),this.onKeyDown=e=>{e.keyCode===s.Keys.enter&&this.props.onActionExecute(this.props.item,e)}}render(){return m.createElement("span",{role:"button",className:this.getClassNames(),onClick:e=>this.props.onActionExecute(this.props.item,e),ref:e=>{this.elementToFocus=e},onKeyDown:this.onKeyDown,tabIndex:0},this.props.item.title||this.props.item.value)}getClassNames(){return s.classNames("k-quick-reply",{"k-first":this.props.isFirstItemInGroup},{"k-last":this.props.isLastItemInGroup},{"k-selected":this.props.selected},{"k-focus":this.props.selected})}},v=class extends m.Component{constructor(){super(...arguments),this.state={selectedItemIndex:null},this.onRequestContainerSelection=()=>this.props.onRequestSelection(this.props.group.selectionIndex),this.onKeyDown=e=>{let t,n,o=null;this.isKeyboardNavigationLeftRight?(t=s.Keys.left,n=s.Keys.right):(t=s.Keys.up,n=s.Keys.down),e.keyCode===t?o=this.navigate(!1):e.keyCode===n&&(o=this.navigate(!0)),null!==o&&(e.preventDefault(),e.stopPropagation())}}static getDerivedStateFromProps(e,t){return e.selected||null===t.selectedItemIndex?e.selected&&null===t.selectedItemIndex?{selectedItemIndex:0}:null:{selectedItemIndex:null}}navigate(e,t=0){let s=null;const n=this.state.selectedItemIndex;return e?null===n?s=t:n<this.getLastSelectionIndex()&&(s=n+1):null===n?s=0:n>0&&(s=n-1),null!==s&&this.setState({selectedItemIndex:s}),s}get isKeyboardNavigationLeftRight(){return!0}getLastSelectionIndex(){let e=-1;if("action-group"===this.props.group.type){const t=this.props.group;e=t.actions?t.actions.length-1:-1}else if("attachment-group"===this.props.group.type){const t=this.props.group;e=t.attachments?t.attachments.length-1:-1}return e}};class C extends v{constructor(e){super(e)}render(){const e=this.props.group.actions?this.props.group.actions.length-1:0;return m.createElement("div",{className:this.getClassNames(),onClick:this.onRequestContainerSelection,onKeyDown:this.onKeyDown},this.props.group.actions&&this.props.group.actions.map(((t,s)=>m.createElement(E,{item:t,onActionExecute:this.props.onActionExecute,selected:s===this.state.selectedItemIndex,isFirstItemInGroup:0===s,isLastItemInGroup:s===e,key:s}))))}getClassNames(){return s.classNames("k-quick-replies")}}let y=class extends u{render(){return m.createElement("div",{className:this.getClassNames(),tabIndex:this.getTabIndexValue(),onClick:this.props.onClick,ref:e=>{this.elementToFocus=e}},this.props.template?m.createElement(this.props.template,{item:this.props.item}):m.createElement("div",{className:"k-card"},m.createElement("div",{className:"k-card-body"},this.getTitleView(),this.getSubtitleView(),this.getContentView())))}getTabIndexValue(){if(void 0!==this.props.tabbable)return this.props.tabbable?0:-1}getClassNames(){return s.classNames({"k-selected":this.props.selected},{"k-focus":this.props.selected},{"k-first":this.props.isFirstItemInGroup},{"k-last":this.props.isLastItemInGroup})}getTitleView(){return this.props.item.title?m.createElement("h5",{className:"k-card-title"},this.props.item.title):null}getSubtitleView(){return this.props.item.subtitle?m.createElement("h6",{className:"k-card-subtitle"},this.props.item.subtitle):null}getContentView(){return 0===this.props.item.contentType.indexOf("image/")?m.createElement("img",{src:this.props.item.content}):this.props.item.content}};class f extends v{render(){const e=this.isCardDeckLayout(this.props),t=m.createElement("div",{className:this.getClassNames(),onKeyDown:e?void 0:this.onKeyDown},this.props.group.attachments.map(((e,t)=>m.createElement(y,{item:e,template:this.props.itemTemplate,selected:t===this.state.selectedItemIndex,tabbable:this.props.isLastGroup&&t===this.state.selectedItemIndex,isFirstItemInGroup:0===t,isLastItemInGroup:t===this.getLastItemIndex(),onClick:()=>this.onAttachmentClick(t),key:t}))));return e?m.createElement("div",{className:"k-card-deck-scrollwrap",onKeyDown:this.onKeyDown},this.getLeftScrollBtn(),t,this.getRightScrollBtn()):t}get isKeyboardNavigationLeftRight(){return this.isCardDeckLayout(this.props)}getLastItemIndex(){return this.props.group.attachments.length-1}getLeftScrollBtn(){let e=null;return this.isCardDeckLayout(this.props)&&this.state.selectedItemIndex&&(e=m.createElement(r.Button,{icon:"chevron-left",onClick:()=>this.onNavigateBtnClick(!1),svgIcon:a.chevronLeftIcon})),e}getRightScrollBtn(){let e=null;return this.isCardDeckLayout(this.props)&&this.state.selectedItemIndex!==this.getLastItemIndex()&&(e=m.createElement(r.Button,{icon:"chevron-right",onClick:()=>this.onNavigateBtnClick(!0),svgIcon:a.chevronRightIcon})),e}onAttachmentClick(e){this.onRequestContainerSelection(),this.setState({selectedItemIndex:e})}onNavigateBtnClick(e){this.onRequestContainerSelection(),this.navigate(e,1)}isCardDeckLayout(e){return"list"!==e.group.attachmentLayout}getClassNames(){return s.classNames({"k-card-list":this.props.group.attachmentLayout,"k-card-deck":this.isCardDeckLayout(this.props)})}}let b=class extends m.Component{render(){const e=this.props.item;return m.createElement("div",{className:"k-timestamp"},n.provideIntlService(this).formatDate(e.timestamp,"D"))}};n.registerForIntl(b);const w="newMessage.sendButton",x="newMessage.optionsButton",N="newMessage.messageInput",T="avatar.alt",S="messageList.ariaLabel",R="aIPrompt.noOutputs",B="aIPrompt.cancel",D={[w]:"Send",[x]:"Options",[N]:"Message",[T]:"Avatar",[S]:"Message list",[B]:"Cancel",[R]:"No output from AI available"};class L extends m.Component{render(){const{avatarUrl:e,avatarAltText:t,name:s}=this.props.group.author,o=n.provideLocalizationService(this);return m.createElement("div",{className:this.getMsgGroupClassNames()},s&&m.createElement("p",{className:"k-author"},s),e&&m.createElement(i.Avatar,{type:"image"},m.createElement("img",{src:e,alt:void 0!==t?t:o.toLanguageString(T,D[T])})),this.getGroupMessagesView())}getMsgGroupClassNames(){return s.classNames("k-message-group",{"k-no-avatar":!this.props.group.author.avatarUrl,"k-alt":g(this.props.user,this.props.group.messages[0])})}getGroupMessagesView(){const e=this.props.group.messages.length-1;return this.props.group.messages.map(((t,s)=>{const n=[m.createElement(this.props.message,{item:t,template:this.props.itemTemplate,selected:t.selectionIndex===this.props.selectedItemIndex,onRequestSelection:this.props.onRequestSelection,tabIndex:s===e&&this.props.isLastGroup?0:-1,isFirstItemInGroup:0===s,isLastItemInGroup:s===e,isOnlyItemInGroup:0===e,key:s})];return t.attachments&&1===t.attachments.length&&n.push(m.createElement(y,{item:t.attachments[0],template:this.props.attachmentTemplate,selected:!1,key:`att-${s}`})),n}))}}const M=m.forwardRef(((e,t)=>{const{className:n,...o}=e,a=m.useRef(null),i=m.useRef(null);m.useImperativeHandle(i,(()=>({element:a.current,props:e}))),m.useImperativeHandle(t,(()=>i.current));const l=m.useMemo((()=>s.classNames("k-chat-toolbar k-toolbar",n)),[n]);return m.useEffect((()=>{null!==a.current&&s.focusFirstFocusableChild(a.current,[...s.TABBABLE_ELEMENTS])}),[]),m.createElement(r.Toolbar,{id:e.id,ref:e=>{e&&(a.current=e.element)},className:l,...o},m.createElement("div",{className:"k-button-list k-toolbar-group"},e.children))}));M.displayName="KendoReactChatToolbar";class V extends m.Component{constructor(){super(...arguments),this.state={focused:!1},this.inputEl=null,this.toolbarBtnRef=m.createRef(),this.onInputKeyDown=e=>{switch(e.key){case"Enter":return this.sendMessage(e);case"F10":return this.openToolbar(e);default:return}},this.sendMessage=e=>{if(this.props.onMessageSend&&null!==this.inputEl){const t=this.inputEl.value;if(t){const s={author:this.props.user,text:t,timestamp:new Date};this.props.onMessageSend(s,e)}}null!==this.inputEl&&(this.inputEl.value=null)},this.openToolbar=e=>{null!==this.toolbarBtnRef.current&&(e.preventDefault(),this.props.onToolbarActionButtonClick(!this.props.showToolbar,e))}}render(){const e=n.provideLocalizationService(this),t=m.createElement("input",{type:"text",className:this.getClassNames(),placeholder:this.props.placeholder,onKeyDown:this.onInputKeyDown,onFocus:()=>this.setState({focused:!0}),onBlur:()=>this.setState({focused:!1}),ref:e=>{this.inputEl=e},"aria-label":e.toLanguageString(N,D[N])}),s=m.createElement(r.Button,{fillMode:"flat",themeColor:"base",className:"k-chat-send",icon:"paper-plane",svgIcon:a.paperPlaneIcon,onClick:this.sendMessage,"aria-label":e.toLanguageString(w,D[w]),dir:this.props.isDirectionRightToLeft?"rtl":void 0}),o=m.createElement(r.Button,{ref:this.toolbarBtnRef,fillMode:"flat",themeColor:"base",icon:"more-horizontal",svgIcon:a.moreHorizontalIcon,onClick:e=>this.props.onToolbarActionButtonClick(!this.props.showToolbar,e),"aria-label":e.toLanguageString(x,D[x])});return m.createElement(m.Fragment,null,m.createElement("span",{className:"k-message-box k-textbox k-input k-input-md k-rounded-md k-input-solid"},this.props.MessageBox?m.createElement(this.props.MessageBox,{messageInput:t,sendButton:s,toolbarButton:o}):m.createElement(m.Fragment,null,t,m.createElement("span",{className:"k-input-separator k-input-separator-vertical"}),m.createElement("span",{className:"k-input-suffix k-input-suffix-horizontal"},this.props.toolbar&&o,s))),this.props.showToolbar&&m.createElement(M,null,this.props.toolbar))}focusInput(){null!==this.inputEl&&this.inputEl.focus()}getClassNames(){return s.classNames("k-input-inner",{"k-focus":this.state.focused})}}const A=Object.freeze({name:"@progress/kendo-react-conversational-ui",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:0,version:"11.4.0",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"}),P=class e extends m.Component{constructor(e){super(e),this.viewItems=[],this.isDirectionRightToLeft=!1,this.scrollToBottomOnLoadingData=!0,this.showLicenseWatermark=!1,this.onFocus=()=>{clearTimeout(this.timeoutIdForChatLosingFocus)},this.onBlur=()=>{this.timeoutIdForChatLosingFocus=window.setTimeout((()=>{this.setState({selectedItemIndex:null})}),0)},this.onSelectionRequested=e=>{this.setState({selectedItemIndex:e})},this.onKeyDown=e=>{let t=null;const n=null!==this.state.selectedItemIndex?this.state.selectedItemIndex:this.viewItems.lastSelectionIndex;e.keyCode===s.Keys.up?null===n?t=0:n>0&&(t=n-1):e.keyCode===s.Keys.down&&(null===n?t=0:n<this.viewItems.lastSelectionIndex&&(t=n+1)),null!==t&&(this.setState({selectedItemIndex:t}),e.preventDefault())},this.onMessageSend=(e,t)=>{s.dispatchEvent(this.props.onMessageSend,t,this,{message:e})},this.onActionExecute=(e,t)=>{if(s.dispatchEvent(this.props.onActionExecute,t,this,{action:e}),!t.isDefaultPrevented()){switch(e.type){case"reply":this.onMessageSend({author:this.props.user,text:e.value,timestamp:new Date},t);break;case"call":window.open("tel:"+e.value);break;case"openUrl":window.open(e.value)}this.newMsgComp.focusInput()}},this.showLicenseWatermark=!s.validatePackage(A,{component:"Chat"}),this.licenseMessage=s.getLicenseMessage(A),this.state={selectedItemIndex:null,isFirstRender:!0}}render(){this.viewItems=this.getViewItemsFromMsgs(this.props.messages),this.isDirectionRightToLeft=this.checkIsDirectionRightToLeft(this.props);const e=n.provideLocalizationService(this);return m.createElement("div",{style:{width:this.props.width,position:"relative"},onKeyDown:this.onKeyDown,className:this.getClassNames(),ref:e=>{this.chatWrapperEl=e}},m.createElement("div",{className:"k-message-list k-avatars",onBlur:this.onBlur,onFocus:this.onFocus,role:"log","aria-label":e.toLanguageString(S,D[S]),"aria-live":"polite",onScroll:e=>{this.scrollToBottomOnLoadingData=e.currentTarget.scrollTop===e.currentTarget.scrollHeight-e.currentTarget.clientHeight},ref:e=>{this.viewItemsWrapperEl=e}},m.createElement("div",{className:"k-message-list-content"},this.renderViewItems())),m.createElement(V,{user:this.props.user,onMessageSend:this.onMessageSend,isDirectionRightToLeft:this.isDirectionRightToLeft,ref:e=>{this.newMsgComp=e},placeholder:this.props.placeholder,MessageBox:this.props.messageBox,toolbar:this.props.toolbar,onToolbarActionButtonClick:this.props.onToolbarActionExecute,showToolbar:this.props.showToolbar}),this.showLicenseWatermark&&m.createElement(s.WatermarkOverlay,{message:this.licenseMessage}))}componentDidMount(){this.setState({isFirstRender:!1},(()=>{this.nextTickId=window.setTimeout((()=>this.scrollViewItemsToBottom()),250)}))}componentWillUnmount(){clearTimeout(this.nextTickId)}componentDidUpdate(e){e.messages.length!==this.props.messages.length&&this.scrollToBottomOnLoadingData&&this.scrollViewItemsToBottom()}getClassNames(){return s.classNames("k-chat",this.props.className,{"k-rtl":this.isDirectionRightToLeft})}checkIsDirectionRightToLeft(e){return!!(void 0!==e.dir?"rtl"===e.dir:this.chatWrapperEl&&"rtl"===getComputedStyle(this.chatWrapperEl).direction)}renderViewItems(){const t=this.viewItems.length-1;return this.viewItems.map(((s,n)=>"date-marker"===s.type?m.createElement(b,{item:s,key:n}):"message-group"===s.type?m.createElement(L,{group:s,itemTemplate:this.props.messageTemplate,attachmentTemplate:this.props.attachmentTemplate,user:this.props.user,selectedItemIndex:this.state.selectedItemIndex,onRequestSelection:this.onSelectionRequested,isLastGroup:n===t,key:n,message:this.props.message||e.defaultProps.message}):"attachment-group"===s.type?m.createElement(f,{group:s,itemTemplate:this.props.attachmentTemplate,onRequestSelection:this.onSelectionRequested,selected:s.selectionIndex===this.state.selectedItemIndex,isLastGroup:n===t,key:n}):"action-group"===s.type?m.createElement(C,{group:s,onActionExecute:this.onActionExecute,onRequestSelection:this.onSelectionRequested,selected:s.selectionIndex===this.state.selectedItemIndex,isLastGroup:n===t,key:n}):void 0))}scrollViewItemsToBottom(){this.viewItemsWrapperEl&&(this.viewItemsWrapperEl.scrollTop=this.viewItemsWrapperEl.scrollHeight-this.viewItemsWrapperEl.clientHeight)}getViewItemsFromMsgs(e){return e.length>0?(e=>{const t=e.slice().reduce(I(e.length),[]);return function(e){let t=0;e.forEach((e=>{"message-group"===e.type?e.messages.forEach((e=>{e.selectionIndex=t++})):("attachment-group"===e.type||"action-group"===e.type)&&(e.selectionIndex=t++)})),e.lastSelectionIndex=t-1}(t),t})(e):[]}};P.propTypes={messages:o.arrayOf(o.object),user:o.object,messageTemplate:o.any,attachmentTemplate:o.any,width:o.oneOfType([o.string,o.number]),onMessageSend:o.func,onActionExecute:o.func,dir:o.string,messageBox:o.any},P.defaultProps={messages:[],dateFormat:"g",message:h};let F=P;const K=e=>{const{suggestions:t,onSuggestionClick:n,suggestionsView:o}=e,a=()=>t.map((e=>m.createElement("span",{role:"button",tabIndex:e.disabled?-1:0,"aria-label":e.description,"aria-disabled":e.disabled,onClick:t=>!e.disabled&&n(t,e),onKeyDown:t=>!e.disabled&&((e,t)=>{("Enter"===e.key||" "===e.key)&&(e.preventDefault(),n(e,t))})(t,e),key:e.id,title:e.description,className:s.classNames("classic"===o?"k-prompt-suggestion":"k-suggestion",{"k-disabled":e.disabled})},e.text)));return"classic"===o?a():m.createElement("div",{role:"group",className:"k-suggestion-group"},a())};class O extends m.Component{constructor(){super(...arguments),this.onBtnClick=(e,t)=>{s.dispatchEvent(this.props.onActionExecute,t,this,{action:e})}}render(){return m.createElement("div",{className:"k-card"},m.createElement("img",{className:"k-card-image",src:this.props.imageUrl,style:{maxWidth:this.props.imageMaxWidth}}),m.createElement("div",{className:"k-card-body"},this.getTitleView(),this.getSubtitleView()),m.createElement("div",{className:"k-card-actions k-card-actions-vertical"},this.getActionsView()))}getActionsView(){return this.props.actions.map(((e,t)=>m.createElement("span",{className:"k-card-action",key:t},m.createElement(r.Button,{fillMode:"flat",onClick:t=>this.onBtnClick(e,t)},e.title))))}getTitleView(){let e=null;return this.props.title&&(e=m.createElement("h5",{className:"k-card-title"},this.props.title)),e}getSubtitleView(){let e=null;return this.props.subtitle&&(e=m.createElement("h6",{className:"k-card-subtitle"},this.props.subtitle)),e}}const q=e=>{const{activeView:s,toolbarItems:n,activeViewChange:o}=e;return t.createElement("div",{className:"k-prompt-header"},t.createElement(r.Toolbar,{keyboardNavigation:!1,role:"toolbar",className:"k-toolbar-flat"},n.map((e=>t.isValidElement(e)?e:t.createElement(r.Button,{key:e.name,className:s===e.name?"k-selected":"",size:"medium",themeColor:"primary",fillMode:"flat",rounded:"full",title:e.buttonText,svgIcon:e.buttonIcon,onClick:()=>(e=>{null==o||o.call(null,e)})(e.name)},e.buttonText)))))},G={name:"Output view",buttonText:"Output",buttonIcon:a.commentIcon},z={name:"Commands view",buttonIcon:a.moreHorizontalIcon},W={name:"Prompt view",buttonText:"Ask AI",buttonIcon:a.sparklesIcon},j=t.createContext([{},()=>{}]),U=()=>t.useContext(j),H=e=>{const{children:s}=e;return t.createElement("div",{className:"k-prompt-footer"},t.createElement("div",{className:"k-actions k-actions-start k-actions-horizontal k-prompt-actions"},s))},$=t.forwardRef(((e,s)=>{const{children:o,streaming:i,onCancel:l}=e,c=n.useLocalization().toLanguageString(B,D[B]),[p]=U(),m=p.activeView===G.name,u=i&&m,d=t.useCallback((e=>{"Escape"===e.key&&u&&l&&(e.preventDefault(),l())}),[u,l]);return t.createElement("div",{className:"k-prompt-content",ref:s,onKeyDown:d},u&&t.createElement(r.FloatingActionButton,{onClick:l,svgIcon:a.stopSmIcon,icon:"stop-sm",size:"medium",positionMode:"absolute",className:"k-prompt-stop-fab k-generating","aria-label":c,title:c}),t.createElement("div",{className:"k-prompt-view"},o))}));$.displayName="KendoReactAIPromptContent";const _=e=>{const[t]=U();return t.activeView===e.name?e.children:null},Y=e=>{const[s,n]=t.useState(!0),{children:o,title:i}=e;return t.createElement("div",{className:"k-prompt-expander"},t.createElement(r.Button,{"aria-controls":e.id,fillMode:"flat",svgIcon:s?a.chevronUpIcon:a.chevronDownIcon,title:i,onClick:()=>n(!s),"aria-expanded":s},i),s&&t.createElement("div",{id:e.id,className:"k-prompt-expander-content"},o))},J=e=>null==e?void 0:e.map((e=>t.createElement(i.PanelBarItem,{title:e.text,key:e.id,svgIcon:e.svgIcon,data:e},e.children&&J(e.children||[])))),Q=({show:e=!1,anchor:s,onOpen:n,onClose:o,animate:a=!0,appendTo:r,popupOptions:i={},children:l,style:p})=>t.createElement(c.Popup,{show:e,anchor:s,style:p,animate:a,appendTo:r,onOpen:n,onClose:o,...i},l),X=({placeholder:e="Ask or generate content with AI...",promptValue:n,onMenuClick:o,promptInput:i=l.TextArea,generateButton:c,enableSpeechToText:p=!1,streaming:m=!1,commands:u,onPromptRequest:d,onPromptCancel:h})=>{const[g,k]=t.useState(n||""),[I,E]=s.useCustomComponent(c),[v,C]=s.useCustomComponent(i),y={svgIcon:m?a.stopSmIcon:a.paperPlaneIcon,active:(!!m).toString(),title:"Send Button","aria-label":"Send Button",disabled:!g.trim()&&!m,"aria-disabled":!g.trim()&&!m},f={placeholder:e,className:"!k-flex-row",autoSize:!0,rows:1},b=u&&u.length>0,w=Object.keys(E).length>0?E:y,x=Object.keys(C).length>0?C:f,N=e=>{const{isFinal:t,alternatives:s}=e;if(t&&s.length>0){const e=s[0].transcript,t=(()=>{const t=g,s=t&&!t.endsWith(" ")&&!t.endsWith("\n");return t+(s?" ":"")+e})();k(t)}},T=()=>{g.trim()&&d&&d(g.trim())};return t.createElement(v,{value:g,onChange:e=>{const t=e.target.value;k(t)},onKeyDown:e=>{"Enter"===e.key&&!e.shiftKey&&(e.preventDefault(),T())},prefix:b||p?t.createElement(t.Fragment,null,t.createElement(l.InputPrefix,{className:"!k-align-items-start"},b&&t.createElement(r.Button,{"aria-label":"Commands Button",title:"Commands Button",fillMode:"flat",svgIcon:a.menuIcon,onClick:o}),p&&t.createElement(r.SpeechToTextButton,{fillMode:"flat",..."object"==typeof p?{...p,onResult:p.onResult||N}:{onResult:N}})),t.createElement(l.InputSeparator,null)):void 0,suffix:t.createElement(l.InputSuffix,{className:"!k-align-items-start"},t.createElement(I,{className:s.classNames("k-prompt-send",{"k-generating":m,"k-active":m}),fillMode:"flat",onClick:m?h:T,...w})),...x})};e.AIPrompt=e=>{const n=!s.validatePackage(A,{component:"AIPrompt"}),o=s.getLicenseMessage(A),{activeView:a,toolbarItems:r,children:i,onActiveViewChange:l,onPromptRequest:c,onCommandExecute:p,style:m,dir:u,className:d,streaming:h,loading:g,onCancel:k,suggestionsView:I,...E}=e,v=r||[W,G],[C,y]=t.useState({activeView:a}),f={...C,activeView:a,streaming:h,loading:g,suggestionsView:null!=I?I:"classic",onCancel:k,onActiveViewChange:l,onPromptRequest:c,onCommandExecute:p};return t.createElement(j.Provider,{value:[f,e=>{y(e)}]},t.createElement("div",{className:s.classNames("k-prompt",d),style:m,dir:u,...E},t.createElement(q,{activeView:f.activeView,toolbarItems:v,activeViewChange:l}),i,n&&t.createElement(s.WatermarkOverlay,{message:o})))},e.AIPromptCommandsView=e=>{const{commands:s}=e,[n]=U();return t.createElement(_,{name:z.name},t.createElement($,{streaming:n.streaming,onCancel:n.onCancel},t.createElement("div",{className:"k-prompt-view"},t.createElement(i.PanelBar,{onSelect:e=>{var t,s,o;const a=null==(s=null==(t=e.target)?void 0:t.props)?void 0:s.data;null!=(o=a.children)&&o.length||n.onCommandExecute&&n.onCommandExecute.call(null,a)},selected:""},J(null!=s?s:[])))))},e.AIPromptContent=$,e.AIPromptFooter=H,e.AIPromptOutputView=e=>{const[s,o]=t.useState(""),l=t.useRef(null),[c]=U(),{outputs:p,showOutputRating:m,outputCard:u}=e,{header:d,body:h,actions:g}=u||{},k=n.useLocalization(),I=(e,t)=>{c.onPromptRequest&&c.onPromptRequest.call(null,e.prompt,{...e,ratingType:t,isRetry:!1}),E()},E=()=>{l&&l.current&&l.current.scrollTo({top:0,behavior:"smooth"})},v=t.createElement(i.Card,null,t.createElement(i.CardHeader,null,t.createElement(i.CardTitle,null,t.createElement("span",{className:"k-skeleton k-skeleton-text k-skeleton-pulse",style:{width:"200px"}})),t.createElement(i.CardSubtitle,null,t.createElement("span",{className:"k-skeleton k-skeleton-text k-skeleton-pulse",style:{width:"100%"}}))),t.createElement(i.CardBody,null,t.createElement("span",{className:"k-skeleton k-skeleton-rect k-skeleton-pulse",style:{height:"80px"}})),t.createElement(i.CardActions,null,t.createElement("span",{className:"k-skeleton k-skeleton-text k-skeleton-pulse",style:{width:"100%"}}))),C=null==p?void 0:p.map(((e,n)=>t.createElement(i.Card,{key:`${e.id}_${n}`},t.createElement(i.CardHeader,null,d?d(e):t.createElement(t.Fragment,null,e.title&&t.createElement(i.CardTitle,null,e.title),e.subTitle&&t.createElement(i.CardSubtitle,null,e.subTitle))),t.createElement(i.CardBody,null,h?h(e):e.responseContent),t.createElement(i.CardActions,null,g?g(e):t.createElement(t.Fragment,null,t.createElement(r.Button,{size:"medium",themeColor:"primary",fillMode:"flat",rounded:"medium",title:"Copy",svgIcon:s===e.id?a.checkIcon:a.copyIcon,onClick:()=>(e=>{null!=e&&e.responseContent&&navigator.clipboard.writeText(e.responseContent),o(e.id),setTimeout((()=>{o("")}),1e3)})(e)},"Copy"),t.createElement(r.Button,{size:"medium",themeColor:"base",fillMode:"flat",rounded:"medium",title:"Retry",svgIcon:a.arrowRotateCwIcon,onClick:()=>(e=>{c.onPromptRequest&&c.onPromptRequest.call(null,e.prompt,{...e,isRetry:!0}),E()})(e)},"Retry"),m&&t.createElement(t.Fragment,null,t.createElement("span",{className:"k-spacer"}),t.createElement(r.Button,{size:"medium",themeColor:"positive"===e.ratingType?"primary":"base",fillMode:"flat",rounded:"medium",title:"Rate up",svgIcon:a.thumbUpOutlineIcon,onClick:()=>I(e,"positive")}),t.createElement(r.Button,{size:"medium",themeColor:"negative"===e.ratingType?"primary":"base",fillMode:"flat",rounded:"medium",title:"Rate down",svgIcon:a.thumbDownOutlineIcon,onClick:()=>I(e,"negative")}))))))),y=t.createElement(i.Card,null,t.createElement(i.CardBody,null,k.toLanguageString(R,D[R])));return t.createElement(_,{name:G.name},t.createElement($,{ref:l,streaming:c.streaming,onCancel:c.onCancel},t.createElement("div",{className:"k-card-list"},c.loading&&v,C,(!C||0===C.length)&&!c.loading&&y)))},e.AIPromptView=e=>{const{promptInput:n=l.TextArea,generateButton:o=r.Button,enableSpeechToText:i=!1,promptValue:c,promptSuggestions:p}=e,[m,u]=t.useState(c||""),[d]=U(),[h,g]=s.useCustomComponent(o),[k,I]=s.useCustomComponent(n),E={title:"Generate",children:"Generate",svgIcon:a.sparklesIcon},v=Object.keys(g).length>0?g:E,C=Object.keys(I).length>0?I:{placeholder:"Ask or generate content with AI ...",rows:2},y=e=>{const{isFinal:t,alternatives:s}=e;if(t&&s.length>0){const e=s[0].transcript,t=(()=>{const t=m,s=t&&!t.endsWith(" ")&&!t.endsWith("\n");return t+(s?" ":"")+e})();u(t)}};let f;return i&&(f="object"==typeof i?{...i,onResult:i.onResult||y}:{onResult:y}),t.createElement(_,{name:W.name},t.createElement($,{streaming:d.streaming,onCancel:d.onCancel},t.createElement(k,{value:m,className:"!k-flex-col",suffix:i?t.createElement(t.Fragment,null,t.createElement(l.InputSeparator,{orientation:"horizontal"}),t.createElement(l.InputSuffix,{orientation:"horizontal"},t.createElement(r.SpeechToTextButton,{fillMode:"flat",...f}))):void 0,onChange:e=>{u(e.target.value)},...C}),p&&p.length>0&&t.createElement(Y,{title:"Prompt Suggestions"},t.createElement(K,{suggestionsView:d.suggestionsView,suggestions:p.map(((e,t)=>({id:t,text:e,description:e}))),onSuggestionClick:(e,t)=>{(e=>{u(e)})(t.text)}}))),t.createElement(H,null,t.createElement(h,{themeColor:"primary",fillMode:"solid",rounded:"full",size:"medium",onClick:()=>{d.onPromptRequest&&d.onPromptRequest.call(null,m),u("")},disabled:!m.trim(),...v},v.children)))},e.AIPromptViewRender=_,e.Chat=F,e.ChatMessage=h,e.HeroCard=O,e.InlineAIPrompt=e=>{const n=!s.validatePackage(A,{component:"InlineAIPrompt"}),o=s.getLicenseMessage(A),{outputs:c=[],outputCard:p,promptInput:m=l.TextArea,generateButton:u=r.Button,promptPlaceholder:d="Ask or generate content with AI...",promptValue:h,onPromptRequest:g,onCopy:k,onDiscard:I,outputActions:E,onOutputAction:v,enableSpeechToText:C=!1,streaming:y,onPromptCancel:f,show:b=!1,anchor:w,width:x,height:N,onOpen:T,onClose:S,animate:R=!0,appendTo:B,commands:D,onCommandExecute:L,style:M,className:V,popupOptions:P={},...F}=e,[K,O]=t.useState(""),[q,G]=t.useState(!1),[z,W]=t.useState({left:0,top:0}),j=t.useRef(null),{body:U,actions:H}=p||{},_=E||[{id:"copy",text:"Copy",svgIcon:a.copyIcon,themeColor:"primary",title:"Copy"},{id:"discard",text:"Discard",svgIcon:a.cancelOutlineIcon,themeColor:"base",title:"Discard"}],Y=(e,t)=>{switch(e.id){case"copy":(e=>{e.responseContent&&(navigator.clipboard.writeText(e.responseContent),O(e.id),setTimeout((()=>O("")),1e3)),null==k||k(e)})(t);break;case"discard":(e=>{null==I||I(e)})(t);break;default:null==v||v(e,t)}},J=t.useCallback((e=>{"Escape"===e.key&&(y&&f?f():!y&&S&&S({target:null}))}),[y,f,S]),Z={...M,...x&&{width:x},...N&&{height:N}},ee={...x&&{width:x},...N&&{height:N}},te=t.createElement(t.Fragment,null,t.createElement("div",{className:s.classNames("k-prompt",V),style:Z,onKeyDown:J,...F},t.createElement($,{ref:j},c&&c.length>0&&t.createElement("div",{className:"k-card-list"},c.map(((e,s)=>t.createElement(i.Card,{key:`${e.id}_${s}`},t.createElement(i.CardBody,null,U?U(e):e.responseContent),t.createElement(i.CardActions,null,H?H(e):t.createElement(t.Fragment,null,_.map((s=>{var n;return s.spacer?t.createElement("span",{key:s.id,className:"k-spacer"}):t.createElement(r.Button,{key:s.id,size:"medium",themeColor:s.themeColor||"primary",fillMode:"flat",rounded:"medium",title:null!=(n=s.title)?n:s.text,svgIcon:"copy"===s.id&&K===e.id?a.checkIcon:s.svgIcon,onClick:()=>Y(s,e)},s.text)})))))))),t.createElement(X,{promptValue:h,placeholder:d,onPromptRequest:g,onMenuClick:e=>{if(!j.current)return;const t=j.current.getBoundingClientRect();W({left:t.left,top:t.bottom}),G(!0)},onPromptCancel:f,promptInput:m,generateButton:u,enableSpeechToText:C,streaming:y,commands:D}))),n&&t.createElement(s.WatermarkOverlay,{message:o}));return t.createElement(t.Fragment,null,t.createElement(Q,{show:b,anchor:w,onOpen:T,onClose:S,animate:R,appendTo:B,popupOptions:P,style:ee},te),t.createElement(i.ContextMenu,{show:q,offset:z,onClose:()=>{G(!1)},items:(e=>null==e?void 0:e.map((e=>({text:e.text,svgIcon:e.svgIcon,data:e,items:e.children?e.children.map((e=>({text:e.text,data:e}))):void 0}))))(D),onSelect:e=>{var t,s;const n=null==(t=e.item)?void 0:t.data;n&&(null==(s=n.children)||!s.length)&&(e=>{G(!1),L&&L(e)})(n)}}))},e.PromptHeader=q,e.SuggestionGroup=K,e.commandsViewDefaults=z,e.outputViewDefaults=G,e.promptViewDefaults=W}));