UNPKG

@progress/kendo-react-conversational-ui

Version:

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

www.telerik.com/kendo-react-ui

telerik/kendo-react

16 lines (15 loc) • 25.5 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/** * @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")):"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"],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)}(this,(function(e,t,s,n,o,a,r,i,l){"use strict";function c(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 p=c(t);let m=class extends p.Component{componentDidUpdate(e){!e.selected&&this.props.selected&&this.elementToFocus.focus()}};const u=class extends m{render(){return p.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?p.createElement("div",{className:"k-chat-bubble"},p.createElement("div",{className:"k-typing-indicator"},p.createElement("span",null),p.createElement("span",null),p.createElement("span",null))):this.props.template?p.createElement(this.props.template,{item:this.props.item}):this.props.item.text?p.createElement("div",{className:"k-chat-bubble"},this.props.item.text):null}getTimestampView(){let e=null;return this.props.item.timestamp&&(e=p.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=p.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")}};u.defaultProps={dateFormat:"g",tabIndex:-1};let h=u;n.registerForIntl(h);const d=(e,t)=>e&&t.author&&e.id===t.author.id,g=e=>e[e.length-1],I=e=>(t,s,n)=>{const o=n===e-1;return((e,t)=>{const s=t.timestamp,n=g(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=g(e);let o;t.typing&&!s||(n&&"message-group"===n.type&&(o=n.messages),o&&d(t.author,g(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 k=class extends m{constructor(){super(...arguments),this.onKeyDown=e=>{e.keyCode===s.Keys.enter&&this.props.onActionExecute(this.props.item,e)}}render(){return p.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 p.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 E extends v{constructor(e){super(e)}render(){const e=this.props.group.actions?this.props.group.actions.length-1:0;return p.createElement("div",{className:this.getClassNames(),onClick:this.onRequestContainerSelection,onKeyDown:this.onKeyDown},this.props.group.actions&&this.props.group.actions.map(((t,s)=>p.createElement(k,{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")}}class y extends m{render(){return p.createElement("div",{className:this.getClassNames(),tabIndex:this.getTabIndexValue(),onClick:this.props.onClick,ref:e=>{this.elementToFocus=e}},this.props.template?p.createElement(this.props.template,{item:this.props.item}):p.createElement("div",{className:"k-card"},p.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?p.createElement("h5",{className:"k-card-title"},this.props.item.title):null}getSubtitleView(){return this.props.item.subtitle?p.createElement("h6",{className:"k-card-subtitle"},this.props.item.subtitle):null}getContentView(){return 0===this.props.item.contentType.indexOf("image/")?p.createElement("img",{src:this.props.item.content}):this.props.item.content}}class f extends v{render(){const e=this.isCardDeckLayout(this.props),t=p.createElement("div",{className:this.getClassNames(),onKeyDown:e?void 0:this.onKeyDown},this.props.group.attachments.map(((e,t)=>p.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?p.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=p.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=p.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 C=class extends p.Component{render(){const e=this.props.item;return p.createElement("div",{className:"k-timestamp"},n.provideIntlService(this).formatDate(e.timestamp,"D"))}};n.registerForIntl(C);const w="newMessage.sendButton",b="newMessage.optionsButton",x="newMessage.messageInput",N="avatar.alt",T="messageList.ariaLabel",S="aIPrompt.noOutputs",R={[w]:"Send",[b]:"Options",[x]:"Message",[N]:"Avatar",[T]:"Message list",[S]:"No output from AI available"};class L extends p.Component{render(){const{avatarUrl:e,avatarAltText:t,name:s}=this.props.group.author,o=n.provideLocalizationService(this);return p.createElement("div",{className:this.getMsgGroupClassNames()},s&&p.createElement("p",{className:"k-author"},s),e&&p.createElement(i.Avatar,{type:"image"},p.createElement("img",{src:e,alt:void 0!==t?t:o.toLanguageString(N,R[N])})),this.getGroupMessagesView())}getMsgGroupClassNames(){return s.classNames("k-message-group",{"k-no-avatar":!this.props.group.author.avatarUrl,"k-alt":d(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=[p.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(p.createElement(y,{item:t.attachments[0],template:this.props.attachmentTemplate,selected:!1,key:`att-${s}`})),n}))}}const B=p.forwardRef(((e,t)=>{const{className:n,...o}=e,a=p.useRef(null),i=p.useRef(null);p.useImperativeHandle(i,(()=>({element:a.current,props:e}))),p.useImperativeHandle(t,(()=>i.current));const l=p.useMemo((()=>s.classNames("k-chat-toolbar k-toolbar",n)),[n]);return p.useEffect((()=>{null!==a.current&&s.focusFirstFocusableChild(a.current,[...s.TABBABLE_ELEMENTS])}),[]),p.createElement(r.Toolbar,{id:e.id,ref:e=>{e&&(a.current=e.element)},className:l,...o},p.createElement("div",{className:"k-button-list k-toolbar-group"},e.children))}));B.displayName="KendoReactChatToolbar";class D extends p.Component{constructor(){super(...arguments),this.state={focused:!1},this.inputEl=null,this.toolbarBtnRef=p.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=p.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(x,R[x])}),s=p.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,R[w]),dir:this.props.isDirectionRightToLeft?"rtl":void 0}),o=p.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(b,R[b])});return p.createElement(p.Fragment,null,p.createElement("span",{className:"k-message-box k-textbox k-input k-input-md k-rounded-md k-input-solid"},this.props.MessageBox?p.createElement(this.props.MessageBox,{messageInput:t,sendButton:s,toolbarButton:o}):p.createElement(p.Fragment,null,t,p.createElement("span",{className:"k-input-separator k-input-separator-vertical"}),p.createElement("span",{className:"k-input-suffix k-input-suffix-horizontal"},this.props.toolbar&&o,s))),this.props.showToolbar&&p.createElement(B,null,this.props.toolbar))}focusInput(){null!==this.inputEl&&this.inputEl.focus()}getClassNames(){return s.classNames("k-input-inner",{"k-focus":this.state.focused})}}const V={name:"@progress/kendo-react-conversational-ui",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:0,version:"11.1.0",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"},M=class e extends p.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(V,{component:"Chat"}),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 p.createElement("div",{style:{width:this.props.width,position:"relative"},onKeyDown:this.onKeyDown,className:this.getClassNames(),ref:e=>{this.chatWrapperEl=e}},p.createElement("div",{className:"k-message-list k-avatars",onBlur:this.onBlur,onFocus:this.onFocus,role:"log","aria-label":e.toLanguageString(T,R[T]),"aria-live":"polite",onScroll:e=>{this.scrollToBottomOnLoadingData=e.currentTarget.scrollTop===e.currentTarget.scrollHeight-e.currentTarget.clientHeight},ref:e=>{this.viewItemsWrapperEl=e}},p.createElement("div",{className:"k-message-list-content"},this.renderViewItems())),p.createElement(D,{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&&p.createElement(s.WatermarkOverlay,null))}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?p.createElement(C,{item:s,key:n}):"message-group"===s.type?p.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?p.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?p.createElement(E,{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):[]}};M.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},M.defaultProps={messages:[],dateFormat:"g",message:h};let A=M;class F extends p.Component{constructor(){super(...arguments),this.onBtnClick=(e,t)=>{s.dispatchEvent(this.props.onActionExecute,t,this,{action:e})}}render(){return p.createElement("div",{className:"k-card"},p.createElement("img",{className:"k-card-image",src:this.props.imageUrl,style:{maxWidth:this.props.imageMaxWidth}}),p.createElement("div",{className:"k-card-body"},this.getTitleView(),this.getSubtitleView()),p.createElement("div",{className:"k-card-actions k-card-actions-vertical"},this.getActionsView()))}getActionsView(){return this.props.actions.map(((e,t)=>p.createElement("span",{className:"k-card-action",key:t},p.createElement(r.Button,{fillMode:"flat",onClick:t=>this.onBtnClick(e,t)},e.title))))}getTitleView(){let e=null;return this.props.title&&(e=p.createElement("h5",{className:"k-card-title"},this.props.title)),e}getSubtitleView(){let e=null;return this.props.subtitle&&(e=p.createElement("h6",{className:"k-card-subtitle"},this.props.subtitle)),e}}const K=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,"aria-hidden":"true",onClick:()=>(e=>{null==o||o.call(null,e)})(e.name)},e.buttonText)))))},q=t.forwardRef(((e,s)=>{const{children:n}=e;return t.createElement("div",{className:"k-prompt-content",ref:s},t.createElement("div",{className:"k-prompt-view"},n))}));q.displayName="KendoReactAIPromptContent";const P=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))},O=t.createContext([{},()=>{}]),G=()=>t.useContext(O),z=e=>{const[t]=G();return t.activeView===e.name?e.children:null},W=e=>{const[s,n]=t.useState(!0),{children:o,title:i}=e;return t.createElement("div",{className:"k-prompt-expander"},t.createElement(r.Button,{fillMode:"flat",svgIcon:s?a.chevronUpIcon:a.chevronDownIcon,title:i,onClick:()=>n(!s)},i),s&&t.createElement("div",{className:"k-prompt-expander-content"},o))},U={name:"prompt-view",buttonText:"Ask AI",buttonIcon:a.sparklesIcon},H={name:"Output view",buttonText:"Output",buttonIcon:a.commentIcon},j={name:"Commands view",buttonIcon:a.moreHorizontalIcon},$=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&&$(e.children||[]))));e.AIPrompt=e=>{const{activeView:n,toolbarItems:o,children:a,onActiveViewChange:r,onPromptRequest:i,onCommandExecute:l,style:c,dir:p,className:m,...u}=e,h=o||[U,H],[d,g]=t.useState({activeView:n}),I={...d,activeView:n,onActiveViewChange:r,onPromptRequest:i,onCommandExecute:l};return t.createElement(O.Provider,{value:[I,e=>{g(e)}]},t.createElement("div",{className:s.classNames("k-prompt",m),style:c,dir:p,...u},t.createElement(K,{activeView:I.activeView,toolbarItems:h,activeViewChange:r}),a))},e.AIPromptCommandsView=e=>{const{commands:s}=e,[n]=G();return t.createElement(z,{name:j.name},t.createElement(q,null,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:""},$(null!=s?s:[])))))},e.AIPromptContent=q,e.AIPromptFooter=P,e.AIPromptOutputView=e=>{const[s,o]=t.useState(""),l=t.useRef(null),[c]=G(),{outputs:p,showOutputRating:m,outputCard:u}=e,{header:h,body:d,actions:g}=u||{},I=n.useLocalization(),k=(e,t)=>{c.onPromptRequest&&c.onPromptRequest.call(null,e.prompt,{...e,ratingType:t,isRetry:!1}),v()},v=()=>{l&&l.current&&l.current.scrollTo({top:0,behavior:"smooth"})};return t.createElement(z,{name:H.name},t.createElement(q,{ref:l},t.createElement("div",{className:"k-card-list"},p&&p.length>0?p.map(((e,n)=>t.createElement(i.Card,{key:`${e.id}_${n}`},t.createElement(i.CardHeader,null,h?h(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,d?d(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.copyIcon:a.checkIcon,"aria-hidden":"true",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.rotateIcon,"aria-hidden":"true",onClick:()=>(e=>{c.onPromptRequest&&c.onPromptRequest.call(null,e.prompt,{...e,isRetry:!0}),v()})(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,"aria-hidden":"true",onClick:()=>k(e,"positive")}),t.createElement(r.Button,{size:"medium",themeColor:"negative"===e.ratingType?"primary":"base",fillMode:"flat",rounded:"medium",title:"Rate down",svgIcon:a.thumbDownOutlineIcon,"aria-hidden":"true",onClick:()=>k(e,"negative")}))))))):t.createElement(i.Card,null,t.createElement(i.CardBody,null,I.toLanguageString(S,R[S]))))))},e.AIPromptView=e=>{const{promptInput:n=l.TextArea,generateButton:o=r.Button,promptValue:i,promptSuggestions:c}=e,[p,m]=t.useState(i||""),[u]=G(),[h,d]=s.useCustomComponent(o),[g,I]=s.useCustomComponent(n),k={title:"Generate",svgIcon:a.sparklesIcon},v=Object.keys(d).length>0?d:k,E=Object.keys(I).length>0?I:{placeholder:"Ask or generate content with AI ...",rows:2};return t.createElement(z,{name:U.name},t.createElement(q,null,t.createElement(g,{value:p,onChange:e=>{m(e.target.value)},...E}),c&&c.length>0&&t.createElement(W,{title:"Prompt Suggestions"},c.map((e=>t.createElement("div",{key:e,className:"k-prompt-suggestion",onClick:()=>(e=>{m(e)})(e)},e))))),t.createElement(P,null,t.createElement(h,{themeColor:"primary",fillMode:"solid","aria-hidden":"true",rounded:"full",size:"medium",onClick:()=>{u.onPromptRequest&&u.onPromptRequest.call(null,p),m("")},...v},"Generate")))},e.AIPromptViewRender=z,e.Chat=A,e.ChatMessage=h,e.HeroCard=F,e.PromptHeader=K,e.commandsViewDefaults=j,e.outputViewDefaults=H,e.promptViewDefaults=U}));