@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
16 lines (15 loc) • 50 kB
JavaScript
/**
* @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-buttons"),require("@progress/kendo-svg-icons"),require("@progress/kendo-react-intl"),require("@progress/kendo-react-layout"),require("prop-types"),require("@progress/kendo-react-upload"),require("@progress/kendo-react-inputs"),require("@progress/kendo-react-animation"),require("@progress/kendo-react-notification"),require("@progress/kendo-react-popup")):"function"==typeof define&&define.amd?define(["exports","react","@progress/kendo-react-common","@progress/kendo-react-buttons","@progress/kendo-svg-icons","@progress/kendo-react-intl","@progress/kendo-react-layout","prop-types","@progress/kendo-react-upload","@progress/kendo-react-inputs","@progress/kendo-react-animation","@progress/kendo-react-notification","@progress/kendo-react-popup"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactConversationalUi={},e.React,e.KendoReactCommon,e.KendoReactButtons,e.KendoSvgIcons,e.KendoReactIntl,e.KendoReactLayout,e.PropTypes,e.KendoReactUpload,e.KendoReactInputs,e.KendoReactAnimation,e.KendoReactNotification,e.KendoReactPopup)}(this,(function(e,t,a,n,l,s,o,r,i,c,u,m,d){"use strict";function p(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(a){if("default"!==a){var n=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(t,a,n.get?n:{enumerable:!0,get:function(){return e[a]}})}})),t.default=e,Object.freeze(t)}var g=p(t);const h="newMessage.sendButton",k="newMessage.messageInput",f="avatar.alt",v="messageList.ariaLabel",C="aIPrompt.noOutputs",b="aIPrompt.cancel",y="chat.senderDeletedMessage",E="chat.receiverDeletedMessage",I="chat.copyNotification",x="chat.downloadAllFiles",w="chat.closeReply",T="chat.collapseMessage",F="chat.expandMessage",N="chat.removeFile",A="chat.fileActions",S="chat.attachFile",M="chat.downloadAll",D={[h]:"Send","newMessage.optionsButton":"Options",[k]:"Message",[f]:"Avatar",[v]:"Message list",[b]:"Cancel",[C]:"No output from AI available",[y]:"You removed this message",[E]:"The message was removed by its sender",[I]:"Text copied to clipboard",[x]:"Download all files",[w]:"Close reply",[T]:"Collapse message",[F]:"Expand message",[N]:"Remove file",[A]:"File actions for",[S]:"Attach file",[M]:"Download all"},R=(e,t)=>e&&t.author&&e.id===t.author.id,P=(e,t)=>{const a=t.toLanguageString("chatSender.deletedMessage",D[y]),n=t.toLanguageString("chatReceiver.deletedMessage",D[E]);return e?a:n},B=(e,t)=>{if(!t)return;const a=t.querySelector(`[data-message-id="${e}"]`);if(!a)return;const n=t.querySelector(".k-message-list");if(n){const e=n.getBoundingClientRect().top,t=a.getBoundingClientRect().top,l=n.scrollTop+(t-e);n.scrollTo({top:l,behavior:"smooth"})}else a.scrollIntoView({behavior:"smooth",block:"start"})},L=/(https?:\/\/[^\s]+)/g,K=e=>{if(!e)return[""];const a=e.split(L),n=[];return a.forEach((e=>{e&&L.test(e)?(L.lastIndex=0,n.push(t.createElement("a",{key:e,href:e,target:"_blank",rel:"noopener noreferrer",style:{color:"inherit",textDecoration:"underline"}},e))):e&&n.push(e)})),n},O=g.createContext(void 0),q=()=>{const e=t.useContext(O);if(void 0===e)throw new Error("useChatContext must be used within a ChatContext.Provider");return e},V=e=>{const{files:t,onFileRemove:o,onFileAction:r,onDownload:i,fileActions:c,renderInTextarea:u=!1}=e,m=s.useLocalization(),d=c||[{id:"download",label:"Download",svgIcon:l.downloadIcon}],p=e=>"."+e.split(".").pop()||"",h=e=>u?g.createElement(n.Button,{fillMode:"flat",themeColor:"base",svgIcon:l.xIcon,onClick:t=>{t.stopPropagation(),null==o||o(e.name)},"aria-label":`${m.toLanguageString(N,D[N])} ${e.name}`}):"uid"in e||!("rawFile"in e)?d.length>0&&g.createElement(n.DropDownButton,{fillMode:"flat",themeColor:"base",svgIcon:l.moreVerticalIcon,onClick:e=>{e.syntheticEvent.stopPropagation()},onItemClick:t=>((e,t)=>{"download"===e.item.id&&(null==i||i([t])),null==r||r(e.item,e,t)})(t,e),items:d.map((e=>({id:e.id,icon:e.icon,text:e.label,svgIcon:e.svgIcon}))),"aria-label":`${m.toLanguageString(A,D[A])} ${e.name}`}):g.createElement(n.Button,{fillMode:"flat",themeColor:"base",svgIcon:l.xIcon,onClick:t=>{t.stopPropagation(),null==o||o(e.name)},"aria-label":`${m.toLanguageString(N,D[N])} ${e.name}`});return g.createElement("ul",{className:"k-chat-file-wrapper"},t.map((e=>g.createElement("li",{key:e.name,className:"k-chat-file"},g.createElement(a.IconWrap,{size:"xxlarge",...a.getFileExtensionIcon(p(e.name))}),g.createElement("div",{className:"k-chat-file-info"},g.createElement("span",{className:"k-chat-file-name"},e.name),g.createElement("span",{className:"k-chat-file-size"},(e=>{if(null==e)return"";if(0===e)return"0 B";const t=Math.floor(Math.log(e)/Math.log(1024));return`${parseFloat((e/Math.pow(1024,t)).toFixed(2))} ${["B","KB","MB","GB","TB"][t]}`})(e.size))),h(e)))))},z=g.forwardRef(((e,t)=>{const{item:r,template:i,onRequestSelection:c,tabIndex:u=-1,dateFormat:m="g",selected:d,allowMessageCollapse:p,messageToolbarActions:h,messageContextMenuActions:k,isSender:f}=e,{setReplyToMessage:v,messages:C,user:b,internalScrollContainerRef:y,onToolbarAction:E,onContextMenuAction:I,onFileAction:w,onDownload:N,fileActions:A,setShowCopyNotification:S,statusTemplate:L}=q(),[O,z]=g.useState(!1),[U,j]=g.useState(!1),[W,$]=g.useState(!0),[H,G]=g.useState(!1),_=s.useLocalization(),Y=g.useRef({left:0,top:0}),X=g.useCallback((()=>{null!=r&&r.text&&(e=>{navigator.clipboard.writeText(e)})(r.text),S&&(S(!0),setTimeout((()=>{S(!1)}),3e3))}),[r,S]),J=g.useCallback((e=>{e.stopPropagation(),$((e=>!e))}),[]),Q=g.useCallback((()=>{G(!1)}),[]),Z=g.useCallback((e=>{("Tab"===e.key||"Enter"===e.key||" "===e.key||"ArrowUp"===e.key||"ArrowDown"===e.key)&&G(!0)}),[]),ee=g.useRef(null);g.useEffect((()=>{d&&ee.current&&ee.current.focus()}),[d]);const te=g.useCallback((e=>{Y.current={left:e.pageX,top:e.pageY},e.preventDefault(),j(!0),z(!0)}),[]),ae=g.useCallback((()=>{j(!1),z(!1)}),[]),ne=g.useCallback(((e,t)=>!e.isDeleted&&e.text?e.text:P(t,_)),[_]),le=g.useCallback((e=>{var t;null!=(t=e.item)&&t.text&&("copy"!==e.item.data.id||r.isDeleted?"reply"===e.item.data.id&&v(r):X(),I&&I(e.item.data,e,r)),z(!1)}),[r,I,v,X]),se=g.useCallback((()=>{if(r.replyToId){const e=((e,t)=>e.find((e=>e.id===t)))(C,r.replyToId);if(e){const t=t=>{t.preventDefault(),t.stopPropagation();const a=null==y?void 0:y.current;B(e.id,a)};return g.createElement("div",{className:a.classNames("k-message-reference",R(b,e)?"k-message-reference-sender":"k-message-reference-receiver"),onClick:t},g.createElement("div",{className:"k-message-reference-content"},K(ne(e,R(b,e)))))}}return null}),[r.replyToId,C,b,ne,y]),oe=g.useCallback((()=>{const e=[{id:"reply",label:"Reply",svgIcon:l.undoIcon},{id:"copy",label:"Copy",svgIcon:l.copyIcon}],t=k?[...e.map((e=>k.find((t=>t.id===e.id))||e)),...k.filter((t=>!e.some((e=>e.id===t.id))))]:e;return g.createElement(o.ContextMenu,{onSelect:le,onClose:ae,vertical:!0,show:O,offset:Y.current},t.map((e=>"delete"!==e.id||f?g.createElement(o.MenuItem,{key:e.id,text:e.label,icon:e.icon,svgIcon:e.svgIcon,data:e}):null)))}),[k,le,ae,O,f]),re=g.useCallback((()=>r.files&&r.files.length>1?g.createElement("div",{className:"k-chat-download-button-wrapper"},g.createElement(n.Button,{className:"k-chat-download-button",fillMode:"flat",themeColor:"base",svgIcon:l.downloadIcon,onClick:e=>{e.stopPropagation(),N&&N(r.files,r)},"aria-label":_.toLanguageString(x,D[x])},g.createElement("span",{className:"k-button-text"},_.toLanguageString(M,D[M])))):null),[r,N,_]),ie=g.useCallback((()=>{if(r.typing)return g.createElement("div",{className:"k-bubble k-chat-bubble"},g.createElement("div",{className:"k-typing-indicator"},g.createElement("span",null),g.createElement("span",null),g.createElement("span",null)));if(i){const e=i;return g.createElement(e,{item:r})}return r.text||r.files&&r.files.length>0?g.createElement(g.Fragment,null,g.createElement("div",{className:a.classNames("k-chat-bubble","k-bubble",{"k-bubble-expandable":p,"k-expanded":p&&W,"k-selected":d,"k-active":U}),onClick:()=>c(d?void 0:r.selectionIndex),onContextMenu:te},g.createElement("div",{className:"k-bubble-content"},g.createElement("span",{className:"k-chat-bubble-text"},!r.isDeleted&&se(),K(ne(r,R(b,r)))),r.files&&g.createElement(V,{files:r.files,message:r,onFileAction:w,onDownload:e=>null==N?void 0:N(e,r),renderInTextarea:!1,fileActions:A}),re()),p&&g.createElement("span",{className:"k-bubble-expandable-indicator",onClick:J,role:"button","aria-label":W?_.toLanguageString(T,D[T]):_.toLanguageString(F,D[F]),tabIndex:0,onKeyDown:e=>{("Enter"===e.key||" "===e.key)&&(e.preventDefault(),J(e))}},g.createElement(a.IconWrap,{icon:W?l.chevronUpIcon:l.chevronDownIcon,size:"medium"}))),oe()):null}),[r,i,p,W,d,te,se,ne,b,w,A,re,J,_,oe,N]),ce=g.useCallback((()=>{let t=null;return r.timestamp&&(t=g.createElement("time",{className:"k-message-time","aria-hidden":!d},s.provideIntlService({props:e}).formatDate(r.timestamp,m))),t}),[r.timestamp,d,m,e]),ue=g.useCallback((()=>{let e=null;return r.status&&d&&(e=L?g.createElement(L,{item:r}):g.createElement("span",{className:"k-message-status"},g.createElement(a.IconWrap,{icon:l.checkCircleIcon,size:"xsmall"}),r.status)),e}),[r,d,L]),me=g.useCallback((()=>a.classNames({"k-focus":d,"k-message-removed":r.isDeleted},"k-message")),[d,r.isDeleted]),de=g.useCallback((()=>h&&h.length>0&&g.createElement("div",{className:"k-chat-message-toolbar k-toolbar k-toolbar-md k-toolbar-flat"},h.map((e=>"delete"!==e.id||f?g.createElement(n.Button,{key:e.id,fillMode:"flat",className:"k-toolbar-button",themeColor:"base",icon:e.icon,svgIcon:e.svgIcon,onClick:t=>{t.stopPropagation(),"copy"!==e.id||r.isDeleted?"reply"===e.id&&v(r):X(),E&&E(e,t,r)},onMouseDown:e=>e.preventDefault()}):null)))),[X,f,r,h,E,v]);return g.createElement("div",{"data-message-id":r.id,className:me(),tabIndex:u,onMouseDown:Q,onKeyDown:Z,onFocus:e=>{H&&c(r.selectionIndex)},ref:e=>{ee.current=e,"function"==typeof t?t(e):t&&(t.current=e)}},ce(),ie(),ue(),de())}));z.displayName="ChatMessage";class U extends g.Component{render(){return g.createElement(z,{...this.props})}}s.registerForIntl(U);const j=e=>e[e.length-1],W=e=>(t,a,n)=>{const l=n===e-1;return((e,t)=>{const a=t.timestamp,n=j(e);if(a&&(!n||((e,t)=>e&&t&&(t.getDate()!==e.getDate()||t.getMonth()!==e.getMonth()||t.getFullYear()!==e.getFullYear()))(a,n.timestamp))){const t={type:"date-marker",timestamp:a,trackBy:a.getTime()};e.push(t)}})(t,a),((e,t,a)=>{const n=j(e);let l;t.typing&&!a||(n&&"message-group"===n.type&&(l=n.messages),l&&R(t.author,j(l))?l.push(t):e.push({type:"message-group",messages:[t],author:t.author,timestamp:t.timestamp,trackBy:t}))})(t,a,l),a.attachments&&a.attachments.length>1&&t.push({type:"attachment-group",attachments:a.attachments,attachmentLayout:a.attachmentLayout,timestamp:a.timestamp,trackBy:a}),a.suggestedActions&&l&&t.push({type:"action-group",actions:a.suggestedActions,timestamp:a.timestamp,trackBy:a}),t};const $=e=>{const{item:t,onActionExecute:n,selected:l}=e,s=g.useRef(null);g.useEffect((()=>{l&&s.current&&s.current.focus()}),[l]);const o=g.useCallback((e=>{(e.keyCode===a.Keys.enter||" "===e.key)&&(e.preventDefault(),n(t,e))}),[n,t]),r=g.useCallback((()=>a.classNames("k-suggestion k-suggestion-primary",{"k-selected":l},{"k-focus":l})),[l]);return g.createElement("span",{role:"button",className:r(),onClick:e=>n(t,e),ref:s,onKeyDown:o,tabIndex:0,"aria-label":t.title||t.value},t.title||t.value)},H=e=>{var t;const{group:n,onActionExecute:l,selected:s,onRequestSelection:o}=e,[r,i]=g.useState(null);g.useEffect((()=>{s||null===r?s&&null===r&&i(0):i(null)}),[s,r]);const c=g.useCallback((()=>n.actions?n.actions.length-1:-1),[n.actions]),u=g.useCallback(((e,t=0)=>{let a=null;return e?null===r?a=t:r<c()&&(a=r+1):null===r?a=0:r>0&&(a=r-1),null!==a&&i(a),a}),[r,c]),m=g.useCallback((()=>{o(n.selectionIndex)}),[o,n.selectionIndex]),d=g.useCallback((e=>{let t=null;const n=a.Keys.left,l=a.Keys.right;e.keyCode===n?t=u(!1):e.keyCode===l&&(t=u(!0)),null!==t&&(e.preventDefault(),e.stopPropagation())}),[u]),p=g.useCallback((()=>a.classNames("k-suggestion-group")),[]);return g.createElement("div",{className:p(),onClick:m,onKeyDown:d,role:"toolbar",tabIndex:0,"aria-label":"Action group"},null==(t=n.actions)?void 0:t.map(((e,t)=>g.createElement($,{item:e,onActionExecute:l,selected:t===r,key:e.value}))))},G=e=>{const{item:t,template:n,tabbable:l,onClick:s,selected:o}=e,r=g.useRef(null);g.useEffect((()=>{o&&r.current&&r.current.focus()}),[o]);const i=g.useCallback((()=>{if(void 0!==l)return l?0:-1}),[l]),c=g.useCallback((()=>a.classNames({"k-selected":o},{"k-focus":o})),[o]),u=g.useCallback((()=>t.title?g.createElement("h5",{className:"k-card-title"},t.title):null),[t.title]),m=g.useCallback((()=>t.subtitle?g.createElement("h6",{className:"k-card-subtitle"},t.subtitle):null),[t.subtitle]),d=g.useCallback((()=>0===t.contentType.indexOf("image/")?g.createElement("img",{src:t.content,alt:t.title||"Attachment"}):t.content),[t.contentType,t.content,t.title]),p=n;return g.createElement("div",{className:c(),tabIndex:i(),onClick:s,ref:r},n?g.createElement(p,{item:t}):g.createElement("div",{className:"k-card"},g.createElement("div",{className:"k-card-body"},u(),m(),d())))},_=e=>{const{group:t,itemTemplate:s,selected:o,isLastGroup:r,onRequestSelection:i}=e,[c,u]=g.useState(null);g.useEffect((()=>{o||null===c?o&&null===c&&u(0):u(null)}),[o,c]);const m=g.useCallback((e=>"list"!==e.attachmentLayout),[]),d=g.useCallback((()=>t.attachments?t.attachments.length-1:-1),[t.attachments]),p=g.useCallback((()=>t.attachments.length-1),[t.attachments]),h=g.useCallback(((e,t=0)=>{let a=null;return e?null===c?a=t:c<d()&&(a=c+1):null===c?a=0:c>0&&(a=c-1),null!==a&&u(a),a}),[c,d]),k=g.useCallback((()=>{i(t.selectionIndex)}),[i,t.selectionIndex]),f=g.useCallback((e=>{let n,l,s=null;m(t)?(n=a.Keys.left,l=a.Keys.right):(n=a.Keys.up,l=a.Keys.down),e.keyCode===n?s=h(!1):e.keyCode===l&&(s=h(!0)),null!==s&&(e.preventDefault(),e.stopPropagation())}),[h,m,t]),v=g.useCallback((e=>{k(),u(e)}),[k]),C=g.useCallback((e=>{k(),h(e,1)}),[k,h]),b=g.useCallback((()=>{let e=null;return m(t)&&c&&(e=g.createElement(n.Button,{icon:"chevron-left",onClick:()=>C(!1),svgIcon:l.chevronLeftIcon})),e}),[m,t,c,C]),y=g.useCallback((()=>{let e=null;return m(t)&&c!==p()&&(e=g.createElement(n.Button,{icon:"chevron-right",onClick:()=>C(!0),svgIcon:l.chevronRightIcon})),e}),[m,t,c,p,C]),E=g.useCallback((()=>a.classNames({"k-card-list":t.attachmentLayout,"k-card-deck":m(t)})),[t.attachmentLayout,t,m]),I=m(t),x=g.createElement("div",{className:E(),onKeyDown:I?void 0:f},t.attachments.map(((e,t)=>g.createElement(G,{item:e,template:s,selected:t===c,tabbable:r&&t===c,onClick:()=>v(t),key:e.content}))));return I?g.createElement("div",{className:"k-card-deck-scrollwrap",onKeyDown:f},b(),x,y()):x},Y=({item:e,timestampTemplate:t})=>{const a=t;return g.createElement("div",{className:"k-timestamp"},a?g.createElement(a,{item:e}):s.provideIntlService({props:{item:e}}).formatDate(e.timestamp,"D"))};let X=class extends g.Component{render(){return g.createElement(Y,{...this.props})}};s.registerForIntl(X);const J=e=>{const{group:t,user:n,itemTemplate:l,attachmentTemplate:r,onRequestSelection:i,selectedItemIndex:c,isLastGroup:u,message:m,allowMessageCollapse:d,messageToolbarActions:p,messageContextMenuActions:h,messageWidthMode:k="standard"}=e,v=s.useLocalization(),C=t.messages.length>0&&R(n,t.messages[0]),b=!C,y=g.useMemo((()=>a.classNames("k-message-group",{"k-message-group-sender k-no-avatar":C,"k-message-group-receiver":b,"k-message-group-full-width":"full"===k})),[C,b,k]),E=g.useMemo((()=>{const e=t.messages.length-1;return t.messages.map(((t,a)=>{const s=[g.createElement(m,{item:t,template:l,selected:t.selectionIndex===c,onRequestSelection:i,tabIndex:a===e&&u?0:-1,key:t.id,allowMessageCollapse:d,messageToolbarActions:p,messageContextMenuActions:h,isSender:R(n,t)})];return t.attachments&&1===t.attachments.length&&s.push(g.createElement(G,{item:t.attachments[0],template:r,selected:!1,key:`att-${t.attachments[0].content}`})),s}))}),[t.messages,m,l,c,i,u,d,p,h,n,r]),{avatarUrl:I,avatarAltText:x,name:w}=t.author,T=void 0!==x?x:v.toLanguageString(f,D[f]);return g.createElement("div",{className:y},(()=>{if(b&&I)return g.createElement(o.Avatar,{type:"image"},g.createElement("img",{src:I,alt:T}))})(),g.createElement("div",{className:"k-message-group-content"},g.createElement("span",{className:"k-message-author"},w),E))},Q=e=>{const{suggestions:t,onSuggestionClick:n,suggestionsView:l,suggestionTemplate:s}=e,o=g.useCallback(((e,t)=>{("Enter"===e.key||" "===e.key)&&(e.preventDefault(),null==n||n(t))}),[n]),r=g.useCallback((()=>t.map((e=>s?g.createElement(s,{key:e.id,suggestion:e,onClick:()=>{null==n||n(e)}}):g.createElement("span",{role:"button",tabIndex:e.disabled?-1:0,"aria-label":e.description,"aria-disabled":e.disabled,onClick:()=>!e.disabled&&(null==n?void 0:n(e)),onKeyDown:t=>!e.disabled&&o(t,e),key:e.id,title:e.description,className:a.classNames("classic"===l?"k-prompt-suggestion":"k-suggestion",{"k-disabled":e.disabled})},e.text)))),[t,s,n,l,o]);return t&&0!==t.length?"classic"===l?r():g.createElement("div",{role:"group",className:"k-suggestion-group"},r()):null},Z=g.forwardRef(((e,t)=>{const{onSendMessage:o,isDirectionRightToLeft:r,placeholder:u,MessageBox:m,suggestions:d,onSuggestionClick:p,inputValue:f,onInputValueChange:v,suggestionTemplate:C,sendButtonConfig:b,onInputClick:y}=e,{replyToMessage:E,setReplyToMessage:I,user:x,messageListScrollContainerRef:T,speechToTextConfig:F,uploadConfig:N}=q(),[A]=g.useState(!1),[M,B]=g.useState(void 0),[L,K]=g.useState([]),[O,z]=g.useState(!1),U=g.useRef(null),j=g.useRef(null),W=s.useLocalization(),$=g.useCallback((()=>{null!==U.current&&U.current.focus()}),[]);g.useEffect((()=>{void 0!==f&&f!==M&&(B(f),$())}),[f,M,$]),g.useEffect((()=>{E&&$()}),[E,$]),g.useLayoutEffect((()=>{O&&null!=T&&T.current&&(T.current.scrollTop=T.current.scrollHeight-T.current.clientHeight,z(!1))}),[O,T]);const H=g.useCallback((e=>{const t=e.value;B(t),v&&v(t)}),[v]),G=g.useMemo((()=>!!(null!=M&&M.trim()||L.length>0)),[M,L.length]),_=g.useCallback((e=>{if(e.preventDefault(),o){if(G){const t={id:"",author:x,text:M||"",timestamp:new Date,replyToId:E?E.id:void 0,files:L.map((e=>({name:e.name,size:e.size,type:e.extension,rawFile:e.getRawFile?e.getRawFile():e})))};I(null),o(t,e),K([]),B(""),v&&v(""),z(!0)}}}),[o,M,x,E,L,I,v,G]),Y=g.useCallback((e=>{if("Enter"!==e.key||!e.shiftKey)switch(e.key){case"Enter":return e.preventDefault(),_(e);case"Escape":U.current&&U.current.blur();break;default:return}}),[_]);g.useImperativeHandle(t,(()=>({focusInput:$})),[$]);const X=g.useCallback((e=>{K((t=>t.filter((t=>t.name!==e))))}),[]),J=g.useCallback((()=>g.createElement(V,{files:L,onFileRemove:X,renderInTextarea:!0})),[L,X]),Z=g.useCallback(((e,t)=>e.isDeleted?P(t,W):e.text),[W]),ee=g.useCallback((()=>{if(E){const e=R(x,E);return g.createElement("div",{className:a.classNames("k-message-reference",e?"k-message-reference-sender":"k-message-reference-receiver")},g.createElement("div",{className:"k-message-reference-content"},Z(E,e)),g.createElement("span",{className:"k-spacer"}),g.createElement(n.Button,{fillMode:"flat",themeColor:"base",svgIcon:l.xIcon,onClick:()=>I(null),"aria-label":W.toLanguageString(w,D[w])}))}return null}),[E,x,Z,I,W]),te=g.useCallback((e=>{try{const t=Array.from(e.newState);K((e=>[...e,...t])),$()}catch{}}),[$]),ae=g.useCallback((()=>{j.current&&j.current.actionElement.click()}),[]),ne=g.useCallback((e=>{}),[]),le=g.useCallback((e=>{const{isFinal:t,alternatives:a}=e;if(a.length>0){const e=a[0];t&&B((t=>(t?`${t} `:"")+e.transcript))}}),[]),se=g.useCallback((()=>g.createElement(g.Fragment,null,L.length>0&&J(),E&&g.createElement("span",{className:"k-input-prefix k-input-prefix-horizontal"},ee()))),[L.length,E,J,ee]),oe=g.useCallback((e=>{e.preventDefault()}),[]),re=g.useCallback((e=>{"Escape"===e.key&&e.currentTarget.blur()}),[]),ie=g.useMemo((()=>g.createElement(n.Button,{rounded:"full",fillMode:"solid",themeColor:"primary",className:"k-chat-send",icon:"paper-plane",svgIcon:l.paperPlaneIcon,onClick:_,onMouseDown:oe,onKeyDown:re,"aria-label":W.toLanguageString(h,D[h]),dir:r?"rtl":void 0,disabled:!G,"aria-disabled":!G,...b})),[_,oe,re,W,r,G,b]),ce=g.useCallback((()=>{const e="object"==typeof F?F:void 0,t="object"==typeof N?N:{},{className:s,...o}=t,r=a.classNames("k-hidden",s);return g.createElement(c.InputSuffix,null,!1!==F&&g.createElement(n.SpeechToTextButton,{fillMode:"clear",themeColor:"base",onError:ne,onResult:le,...e}),g.createElement(n.Button,{key:"attach-file",fillMode:"clear",themeColor:"base",svgIcon:l.paperclipIcon,onClick:ae,"aria-label":W.toLanguageString(S,D[S])}),g.createElement(i.Upload,{ref:j,files:L,onAdd:te,multiple:!0,autoUpload:!1,...o,className:r}),g.createElement("span",{className:"k-spacer"}),ie)}),[F,N,L,ne,le,ae,te,W,ie]),ue=g.useMemo((()=>g.createElement(c.TextArea,{className:a.classNames("k-message-box","!k-flex-col",{"k-focus":A}),resizable:"none",rows:1,placeholder:u,value:M,onChange:H,onKeyDown:Y,onClick:y,prefix:se,suffix:ce,ref:U,"aria-label":W.toLanguageString(k,D[k])})),[A,u,M,H,Y,y,se,ce,W]);return g.createElement("div",{className:"k-message-box-wrapper"},d&&d.length>0&&g.createElement(Q,{onSuggestionClick:p,suggestions:d,suggestionTemplate:C}),m?g.createElement(m,{messageInput:ue,sendButton:ie}):ue)}));Z.displayName="NewMessage";const ee=e=>g.createElement(o.AppBar,{className:"k-chat-header",positionMode:"sticky",themeColor:"light"},e.children),te=e=>{const{message:t,onUnpin:o,user:r}=e,i=s.useLocalization(),{internalScrollContainerRef:c}=q(),u=g.useCallback((e=>{e.preventDefault(),e.stopPropagation();const a=null==c?void 0:c.current;B(t.id,a)}),[t.id,c]);return g.createElement("div",{className:"k-message-reference k-message-reference-receiver k-message-pinned",onClick:u},g.createElement(a.IconWrap,{size:"xlarge",icon:l.pinIcon}),g.createElement("div",{className:"k-message-reference-content"},null!=t&&t.isDeleted?r&&P(R(r,t),i):null==t?void 0:t.text),g.createElement("span",{className:"k-spacer"}),g.createElement(n.Button,{svgIcon:l.xIcon,onClick:e=>{e.stopPropagation(),null==o||o(t)}}))},ae=e=>{const{show:t,text:a}=e;return g.createElement("div",{style:{position:"absolute",top:"90%",left:"50%",transform:"translate(-50%, -50%)",zIndex:1e3,pointerEvents:t?"auto":"none"}},g.createElement(u.Fade,null,t&&g.createElement(m.Notification,{type:{style:"dark"},closable:!1},g.createElement("span",null,a))))},ne=Object.freeze({name:"@progress/kendo-react-conversational-ui",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:0,version:"12.1.0",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning"}),le={textField:"text",statusField:"status",authorIdField:"authorId",authorNameField:"authorName",authorImageUrlField:"authorImageUrl",authorImageAltTextField:"authorImageAltText",idField:"id",timestampField:"timestamp",filesField:"files",attachmentsField:"attachments",replyToIdField:"replyToId",isDeletedField:"isDeleted",isPinnedField:"isPinned",typingField:"typing",suggestedActionsField:"suggestedActions"},se=(e,t={})=>{const a={...le,...t};let n,l;n=e.author&&"object"==typeof e.author?{id:e.author.id||e.author[a.authorIdField]||e[a.authorIdField]||"",name:e.author.name||e.author[a.authorNameField]||e[a.authorNameField],avatarUrl:e.author.avatarUrl||e.author[a.authorImageUrlField]||e[a.authorImageUrlField],avatarAltText:e.author.avatarAltText||e.author[a.authorImageAltTextField]||e[a.authorImageAltTextField]}:{id:e[a.authorIdField]||e.authorId||"",name:e[a.authorNameField]||e.authorName,avatarUrl:e[a.authorImageUrlField]||e.authorImageUrl,avatarAltText:e[a.authorImageAltTextField]||e.authorImageAltText},l=e.timestamp?new Date(e.timestamp):e[a.timestampField]?new Date(e[a.timestampField]):new Date;const s={id:void 0!==e.id?e.id:e[a.idField],text:void 0!==e.text?e.text:e[a.textField]||"",author:n,timestamp:l,status:void 0!==e.status?e.status:e[a.statusField],attachments:void 0!==e.attachments?e.attachments:e[a.attachmentsField],attachmentLayout:e.attachmentLayout||"list",suggestedActions:void 0!==e.suggestedActions?e.suggestedActions:e[a.suggestedActionsField],isPinned:void 0!==e.isPinned?e.isPinned:e[a.isPinnedField]||!1,typing:void 0!==e.typing?e.typing:e[a.typingField],files:void 0!==e.files?e.files:e[a.filesField]||[]};return e.pinnedAt&&(s.pinnedAt=new Date(e.pinnedAt)),e.pinnedBy&&(s.pinnedBy=e.pinnedBy),void 0!==e.replyToId?s.replyToId=e.replyToId:void 0!==e[a.replyToIdField]&&(s.replyToId=e[a.replyToIdField]),void 0!==e.isDeleted?s.isDeleted=e.isDeleted:void 0!==e[a.isDeletedField]&&(s.isDeleted=e[a.isDeletedField]),s},oe=(e,t={})=>Array.isArray(e)?e.map((e=>se(e,t))):[],re=e=>e&&void 0!==e.id&&"string"==typeof e.text&&e.author&&"object"==typeof e.author&&void 0!==e.author.id&&(e.timestamp instanceof Date||"string"==typeof e.timestamp||"number"==typeof e.timestamp),ie=({viewItemsWrapperRef:e,isKeyboardNavigationActiveRef:t,processedMessages:a,suggestions:n})=>{const l=g.useCallback((()=>{e.current&&(e.current.scrollTop=e.current.scrollHeight-e.current.clientHeight)}),[e]),s=g.useCallback((()=>{if(!e.current)return!0;const t=e.current,{scrollTop:a,scrollHeight:n,clientHeight:l}=t;return n-a-l<75}),[e]),o=g.useCallback((e=>0===e?16:e<=2?32*e:Math.min(50*e,200)),[]),r=g.useCallback(((t,a)=>{const n=o(t);setTimeout((()=>{!s()&&e.current&&a(t+1)}),n)}),[o,s,e]),i=g.useCallback((()=>{const e=(t=0)=>{t>5||requestAnimationFrame((()=>{l(),r(t,e)}))};e()}),[l,r]),c=g.useCallback((()=>{l(),setTimeout((()=>{!s()&&e.current&&l()}),50)}),[l,s,e]),u=g.useCallback((()=>{requestAnimationFrame((()=>{requestAnimationFrame((()=>{requestAnimationFrame(c)}))}))}),[c]),m=g.useCallback((()=>{l(),setTimeout((()=>{!s()&&e.current&&i()}),25)}),[l,s,e,i]),d=g.useCallback(((a=!1)=>{e.current&&!t.current&&s()&&(a?m():u())}),[s,m,u,e,t]);g.useEffect((()=>{const e=window.setTimeout((()=>l()),250);return()=>{clearTimeout(e)}}),[l]),g.useEffect((()=>{i()}),[a.length,i]);const p=g.useRef(new Map);g.useEffect((()=>{const e=new Map;let t=!1;a.forEach((a=>{if(void 0!==a.id){const n=a.id,l=!!a.typing,s=p.current.get(n);e.set(n,l),!0===s&&!1===l&&(t=!0)}})),p.current=e,t&&i()}),[a,i]),g.useEffect((()=>{const e=window.setTimeout((()=>{d()}),50);return()=>{clearTimeout(e)}}),[a,d]),g.useEffect((()=>{if(a.length>0){const e=a[a.length-1],t=(null==e?void 0:e.text)||"";(t.includes("```")||t.includes("\n\n")||t.includes("<pre>")||t.includes("<code>")||t.includes("<table>")||t.length>500)&&d(!0)}}),[a,d]),g.useEffect((()=>{if(n&&n.length>0){const e=window.setTimeout((()=>{d()}),100);return()=>{clearTimeout(e)}}}),[n,d]),g.useEffect((()=>{if(!e.current)return()=>{};let t;const a=new ResizeObserver((()=>{t&&clearTimeout(t),t=window.setTimeout((()=>{d()}),50)})),n=e.current.querySelector(".k-message-list-content");return n&&a.observe(n),()=>{a.disconnect()}}),[d,e]);const h=g.useCallback((e=>{var t;if("characterData"!==e.type&&"childList"!==e.type)return!1;const a=null!=(t=e.target.textContent)?t:"";return a.includes("```")||a.includes("\n\n")||a.includes("<pre>")||a.includes("<code>")||a.includes("<table>")||e.addedNodes&&e.addedNodes.length>2}),[]),k=g.useCallback((e=>{let t=!1,a=!1;return e.forEach((e=>{var n;("childList"===e.type||"characterData"===e.type||"attributes"===e.type&&["class","style"].includes(null!=(n=e.attributeName)?n:""))&&(t=!0,h(e)&&(a=!0))})),{shouldScroll:t,hasSignificantChange:a}}),[h]),f=g.useCallback(((e,t)=>{t.current&&clearTimeout(t.current),e?d(!0):t.current=window.setTimeout((()=>{d()}),50)}),[d]);g.useEffect((()=>{if(!e.current)return()=>{};const t={current:void 0};let a=0;const n=new MutationObserver((e=>{const n=Date.now();if(n-a<16)return;a=n;const{shouldScroll:l,hasSignificantChange:o}=k(e);l&&s()&&f(o,t)}));return n.observe(e.current,{childList:!0,subtree:!0,characterData:!0,attributes:!0,attributeFilter:["class","style"]}),()=>{n.disconnect(),t.current&&clearTimeout(t.current)}}),[s,k,f,e])},ce=g.forwardRef(((e,t)=>{const{messages:n=[],messageTemplate:l,attachmentTemplate:o,width:r,height:i,onSendMessage:c,onSuggestionClick:u,onInputValueChange:m,onActionExecute:d,dir:p,messageBox:h,placeholder:k,className:f,message:C=z,authorId:b,suggestions:y,suggestionTemplate:E,inputValue:x,headerTemplate:w,timestampTemplate:T,statusTemplate:F,allowMessageCollapse:N,messageToolbarActions:A,messageContextMenuActions:S,fileActions:M,onUnpin:R,messageWidthMode:P,onToolbarAction:B,onContextMenuAction:L,onFileAction:K,onDownload:q,speechToTextConfig:V,uploadConfig:U,sendButtonConfig:j,textField:$,statusField:G,authorIdField:X,authorNameField:Q,authorImageUrlField:le,authorImageAltTextField:se,idField:ce,timestampField:ue,filesField:me,attachmentsField:de,replyToIdField:pe,isDeletedField:ge,isPinnedField:he,typingField:ke,suggestedActionsField:fe,...ve}=e,[Ce,be]=g.useState(null),[ye,Ee]=g.useState(!1),[Ie,xe]=g.useState(!1),[we,Te]=g.useState(null),[Fe,Ne]=g.useState(null),Ae=g.useRef(null),Se=g.useRef(null),Me=g.useRef(null),De=g.useRef(null),Re=g.useRef(void 0),Pe=g.useRef(!1),Be=g.useRef(null),Le=g.useRef(""),Ke=g.useMemo((()=>{if(!n||0===n.length)return[];const e={textField:$,statusField:G,authorIdField:X,authorNameField:Q,authorImageUrlField:le,authorImageAltTextField:se,idField:ce,timestampField:ue,filesField:me,attachmentsField:de,replyToIdField:pe,isDeletedField:ge,isPinnedField:he,typingField:ke,suggestedActionsField:fe};return!Object.values(e).some((e=>void 0!==e))&&re(n[0])?n.map((e=>({...e,timestamp:e.timestamp?new Date(e.timestamp):e.timestamp}))):oe(n,e)}),[n,$,G,X,Q,le,se,ce,ue,me,de,pe,ge,he,ke,fe]);g.useEffect((()=>{if(b===Le.current&&Be.current)Ne(Be.current);else if(b&&Ke.length>0){const e=Ke.find((e=>e.author&&(e.author.id===b||e.author.id===String(b)))),t=(null==e?void 0:e.author)||{id:b};Be.current=t,Le.current=b,Ne(t)}}),[b,Ke]);const Oe=g.useMemo((()=>Ke.length>0?(e=>{const t=e.slice().reduce(W(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})(Ke):[]),[Ke]),qe=g.useMemo((()=>!a.validatePackage(ne,{component:"Chat"})),[]),Ve=a.getLicenseMessage(ne),ze=g.useMemo((()=>Ke.find((e=>e.isPinned))),[Ke]),Ue=s.useLocalization();ie({viewItemsWrapperRef:Me,isKeyboardNavigationActiveRef:Pe,processedMessages:Ke,suggestions:y});const je=g.useCallback((()=>{clearTimeout(Re.current)}),[]),We=g.useCallback((()=>{Re.current=window.setTimeout((()=>{be(null)}),0)}),[]),$e=g.useCallback((e=>{be(e)}),[]),He=g.useCallback((e=>{let t=null;const n=null!==Ce?Ce:Oe.lastSelectionIndex;e.keyCode===a.Keys.up?null===n?t=0:n>0&&(t=n-1):e.keyCode===a.Keys.down?null===n?t=0:n<Oe.lastSelectionIndex&&(t=n+1):e.keyCode===a.Keys.home?t=0:e.keyCode===a.Keys.end&&(t=Oe.lastSelectionIndex),null!==t&&(be(t),Pe.current=!0,e.preventDefault())}),[Ce,Oe]),Ge=g.useCallback(((e,t,a)=>{var n;if(d&&d({action:{value:e.value,title:e.title,type:e.type},syntheticEvent:t,nativeEvent:t.nativeEvent,target:t.currentTarget}),!t.isDefaultPrevented()){switch(e.type){case"reply":c&&c({message:{id:"",author:Fe,text:e.value,timestamp:new Date},syntheticEvent:t,nativeEvent:t.nativeEvent,target:t.currentTarget});break;case"call":window.open("tel:"+e.value);break;case"openUrl":window.open(e.value)}null==(n=De.current)||n.focusInput()}}),[d,c,Fe]),_e=g.useCallback((()=>a.classNames("k-chat",f,{"k-rtl":ye})),[f,ye]),Ye=g.useCallback((()=>{const e=Oe.length-1;return Oe.map(((t,a)=>"date-marker"===t.type?g.createElement(Y,{item:t,key:t.trackBy,timestampTemplate:T}):"message-group"===t.type?g.createElement(J,{group:t,itemTemplate:l,attachmentTemplate:o,user:Fe,selectedItemIndex:Ce,onRequestSelection:$e,isLastGroup:a===e,key:t.messages[0].selectionIndex,message:C,allowMessageCollapse:N,messageToolbarActions:A,messageContextMenuActions:S,messageWidthMode:P}):"attachment-group"===t.type?g.createElement(_,{group:t,itemTemplate:o,onRequestSelection:$e,selected:t.selectionIndex===Ce,isLastGroup:a===e,key:t.selectionIndex}):"action-group"===t.type?g.createElement(H,{group:t,onActionExecute:Ge,onRequestSelection:$e,selected:t.selectionIndex===Ce,key:t.selectionIndex}):null))}),[Oe,T,l,o,Fe,Ce,$e,C,N,A,S,P,Ge]),Xe=g.useCallback((()=>w?"function"==typeof w?w():w:null),[w]);g.useEffect((()=>{const e=void 0!==p?"rtl"===p:Ae.current&&"rtl"===getComputedStyle(Ae.current).direction;Ee(!!e)}),[p]),g.useEffect((()=>()=>{clearTimeout(Re.current)}),[]);const Je=g.useMemo((()=>({replyToMessage:we,setReplyToMessage:Te,messages:Ke,user:Fe,internalScrollContainerRef:Se,messageListScrollContainerRef:Me,onToolbarAction:B,onContextMenuAction:L,onFileAction:K,setShowCopyNotification:xe,onDownload:q,fileActions:M,speechToTextConfig:V,uploadConfig:U,statusTemplate:F})),[we,Te,Ke,Fe,B,L,K,xe,q,M,V,U,F]);return g.createElement(O.Provider,{value:Je},g.createElement("div",{style:{width:r,height:i,position:"relative",overflow:"hidden"},onKeyDown:He,className:_e(),ref:e=>{Ae.current=e,Se.current=e,"function"==typeof t?t(e):t&&(t.current=e)},...ve},void 0!==w&&g.createElement(ee,null,Xe()),ze&&g.createElement(te,{message:ze,onUnpin:R,user:Fe}),g.createElement("div",{className:"k-message-list k-avatars",onBlur:We,onFocus:je,role:"log","aria-label":Ue.toLanguageString(v,D[v]),"aria-live":"polite",ref:Me},g.createElement("div",{className:"k-message-list-content"},Ye())),g.createElement(Z,{onSendMessage:(e,t)=>{c&&c({message:e,syntheticEvent:t,nativeEvent:t.nativeEvent,target:t.currentTarget})},onSuggestionClick:e=>{u&&u(e)},isDirectionRightToLeft:ye,ref:De,placeholder:k,MessageBox:h,suggestions:y,suggestionTemplate:E,inputValue:x,onInputValueChange:e=>{m&&m(e)},onInputClick:()=>{Pe.current=!1},sendButtonConfig:j}),g.createElement(ae,{show:Ie,text:Ue.toLanguageString(I,D[I])}),qe&&g.createElement(a.WatermarkOverlay,{message:Ve})))}));ce.displayName="Chat",ce.propTypes={messages:r.arrayOf(r.object),user:r.object,messageTemplate:r.any,attachmentTemplate:r.any,width:r.oneOfType([r.string,r.number]),onSendMessage:r.func,onActionExecute:r.func,dir:r.string,messageBox:r.any};const ue=e=>{const{activeView:a,toolbarItems:l,activeViewChange:s}=e;return t.createElement("div",{className:"k-prompt-header"},t.createElement(n.Toolbar,{keyboardNavigation:!1,role:"toolbar",className:"k-toolbar-flat"},l.map((e=>t.isValidElement(e)?e:t.createElement(n.Button,{key:e.name,className:a===e.name?"k-selected":"",size:"medium",themeColor:"primary",fillMode:"flat",rounded:"full",title:e.buttonText,svgIcon:e.buttonIcon,onClick:()=>(e=>{null==s||s.call(null,e)})(e.name)},e.buttonText)))))},me={name:"Output view",buttonText:"Output",buttonIcon:l.commentIcon},de={name:"Commands view",buttonIcon:l.moreHorizontalIcon},pe={name:"Prompt view",buttonText:"Ask AI",buttonIcon:l.sparklesIcon},ge=t.createContext([{},()=>{}]),he=()=>t.useContext(ge),ke=e=>{const{children:a}=e;return t.createElement("div",{className:"k-prompt-footer"},t.createElement("div",{className:"k-actions k-actions-start k-actions-horizontal k-prompt-actions"},a))},fe=t.forwardRef(((e,a)=>{const{children:o,streaming:r,onCancel:i}=e,c=s.useLocalization().toLanguageString(b,D[b]),[u]=he(),m=u.activeView===me.name,d=r&&m,p=t.useCallback((e=>{"Escape"===e.key&&d&&i&&(e.preventDefault(),i())}),[d,i]);return t.createElement("div",{className:"k-prompt-content",ref:a,onKeyDown:p},d&&t.createElement(n.FloatingActionButton,{onClick:i,svgIcon:l.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))}));fe.displayName="KendoReactAIPromptContent";const ve=e=>{const[t]=he();return t.activeView===e.name?e.children:null},Ce=e=>{const[a,s]=t.useState(!0),{children:o,title:r}=e;return t.createElement("div",{className:"k-prompt-expander"},t.createElement(n.Button,{"aria-controls":e.id,fillMode:"flat",svgIcon:a?l.chevronUpIcon:l.chevronDownIcon,title:r,onClick:()=>s(!a),"aria-expanded":a},r),a&&t.createElement("div",{id:e.id,className:"k-prompt-expander-content"},o))},be=e=>null==e?void 0:e.map((e=>t.createElement(o.PanelBarItem,{title:e.text,key:e.id,svgIcon:e.svgIcon,data:e},e.children&&be(e.children||[])))),ye=({show:e=!1,anchor:a,onOpen:n,onClose:l,animate:s=!0,appendTo:o,popupOptions:r={},children:i,style:c})=>t.createElement(d.Popup,{show:e,anchor:a,style:c,animate:s,appendTo:o,onOpen:n,onClose:l,...r},i),Ee=({placeholder:e="Ask or generate content with AI...",promptValue:s,onMenuClick:o,promptInput:r=c.TextArea,generateButton:i,enableSpeechToText:u=!1,streaming:m=!1,commands:d,onPromptRequest:p,onPromptCancel:g})=>{const[h,k]=t.useState(s||""),[f,v]=a.useCustomComponent(i),[C,b]=a.useCustomComponent(r),y={svgIcon:m?l.stopSmIcon:l.paperPlaneIcon,active:(!!m).toString(),title:"Send Button","aria-label":"Send Button",disabled:!h.trim()&&!m,"aria-disabled":!h.trim()&&!m},E={placeholder:e,className:"!k-flex-row",autoSize:!0,rows:1},I=d&&d.length>0,x=Object.keys(v).length>0?v:y,w=Object.keys(b).length>0?b:E,T=e=>{const{isFinal:t,alternatives:a}=e;if(t&&a.length>0){const e=a[0].transcript,t=(()=>{const t=h,a=t&&!t.endsWith(" ")&&!t.endsWith("\n");return t+(a?" ":"")+e})();k(t)}},F=()=>{h.trim()&&p&&p(h.trim())};return t.createElement(C,{value:h,onChange:e=>{const t=e.target.value;k(t)},onKeyDown:e=>{"Enter"===e.key&&!e.shiftKey&&(e.preventDefault(),F())},prefix:I||u?t.createElement(t.Fragment,null,t.createElement(c.InputPrefix,{className:"!k-align-items-start"},I&&t.createElement(n.Button,{"aria-label":"Commands Button",title:"Commands Button",fillMode:"flat",svgIcon:l.menuIcon,onClick:o}),u&&t.createElement(n.SpeechToTextButton,{fillMode:"flat",..."object"==typeof u?{...u,onResult:u.onResult||T}:{onResult:T}})),t.createElement(c.InputSeparator,null)):void 0,suffix:t.createElement(c.InputSuffix,{className:"!k-align-items-start"},t.createElement(f,{className:a.classNames("k-prompt-send",{"k-generating":m,"k-active":m}),fillMode:"flat",onClick:m?g:F,...x})),...w})};e.AIPrompt=e=>{const n=!a.validatePackage(ne,{component:"AIPrompt"}),l=a.getLicenseMessage(ne),{activeView:s,toolbarItems:o,children:r,onActiveViewChange:i,onPromptRequest:c,onCommandExecute:u,style:m,dir:d,className:p,streaming:g,loading:h,onCancel:k,suggestionsView:f,...v}=e,C=o||[pe,me],[b,y]=t.useState({activeView:s}),E={...b,activeView:s,streaming:g,loading:h,suggestionsView:null!=f?f:"classic",onCancel:k,onActiveViewChange:i,onPromptRequest:c,onCommandExecute:u};return t.createElement(ge.Provider,{value:[E,e=>{y(e)}]},t.createElement("div",{className:a.classNames("k-prompt",p),style:m,dir:d,...v},t.createElement(ue,{activeView:E.activeView,toolbarItems:C,activeViewChange:i}),r,n&&t.createElement(a.WatermarkOverlay,{message:l})))},e.AIPromptCommandsView=e=>{const{commands:a}=e,[n]=he();return t.createElement(ve,{name:de.name},t.createElement(fe,{streaming:n.streaming,onCancel:n.onCancel},t.createElement("div",{className:"k-prompt-view"},t.createElement(o.PanelBar,{onSelect:e=>{var t,a,l;const s=null==(a=null==(t=e.target)?void 0:t.props)?void 0:a.data;null!=(l=s.children)&&l.length||n.onCommandExecute&&n.onCommandExecute.call(null,s)},selected:""},be(null!=a?a:[])))))},e.AIPromptContent=fe,e.AIPromptFooter=ke,e.AIPromptOutputView=e=>{const[a,r]=t.useState(""),i=t.useRef(null),[c]=he(),{outputs:u,showOutputRating:m,outputCard:d}=e,{header:p,body:g,actions:h}=d||{},k=s.useLocalization(),f=(e,t)=>{c.onPromptRequest&&c.onPromptRequest.call(null,e.prompt,{...e,ratingType:t,isRetry:!1}),v()},v=()=>{i&&i.current&&i.current.scrollTo({top:0,behavior:"smooth"})},b=t.createElement(o.Card,null,t.createElement(o.CardHeader,null,t.createElement(o.CardTitle,null,t.createElement("span",{className:"k-skeleton k-skeleton-text k-skeleton-pulse",style:{width:"200px"}})),t.createElement(o.CardSubtitle,null,t.createElement("span",{className:"k-skeleton k-skeleton-text k-skeleton-pulse",style:{width:"100%"}}))),t.createElement(o.CardBody,null,t.createElement("span",{className:"k-skeleton k-skeleton-rect k-skeleton-pulse",style:{height:"80px"}})),t.createElement(o.CardActions,null,t.createElement("span",{className:"k-skeleton k-skeleton-text k-skeleton-pulse",style:{width:"100%"}}))),y=null==u?void 0:u.map(((e,s)=>t.createElement(o.Card,{key:`${e.id}_${s}`},t.createElement(o.CardHeader,null,p?p(e):t.createElement(t.Fragment,null,e.title&&t.createElement(o.CardTitle,null,e.title),e.subTitle&&t.createElement(o.CardSubtitle,null,e.subTitle))),t.createElement(o.CardBody,null,g?g(e):e.responseContent),t.createElement(o.CardActions,null,h?h(e):t.createElement(t.Fragment,null,t.createElement(n.Button,{size:"medium",themeColor:"primary",fillMode:"flat",rounded:"medium",title:"Copy",svgIcon:a===e.id?l.checkIcon:l.copyIcon,onClick:()=>(e=>{null!=e&&e.responseContent&&navigator.clipboard.writeText(e.responseContent),r(e.id),setTimeout((()=>{r("")}),1e3)})(e)},"Copy"),t.createElement(n.Button,{size:"medium",themeColor:"base",fillMode:"flat",rounded:"medium",title:"Retry",svgIcon:l.arrowRotateCwIcon,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(n.Button,{size:"medium",themeColor:"positive"===e.ratingType?"primary":"base",fillMode:"flat",rounded:"medium",title:"Rate up",svgIcon:l.thumbUpOutlineIcon,onClick:()=>f(e,"positive")}),t.createElement(n.Button,{size:"medium",themeColor:"negative"===e.ratingType?"primary":"base",fillMode:"flat",rounded:"medium",title:"Rate down",svgIcon:l.thumbDownOutlineIcon,onClick:()=>f(e,"negative")}))))))),E=t.createElement(o.Card,null,t.createElement(o.CardBody,null,k.toLanguageString(C,D[C])));return t.createElement(ve,{name:me.name},t.createElement(fe,{ref:i,streaming:c.streaming,onCancel:c.onCancel},t.createElement("div",{className:"k-card-list"},c.loading&&b,y,(!y||0===y.length)&&!c.loading&&E)))},e.AIPromptView=e=>{const{promptInput:s=c.TextArea,generateButton:o=n.Button,enableSpeechToText:r=!1,promptValue:i,promptSuggestions:u}=e,[m,d]=t.useState(i||""),[p]=he(),[g,h]=a.useCustomComponent(o),[k,f]=a.useCustomComponent(s),v={title:"Generate",children:"Generate",svgIcon:l.sparklesIcon},C=Object.keys(h).length>0?h:v,b=Object.keys(f).length>0?f:{placeholder:"Ask or generate content with AI ...",rows:2},y=e=>{const{isFinal:t,alternatives:a}=e;if(t&&a.length>0){const e=a[0].transcript,t=(()=>{const t=m,a=t&&!t.endsWith(" ")&&!t.endsWith("\n");return t+(a?" ":"")+e})();d(t)}};let E;return r&&(E="object"==typeof r?{...r,onResult:r.onResult||y}:{onResult:y}),t.createElement(ve,{name:pe.name},t.createElement(fe,{streaming:p.streaming,onCancel:p.onCancel},t.createElement(k,{value:m,className:"!k-flex-col",suffix:r?t.createElement(t.Fragment,null,t.createElement(c.InputSeparator,{orientation:"horizontal"}),t.createElement(c.InputSuffix,{orientation:"horizontal"},t.createElement(n.SpeechToTextButton,{fillMode:"flat",...E}))):void 0,onChange:e=>{d(e.target.value)},...b}),u&&u.length>0&&t.createElement(Ce,{title:"Prompt Suggestions"},t.createElement(Q,{suggestionsView:p.suggestionsView,suggestions:u.map(((e,t)=>({id:t,text:e,description:e}))),onSuggestionClick:e=>{(e=>{d(e)})(e.text)}}))),t.createElement(ke,null,t.createElement(g,{themeColor:"primary",fillMode:"solid",rounded:"full",size:"medium",onClick:()=>{p.onPromptRequest&&p.onPromptRequest.call(null,m),d("")},disabled:!m.trim(),...C},C.children)))},e.AIPromptViewRender=ve,e.Chat=ce,e.ChatMessage=z,e.DEFAULT_FIELD_MAPPING=le,e.HeroCard=e=>{const{imageUrl:t,imageMaxWidth:a,title:l,subtitle:s,actions:o,onActionExecute:r,altText:i}=e,c=g.useCallback(((e,t)=>{null==r||r({action:e,syntheticEvent:t,nativeEvent:t.nativeEvent,target:t.currentTarget})}),[r]),u=i||l||"";return g.createElement("div",{className:"k-card"},g.createElement("img",{className:"k-card-image",src:t,style:{maxWidth:a},alt:u}),g.createElement("div",{className:"k-card-body"},l&&g.createElement("h5",{className:"k-card-title"},l),s&&g.createElement("h6",{className:"k-card-subtitle"},s)),g.createElement("div",{className:"k-card-actions k-card-actions-vertical"},o.map(((e,t)=>g.createElement("span",{className:"k-card-action",key:`action-${t}-${e.title||e.value||t}`},g.createElement(n.Button,{fillMode:"flat",onClick:t=>c(e,t)},e.title))))))},e.InlineAIPrompt=e=>{const s=!a.validatePackage(ne,{component:"InlineAIPrompt"}),r=a.getLicenseMessage(ne),{outputs:i=[],outputCard:u,promptInput:m=c.TextArea,generateButton:d=n.Button,promptPlaceholder:p="Ask or generate content with AI...",promptValue:g,onPromptRequest:h,onCopy:k,onDiscard:f,outputActions:v,onOutputAction:C,enableSpeechToText:b=!1,streaming:y,onPromptCancel:E,show:I=!1,anchor:x,width:w,height:T,onOpen:F,onClose:N,animate:A=!0,appendTo:S,commands:M,onCommandExecute:D,style:R,className:P,popupOptions:B={},...L}=e,[K,O]=t.useState(""),[q,V]=t.useState(!1),[z,U]=t.useState({left:0,top:0}),j=t.useRef(null),{body:W,actions:$}=u||{},H=v||[{id:"copy",text:"Copy",svgIcon:l.copyIcon,themeColor:"primary",title:"Copy"},{id:"discard",text:"Discard",svgIcon:l.cancelOutlineIcon,themeColor:"base",title:"Discard"}],G=(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==f||f(e)})(t);break;default:null==C||C(e,t)}},_=t.useCallback((e=>{"Escape"===e.key&&(y&&E?E():!y&&N&&N({target:null}))}),[y,E,N]),Y={...R,...w&&{width:w},...T&&{height:T}},X={...w&&{width:w},...T&&{height:T}},J=t.createElement(t.Fragment,null,t.createElement("div",{className:a.classNames("k-prompt",P),style:Y,onKeyDown:_,...L},t.createElement(fe,{ref:j},i&&i.length>0&&t.createElement("div",{className:"k-card-list"},i.map(((e,a)=>t.createElement(o.Card,{key:`${e.id}_${a}`},t.createElement(o.CardBody,null,W?W(e):e.responseContent),t.createElement(o.CardActions,null,$?$(e):t.createElement(t.Fragment,null,H.map((a=>{var s;return a.spacer?t.createElement("span",{key:a.id,className:"k-spacer"}):t.createElement(n.Button,{key:a.id,size:"medium",themeColor:a.themeColor||"primary",fillMode:"flat",rounded:"medium",title:null!=(s=a.title)?s:a.text,svgIcon:"copy"===a.id&&K===e.id?l.checkIcon:a.svgIcon,onClick:()=>G(a,e)},a.text)})))))))),t.createElement(Ee,{promptValue:g,placeholder:p,onPromptRequest:h,onMenuClick:e=>{if(!j.current)return;const t=j.current.getBoundingClientRect();U({left:t.left,top:t.bottom}),V(!0)},onPromptCancel:E,promptInput:m,generateButton:d,enableSpeechToText:b,streaming:y,commands:M}))),s&&t.createElement(a.WatermarkOverlay,{message:r}));return t.createElement(t.Fragment,null,t.createElement(ye,{show:I,anchor:x,onOpen:F,onClose:N,animate:A,appendTo:S,popupOptions:B,style:X},J),t.createElement(o.ContextMenu,{show:q,offset:z,onClose:()=>{V(!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}))))(M),onSelect:e=>{var t,a;const n=null==(t=e.item)?void 0:t.data;n&&(null==(a=n.children)||!a.length)&&(e=>{V(!1),D&&D(e)})(n)}}))},e.PromptHeader=ue,e.SuggestionGroup=Q,e.commandsViewDefaults=de,e.extractFieldMappingFromProps=e=>({textField:e.textField,statusField:e.statusField,authorIdField:e.authorIdField,authorNameField:e.authorNameField,authorImageUrlField:e.authorImageUrlField,authorImageAltTextField:e.authorImageAltTextField,idField:e.idField,timestampField:e.timestampField,filesField:e.filesField,attachmentsField:e.attachmentsField,replyToIdField:e.replyToIdField,isDeletedField:e.isDeletedField,isPinnedField:e.isPinnedField,typingField:e.typingField,suggestedActionsField:e.suggestedActionsField}),e.isStandardMessageFormat=re,e.mapDataArrayToMessages=oe,e.mapDataToMessage=se,e.mapMessageToCustomFormat=(e,t={})=>{const a={...le,...t},n={};return void 0!==e.id&&(n[a.idField]=e.id),void 0!==e.text&&(n[a.textField]=e.text),void 0!==e.status&&(n[a.statusField]=e.status),void 0!==e.timestamp&&(n[a.timestampField]=e.timestamp),void 0!==e.attachments&&(n[a.attachmentsField]=e.attachments),void 0!==e.files&&(n[a.filesField]=e.files),void 0!==e.suggestedActions&&(n[a.suggestedActionsField]=e.suggestedActions),void 0!==e.replyToId&&(n[a.replyToIdField]=e.replyToId),void 0!==e.isDeleted&&(n[a.isDeletedField]=e.isDeleted),void 0!==e.isPinned&&(n[a.isPinnedField]=e.isPinned),void 0!==e.typing&&(n[a.typingField]=e.typing),e.author&&(void 0!==e.author.id&&(n[a.authorIdField]=e.author.id),void 0!==e.author.name&&(n[a.authorNameField]=e.author.name),void 0!==e.author.avatarUrl&&(n[a.authorImageUrlField]=e.author.avatarUrl),void 0!==e.author.avatarAltText&&(n[a.authorImageAltTextField]=e.author.avatarAltText)),void 0!==e.pinnedAt&&(n.pinnedAt=e.pinnedAt),void 0!==e.pinnedBy&&(n.pinnedBy=e.pinnedBy),void 0!==e.attachmentLayout&&(n.attachmentLayout=e.attachmentLayout),n},e.outputViewDefaults=me,e.promptViewDefaults=pe}));