@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 • 55.5 kB
JavaScript
View Raw
/**
 * @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",f="newMessage.messageInput",k="avatar.alt",v="messageList.ariaLabel",b="aIPrompt.noOutputs",y="aIPrompt.cancel",C="chat.senderDeletedMessage",E="chat.receiverDeletedMessage",I="chat.copyNotification",x="chat.downloadAllFiles",w="chat.closeReply",T="chat.collapseMessage",F="chat.expandMessage",A="chat.removeFile",S="chat.fileActions",N="chat.attachFile",M="chat.downloadAll",R="chat.scrollLeft",D="chat.scrollRight",L={[h]:"Send","newMessage.optionsButton":"Options",[f]:"Message",[k]:"Avatar",[v]:"Message list",[y]:"Cancel",[b]:"No output from AI available",[C]:"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",[A]:"Remove file",[S]:"File actions for",[N]:"Attach file",[M]:"Download all",[R]:"Scroll left",[D]:"Scroll right"},B=(e,t)=>e&&t.author&&e.id===t.author.id,P=(e,t)=>{const a=t.toLanguageString("chatSender.deletedMessage",L[C]),n=t.toLanguageString("chatReceiver.deletedMessage",L[E]);return e?a:n},z=(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"})},O=/(https?:\/\/[^\s]+)/g,K=e=>{if(!e)return[""];const a=e.split(O),n=[];return a.forEach((e=>{e&&O.test(e)?(O.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},q=g.createContext(void 0),U=()=>{const e=t.useContext(q);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,{messageFilesLayout:m="vertical"}=U(),d=s.useLocalization(),p=c||[{id:"download",label:"Download",svgIcon:l.downloadIcon}],h=e=>"."+e.split(".").pop()||"",f=e=>u?g.createElement(n.Button,{fillMode:"flat",themeColor:"base",svgIcon:l.xIcon,onClick:t=>{t.stopPropagation(),null==o||o(e.name)},"aria-label":`${d.toLanguageString(A,L[A])} ${e.name}`}):p.length>0&&g.createElement(n.DropDownButton,{fillMode:"flat",themeColor:"base",svgIcon:l.moreVerticalIcon,onClick:e=>{e.syntheticEvent.stopPropagation()},onItemClick:t=>((e,t)=>{var a,n;null==(n=null==(a=e.syntheticEvent)?void 0:a.stopPropagation)||n.call(a),"download"===e.item.id&&(null==i||i([t])),null==r||r(e.item,e,t)})(t,e),items:p.map((e=>({id:e.id,icon:e.icon,text:e.label,svgIcon:e.svgIcon}))),"aria-label":`${d.toLanguageString(S,L[S])} ${e.name}`}),k=g.useCallback((()=>a.classNames("k-chat-file-wrapper",{"k-chat-files-wrap":"wrap"===m,"k-chat-files-horizontal":"horizontal"===m})),[m]);return g.createElement("ul",{className:k()},t.map((e=>g.createElement("li",{key:e.name,className:"k-chat-file"},g.createElement(a.IconWrap,{size:"xlarge",...a.getFileExtensionIcon(h(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))),f(e)))))},W=g.forwardRef(((e,t)=>{const{item:r,template:i,contentTemplate:c,onRequestSelection:u,tabIndex:m=-1,dateFormat:d="g",selected:p,allowMessageCollapse:h,messageToolbarActions:f,messageContextMenuActions:k,fileActions:v,isSender:b}=e,{setReplyToMessage:y,messages:C,user:E,internalScrollContainerRef:I,onToolbarAction:w,onContextMenuAction:A,onFileAction:S,onDownload:N,setShowCopyNotification:R,statusTemplate:D,timestampVisibility:O="onFocus"}=U(),[q,W]=g.useState(!1),[j,$]=g.useState(!1),[H,G]=g.useState(!0),[_,Y]=g.useState(!1),X=s.useLocalization(),J=s.useInternationalization(),Q=g.useRef({left:0,top:0}),Z=g.useCallback((()=>{null!=r&&r.text&&(e=>{navigator.clipboard.writeText(e)})(r.text),R&&(R(!0),setTimeout((()=>{R(!1)}),3e3))}),[r,R]),ee=g.useCallback((e=>{e.stopPropagation(),G((e=>!e))}),[]),te=g.useCallback((()=>{Y(!1)}),[]),ae=g.useCallback((e=>{("Tab"===e.key||"Enter"===e.key||" "===e.key||"ArrowUp"===e.key||"ArrowDown"===e.key)&&Y(!0)}),[]),ne=g.useRef(null);g.useEffect((()=>{p&&ne.current&&ne.current.focus()}),[p]);const le=g.useCallback((e=>{Q.current={left:e.pageX,top:e.pageY},e.preventDefault(),$(!0),W(!0)}),[]),se=g.useCallback((()=>{$(!1),W(!1)}),[]),oe=g.useCallback(((e,t)=>e.isDeleted?P(t,X):e.text?e.text:""),[X]),re=g.useCallback((e=>{var t;null!=(t=e.item)&&t.text&&("copy"!==e.item.data.id||r.isDeleted?"reply"===e.item.data.id&&y(r):Z(),A&&A(e.item.data,e,r)),$(!1),W(!1)}),[r,A,y,Z]),ie=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==I?void 0:I.current;z(e.id,a)};return g.createElement("div",{className:a.classNames("k-message-reference",B(E,e)?"k-message-reference-sender":"k-message-reference-receiver"),onClick:t},g.createElement("div",{className:"k-message-reference-content"},K(oe(e,B(E,e)))))}}return null}),[r.replyToId,C,E,oe,I]),ce=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:re,onClose:se,vertical:!0,show:q,offset:Q.current},t.map((e=>"delete"!==e.id||b?g.createElement(o.MenuItem,{key:e.id,text:e.label,icon:e.icon,svgIcon:e.svgIcon,data:e}):null)))}),[k,re,se,q,b]),ue=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":X.toLanguageString(x,L[x])},g.createElement("span",{className:"k-button-text"},X.toLanguageString(M,L[M])))):null),[r,N,X]),me=g.useCallback((()=>{if(r.typing)return g.createElement("div",{className:"k-chat-bubble k-bubble"},g.createElement("div",{className:"k-bubble-content"},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(g.Fragment,null,g.createElement(e,{item:r}),ce())}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":h,"k-expanded":h&&H,"k-selected":p,"k-active":j}),onClick:()=>u(p?void 0:r.selectionIndex),onContextMenu:le},g.createElement("div",{className:"k-bubble-content"},c?g.createElement(c,{item:r}):g.createElement(g.Fragment,null,(r.text||r.isDeleted||r.replyToId)&&g.createElement("span",{className:"k-chat-bubble-text"},!r.isDeleted&&ie(),K(oe(r,B(E,r)))),r.files&&r.files.length>0&&g.createElement(V,{files:r.files,message:r,onFileAction:S,onDownload:e=>null==N?void 0:N(e,r),renderInTextarea:!1,fileActions:v}),ue())),h&&g.createElement("span",{className:"k-bubble-expandable-indicator",onClick:ee,role:"button","aria-label":H?X.toLanguageString(T,L[T]):X.toLanguageString(F,L[F]),tabIndex:0,onKeyDown:e=>{("Enter"===e.key||" "===e.key)&&(e.preventDefault(),ee(e))}},g.createElement(a.IconWrap,{icon:H?l.chevronUpIcon:l.chevronDownIcon,size:"medium"}))),ce()):null}),[r,i,c,h,H,p,j,u,le,ie,oe,E,S,v,ue,ee,X,ce,N]),de=g.useCallback((()=>{let e=null;if(r.timestamp){const t="onFocus"===O&&p;"hidden"===O||(e=g.createElement("time",{className:"k-message-time","aria-hidden":!t},J.formatDate(r.timestamp,d)))}return e}),[r.timestamp,p,d,O,J]),pe=g.useCallback((()=>{let e=null;return r.status&&p&&(e=D?g.createElement(D,{item:r}):g.createElement("span",{className:"k-message-status"},g.createElement(a.IconWrap,{icon:l.checkCircleIcon,size:"xsmall"}),r.status)),e}),[r,p,D]),ge=g.useCallback((()=>a.classNames({"k-focus":p,"k-message-removed":r.isDeleted},"k-message")),[p,r.isDeleted]),he=g.useCallback((()=>f&&f.length>0&&g.createElement("div",{className:"k-chat-message-toolbar k-toolbar k-toolbar-md k-toolbar-flat"},f.map((e=>"delete"!==e.id||b?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&&y(r):Z(),w&&w(e,t,r)},onMouseDown:e=>e.preventDefault()}):null)))),[Z,b,r,f,w,y]);return g.createElement("div",{"data-message-id":r.id,className:ge(),tabIndex:m,onMouseDown:te,onKeyDown:ae,onFocus:e=>{_&&u(r.selectionIndex)},ref:e=>{ne.current=e,"function"==typeof t?t(e):t&&(t.current=e)},onContextMenu:i?le:void 0},de(),me(),pe(),he())}));W.displayName="ChatMessage";const j=e=>e[e.length-1],$=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&&B(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 H=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)},G=({visible:e,dir:t,canScrollLeft:a,canScrollRight:o,onScrollLeft:r,onScrollRight:i,children:c})=>{const u=s.useLocalization();if(!e)return c;const m=u.toLanguageString(R,L[R]),d=u.toLanguageString(D,L[D]),p="rtl"!==t?m:d,h="rtl"!==t?d:m;return g.createElement("div",{className:"k-suggestion-scrollwrap"},g.createElement(n.Button,{fillMode:"solid",themeColor:"base",size:"medium",rounded:"medium",svgIcon:"rtl"===t?l.chevronRightIcon:l.chevronLeftIcon,onClick:r,disabled:!a,className:"k-icon-button","aria-label":p,title:p}),c,g.createElement(n.Button,{fillMode:"solid",themeColor:"base",size:"medium",rounded:"medium",svgIcon:"rtl"===t?l.chevronLeftIcon:l.chevronRightIcon,onClick:i,disabled:!o,className:"k-icon-button","aria-label":h,title:h}))},_=100,Y=(e,t)=>{const{enabled:a,dir:n,itemsDependency:l=[],scrollSpeed:s=_}=t,[o,r]=g.useState(!1),[i,c]=g.useState(!1),u=g.useCallback((()=>{if(e.current&&a){const{scrollLeft:t,scrollWidth:a,clientWidth:l}=e.current,s="rtl"!==n?t+l>=a-1:l-t>=a-1;r(!(0===t)),c(!s)}}),[a,n]),m=g.useCallback((()=>{e.current&&a&&e.current.scrollBy({left:"rtl"!==n?-s:s,behavior:"smooth"})}),[a,n,s]),d=g.useCallback((()=>{e.current&&a&&e.current.scrollBy({left:"rtl"!==n?s:-s,behavior:"smooth"})}),[a,n,s]);return g.useEffect((()=>{const t=e.current;if(t&&a){u(),t.addEventListener("scroll",u);const e=new ResizeObserver(u);return e.observe(t),()=>{t.removeEventListener("scroll",u),e.disconnect()}}}),[a,n]),g.useLayoutEffect((()=>{a&&u()}),[a,n,l]),{canScrollLeft:o,canScrollRight:i,scrollLeft:m,scrollRight:d}},X=e=>{var t;const{group:n,onActionExecute:l,selected:s,onRequestSelection:o,quickActionsLayout:r="scroll",dir:i}=e,[c,u]=g.useState(null),m=g.useRef(null),{canScrollLeft:d,canScrollRight:p,scrollLeft:h,scrollRight:f}=Y(m,{enabled:"scrollbuttons"===r,dir:i,itemsDependency:n.actions});g.useEffect((()=>{s||null===c?s&&null===c&&u(0):u(null)}),[s,c]);const k=g.useCallback((()=>n.actions?n.actions.length-1:-1),[n.actions]),v=g.useCallback(((e,t=0)=>{let a=null;return e?null===c?a=t:c<k()&&(a=c+1):null===c?a=0:c>0&&(a=c-1),null!==a&&u(a),a}),[c,k]),b=g.useCallback((()=>{o(n.selectionIndex)}),[o,n.selectionIndex]),y=g.useCallback((e=>{let t=null;const n=a.Keys.left,l=a.Keys.right;e.keyCode===n?t=v(!1):e.keyCode===l&&(t=v(!0)),null!==t&&(e.preventDefault(),e.stopPropagation())}),[v]),C=g.useCallback((()=>a.classNames("k-suggestion-group",{"k-suggestion-group-scrollable":"scroll"===r})),[r]),E=g.createElement("div",{className:C(),onClick:b,onKeyDown:y,role:"toolbar",tabIndex:0,"aria-label":"Action group",ref:"scrollbuttons"===r?m:void 0},null==(t=n.actions)?void 0:t.map(((e,t)=>g.createElement(H,{item:e,onActionExecute:l,selected:t===c,key:e.value}))));return g.createElement(G,{visible:"scrollbuttons"===r,dir:i,canScrollLeft:d,canScrollRight:p,onScrollLeft:h,onScrollRight:f},E)},J=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",style:{maxHeight:"200px",height:"auto",maxWidth:"200px",width:"auto"}}):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())))},Q=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]),f=g.useCallback((()=>{i(t.selectionIndex)}),[i,t.selectionIndex]),k=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=>{f(),u(e)}),[f]),b=g.useCallback((e=>{f(),h(e,1)}),[f,h]),y=g.useCallback((()=>{let e=null;return m(t)&&c&&(e=g.createElement(n.Button,{icon:"chevron-left",onClick:()=>b(!1),svgIcon:l.chevronLeftIcon})),e}),[m,t,c,b]),C=g.useCallback((()=>{let e=null;return m(t)&&c!==p()&&(e=g.createElement(n.Button,{icon:"chevron-right",onClick:()=>b(!0),svgIcon:l.chevronRightIcon})),e}),[m,t,c,p,b]),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:k},t.attachments.map(((e,t)=>g.createElement(J,{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:k},y(),x,C()):x},Z=({item:e,timestampTemplate:t})=>{const a=s.useInternationalization(),n=t;return g.createElement("div",{className:"k-timestamp"},n?g.createElement(n,{item:e}):a.formatDate(e.timestamp,"D"))},ee=e=>{const{group:t,user:n,itemTemplate:l,contentTemplate:r,attachmentTemplate:i,onRequestSelection:c,selectedItemIndex:u,isLastGroup:m,message:d,allowMessageCollapse:p,messageToolbarActions:h,messageContextMenuActions:f,fileActions:v,messageWidthMode:b="standard",showAvatar:y=!0,showUsername:C=!0}=e,{userStatusTemplate:E}=U(),I=s.useLocalization(),x=t.messages.length>0&&B(n,t.messages[0]),{avatarUrl:w,avatarAltText:T,name:F}=t.author,A=g.useMemo((()=>a.classNames("k-message-group",{"k-message-group-sender":x,"k-message-group-receiver":!x,"k-message-group-full-width":"full"===b,"k-no-avatar":!y||!w})),[x,b,y,w]),S=g.useMemo((()=>{const e=t.messages.length-1;return t.messages.map(((t,a)=>{const s=[g.createElement(d,{item:t,template:l,contentTemplate:r,selected:t.selectionIndex===u,onRequestSelection:c,tabIndex:a===e&&m?0:-1,key:t.id,allowMessageCollapse:p,messageToolbarActions:h,messageContextMenuActions:f,fileActions:v,isSender:B(n,t)})];return t.attachments&&1===t.attachments.length&&s.push(g.createElement(J,{item:t.attachments[0],template:i,selected:!1,key:`att-${t.attachments[0].content}`})),s}))}),[t.messages,d,l,r,u,c,m,p,h,f,v,n,i]),N=void 0!==T?T:I.toLanguageString(k,L[k]);return g.createElement("div",{className:A},(()=>{if(!y||!w)return;const e=g.createElement(o.Avatar,{type:"image"},g.createElement("img",{src:w,alt:N}));if(E){const a=t.messages[t.messages.length-1];return g.createElement("div",{className:"k-chat-user-status-wrapper"},e,g.createElement("div",{className:"k-chat-user-status"},g.createElement(E,{message:"dataItem"in a?a.dataItem:a})))}return e})(),g.createElement("div",{className:"k-message-group-content"},C&&g.createElement("span",{className:"k-message-author"},F),S))},te=e=>{const{suggestions:t,onSuggestionClick:n,suggestionsView:l,suggestionTemplate:s,suggestionsLayout:o,dir:r}=e,i=g.useRef(null),{canScrollLeft:c,canScrollRight:u,scrollLeft:m,scrollRight:d}=Y(i,{enabled:"scrollbuttons"===o,dir:r,itemsDependency:t}),p=g.useCallback(((e,t)=>{("Enter"===e.key||" "===e.key)&&(e.preventDefault(),null==n||n(t))}),[n]),h=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&&p(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,p]);if(!t||0===t.length)return null;if("classic"===l)return h();const f=g.createElement("div",{role:"group",className:a.classNames("k-suggestion-group",{"k-suggestion-group-scrollable":"scroll"===o}),ref:"scrollbuttons"===o?i:void 0},h());return g.createElement(G,{visible:"scrollbuttons"===o,dir:r,canScrollLeft:c,canScrollRight:u,onScrollLeft:m,onScrollRight:d},f)},ae=g.forwardRef(((e,t)=>{const{onSendMessage:o,isDirectionRightToLeft:r,placeholder:u,MessageBox:m,suggestions:d,onSuggestionClick:p,inputValue:k,onInputValueChange:v,suggestionTemplate:b,sendButtonConfig:y,onInputClick:C,suggestionsLayout:E,dir:I}=e,{replyToMessage:x,setReplyToMessage:T,user:F,messageListScrollContainerRef:A,speechToTextConfig:S,uploadConfig:M}=U(),[R]=g.useState(!1),[D,z]=g.useState(void 0),[O,K]=g.useState([]),[q,W]=g.useState(!1),j=g.useRef(null),$=g.useRef(null),H=s.useLocalization(),G=g.useCallback((()=>{null!==j.current&&j.current.focus()}),[]);g.useEffect((()=>{void 0!==k&&k!==D&&(z(k),G())}),[k,D,G]),g.useEffect((()=>{x&&G()}),[x,G]),g.useLayoutEffect((()=>{q&&null!=A&&A.current&&(A.current.scrollTop=A.current.scrollHeight-A.current.clientHeight,W(!1))}),[q,A]);const _=g.useCallback((e=>{const t=e.value;z(t),v&&v(t)}),[v]),Y=g.useMemo((()=>!!(null!=D&&D.trim()||!1!==M&&O.length>0)),[D,O.length,M]),X=g.useCallback((e=>{if(e.preventDefault(),o){if(Y){const t={id:"",author:F,text:D||"",timestamp:new Date,replyToId:x?x.id:void 0,files:O.map((e=>({name:e.name,size:e.size,type:e.extension,rawFile:e.getRawFile?e.getRawFile():e})))};T(null),o(t,e),K([]),z(""),v&&v(""),W(!0)}}}),[o,D,F,x,O,T,v,Y]),J=g.useCallback((e=>{if("Enter"!==e.key||!e.shiftKey)switch(e.key){case"Enter":return e.preventDefault(),X(e);case"Escape":j.current&&j.current.blur();break;default:return}}),[X]);g.useImperativeHandle(t,(()=>({focusInput:G})),[G]);const Q=g.useCallback((e=>{K((t=>t.filter((t=>t.name!==e))))}),[]),Z=g.useCallback((()=>!1===M?null:g.createElement(V,{files:O,onFileRemove:Q,renderInTextarea:!0})),[O,Q,M]),ee=g.useCallback(((e,t)=>e.isDeleted?P(t,H):e.text),[H]),ae=g.useCallback((()=>{if(x){const e=B(F,x);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"},ee(x,e)),g.createElement("span",{className:"k-spacer"}),g.createElement(n.Button,{fillMode:"flat",themeColor:"base",svgIcon:l.xIcon,onClick:()=>T(null),"aria-label":H.toLanguageString(w,L[w])}))}return null}),[x,F,ee,T,H]),ne=g.useCallback((e=>{try{const t=Array.from(e.newState);K((e=>[...e,...t])),G()}catch{}}),[G]),le=g.useCallback((()=>{$.current&&!1!==M&&$.current.actionElement.click()}),[M]),se=g.useCallback((e=>{}),[]),oe=g.useCallback((e=>{const{isFinal:t,alternatives:a}=e;if(a.length>0){const e=a[0];t&&z((t=>(t?`${t} `:"")+e.transcript))}}),[]),re=g.useCallback((()=>g.createElement(g.Fragment,null,O.length>0&&Z(),x&&g.createElement("span",{className:"k-input-prefix k-input-prefix-horizontal"},ae()))),[O.length,x,Z,ae]),ie=g.useCallback((e=>{e.preventDefault()}),[]),ce=g.useCallback((e=>{"Escape"===e.key&&e.currentTarget.blur()}),[]),ue=g.useMemo((()=>g.createElement(n.Button,{rounded:"full",fillMode:"solid",themeColor:"primary",className:"k-chat-send",icon:"paper-plane",svgIcon:l.paperPlaneIcon,onClick:X,onMouseDown:ie,onKeyDown:ce,"aria-label":H.toLanguageString(h,L[h]),dir:r?"rtl":void 0,disabled:!Y,"aria-disabled":!Y,...y})),[X,ie,ce,H,r,Y,y]),me=g.useCallback((()=>{const e="object"==typeof S?S:void 0,t="object"==typeof M?M:{},{className:s,...o}=t,r=a.classNames("k-hidden",s),u=!1!==M,m=!1!==S;return g.createElement(c.InputSuffix,null,m&&g.createElement(n.SpeechToTextButton,{fillMode:"clear",themeColor:"base",onError:se,onResult:oe,...e}),u&&g.createElement(g.Fragment,null,g.createElement(n.Button,{key:"attach-file",fillMode:"clear",themeColor:"base",svgIcon:l.paperclipIcon,onClick:le,"aria-label":H.toLanguageString(N,L[N])}),g.createElement(i.Upload,{ref:$,files:O,onAdd:ne,multiple:!0,autoUpload:!1,...o,className:r})),g.createElement("span",{className:"k-spacer"}),ue)}),[S,M,O,se,oe,le,ne,H,ue]),de=g.useMemo((()=>g.createElement(c.TextArea,{className:a.classNames("k-message-box","!k-flex-col",{"k-focus":R}),resizable:"none",rows:1,placeholder:u,value:D,onChange:_,onKeyDown:J,onClick:C,prefix:re,suffix:me,ref:j,"aria-label":H.toLanguageString(f,L[f])})),[R,u,D,_,J,C,re,me,H]);return g.createElement("div",{className:"k-message-box-wrapper"},d&&d.length>0&&g.createElement(te,{onSuggestionClick:p,suggestions:d,suggestionTemplate:b,suggestionsLayout:E,dir:I}),m?g.createElement(m,{messageInput:de,sendButton:ue}):de)}));ae.displayName="NewMessage";const ne=e=>g.createElement(o.AppBar,{className:"k-chat-header",positionMode:"sticky",themeColor:"inherit"},e.children),le=e=>{const{message:t,onUnpin:o,user:r}=e,i=s.useLocalization(),{internalScrollContainerRef:c}=U(),u=g.useCallback((e=>{e.preventDefault(),e.stopPropagation();const a=null==c?void 0:c.current;z(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(B(r,t),i):null==t?void 0:t.text),g.createElement("span",{className:"k-spacer"}),g.createElement(n.Button,{fillMode:"flat",svgIcon:l.xIcon,onClick:e=>{e.stopPropagation(),null==o||o(t)}}))},se=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))))},oe=Object.freeze({name:"@progress/kendo-react-conversational-ui",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:0,version:"13.2.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"}),re={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"},ie=(e,t={})=>{const a={...re,...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,dataItem:e}},ce=(e,t={})=>Array.isArray(e)?e.map((e=>ie(e,t))):[],ue=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),me=({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}),[]),f=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]),k=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}=f(e);l&&s()&&k(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,f,k,e])},de=["allowMessageCollapse","messageWidthMode","showAvatar","showUsername","messageTemplate","messageContentTemplate","messageToolbarActions","messageContextMenuActions","fileActions"];function pe(e,t,a,n,l){const s=((e,t)=>{var a,n;return(null==(a=null==e?void 0:e.author)?void 0:a.id)===t||(null==(n=null==e?void 0:e.author)?void 0:n.id)===String(t)})(e,t)?n:l,o={};return de.forEach((e=>{var t;o[e]=null!=(t=null==s?void 0:s[e])?t:null==a?void 0:a[e]})),o}const ge=g.forwardRef(((e,t)=>{const{messages:n=[],messageTemplate:l,messageContentTemplate:o,attachmentTemplate:r,width:i,height:c,onSendMessage:u,onSuggestionClick:m,onInputValueChange:d,onActionExecute:p,dir:h,messageBox:f,placeholder:k,className:b,style:y,message:C=W,authorId:E,suggestions:x,suggestionTemplate:w,suggestionsLayout:T="scroll",quickActionsLayout:F="scroll",inputValue:A,headerTemplate:S,noDataTemplate:N,timestampTemplate:M,statusTemplate:R,userStatusTemplate:D,allowMessageCollapse:B,messageToolbarActions:P,messageContextMenuActions:z,fileActions:O,onUnpin:K,messageWidthMode:U,showAvatar:V,showUsername:j,timestampVisibility:H,authorMessageSettings:G,receiverMessageSettings:_,onToolbarAction:Y,onContextMenuAction:J,onFileAction:te,onDownload:re,speechToTextConfig:ie,uploadConfig:de,sendButtonConfig:ge,messageFilesLayout:he,textField:fe,statusField:ke,authorIdField:ve,authorNameField:be,authorImageUrlField:ye,authorImageAltTextField:Ce,idField:Ee,timestampField:Ie,filesField:xe,attachmentsField:we,replyToIdField:Te,isDeletedField:Fe,isPinnedField:Ae,typingField:Se,suggestedActionsField:Ne,...Me}=e,[Re,De]=g.useState(null),[Le,Be]=g.useState(!1),[Pe,ze]=g.useState(!1),[Oe,Ke]=g.useState(null),[qe,Ue]=g.useState(null),Ve=g.useRef(null),We=g.useRef(null),je=g.useRef(null),$e=g.useRef(null),He=g.useRef(void 0),Ge=g.useRef(!1),_e=g.useRef(null),Ye=g.useRef(""),Xe=g.useMemo((()=>{if(!n||0===n.length)return[];const e={textField:fe,statusField:ke,authorIdField:ve,authorNameField:be,authorImageUrlField:ye,authorImageAltTextField:Ce,idField:Ee,timestampField:Ie,filesField:xe,attachmentsField:we,replyToIdField:Te,isDeletedField:Fe,isPinnedField:Ae,typingField:Se,suggestedActionsField:Ne};return!Object.values(e).some((e=>void 0!==e))&&ue(n[0])?n.map((e=>({...e,timestamp:e.timestamp?new Date(e.timestamp):e.timestamp}))):ce(n,e)}),[n,fe,ke,ve,be,ye,Ce,Ee,Ie,xe,we,Te,Fe,Ae,Se,Ne]);g.useEffect((()=>{if(E===Ye.current&&_e.current)Ue(_e.current);else if(E&&Xe.length>0){const e=Xe.find((e=>e.author&&(e.author.id===E||e.author.id===String(E)))),t=(null==e?void 0:e.author)||{id:E};_e.current=t,Ye.current=E,Ue(t)}}),[E,Xe]);const Je=g.useMemo((()=>Xe.length>0?(e=>{const t=e.slice().reduce($(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})(Xe):[]),[Xe]),Qe=g.useMemo((()=>!a.validatePackage(oe,{component:"Chat"})),[]),Ze=a.getLicenseMessage(oe),et=g.useMemo((()=>Xe.find((e=>e.isPinned))),[Xe]),tt=s.useLocalization();me({viewItemsWrapperRef:je,isKeyboardNavigationActiveRef:Ge,processedMessages:Xe,suggestions:x});const at=g.useCallback((()=>{clearTimeout(He.current)}),[]),nt=g.useCallback((()=>{He.current=window.setTimeout((()=>{De(null)}),0)}),[]),lt=g.useCallback((e=>{De(e)}),[]),st=g.useCallback((e=>{let t=null;const n=null!==Re?Re:Je.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<Je.lastSelectionIndex&&(t=n+1):e.keyCode===a.Keys.home?t=0:e.keyCode===a.Keys.end&&(t=Je.lastSelectionIndex),null!==t&&(De(t),Ge.current=!0,e.preventDefault())}),[Re,Je]),ot=g.useCallback(((e,t,a)=>{var n;if(p&&p({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":u&&u({message:{id:"",author:qe,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=$e.current)||n.focusInput()}}),[p,u,qe]),rt=g.useCallback((()=>a.classNames("k-chat",b,{"k-rtl":Le})),[b,Le]),it=g.useCallback((()=>{const e=Je.length-1;return Je.map(((t,a)=>{var n;if("date-marker"===t.type)return g.createElement(Z,{item:t,key:t.trackBy,timestampTemplate:M});if("message-group"===t.type){const s={allowMessageCollapse:B,messageWidthMode:U,showAvatar:V,showUsername:j,messageTemplate:l,messageContentTemplate:o,messageToolbarActions:P,messageContextMenuActions:z,fileActions:O},i=pe(null==(n=null==t?void 0:t.messages)?void 0:n[0],E,s,G,_);return g.createElement(ee,{group:t,itemTemplate:i.messageTemplate,contentTemplate:i.messageContentTemplate,attachmentTemplate:r,user:qe,selectedItemIndex:Re,onRequestSelection:lt,isLastGroup:a===e,key:t.messages[0].selectionIndex,message:C,allowMessageCollapse:i.allowMessageCollapse,messageToolbarActions:i.messageToolbarActions,messageContextMenuActions:i.messageContextMenuActions,fileActions:i.fileActions,messageWidthMode:i.messageWidthMode,showAvatar:i.showAvatar,showUsername:i.showUsername})}return"attachment-group"===t.type?g.createElement(Q,{group:t,itemTemplate:r,onRequestSelection:lt,selected:t.selectionIndex===Re,isLastGroup:a===e,key:t.selectionIndex}):"action-group"===t.type?g.createElement(X,{group:t,onActionExecute:ot,onRequestSelection:lt,selected:t.selectionIndex===Re,key:t.selectionIndex,quickActionsLayout:F,dir:h}):null}))}),[Je,M,l,o,r,qe,Re,lt,C,B,P,z,O,U,V,j,E,G,_,ot,F,h]),ct=g.useCallback((()=>S?"function"==typeof S?S():S:null),[S]),ut=g.useCallback((()=>N?"function"==typeof N?N():N:null),[N]);g.useEffect((()=>{const e=void 0!==h?"rtl"===h:Ve.current&&"rtl"===getComputedStyle(Ve.current).direction;Be(!!e)}),[h]),g.useEffect((()=>()=>{clearTimeout(He.current)}),[]);const mt=g.useMemo((()=>({replyToMessage:Oe,setReplyToMessage:Ke,messages:Xe,user:qe,internalScrollContainerRef:We,messageListScrollContainerRef:je,onToolbarAction:Y,onContextMenuAction:J,onFileAction:te,setShowCopyNotification:ze,onDownload:re,fileActions:O,speechToTextConfig:ie,uploadConfig:de,statusTemplate:R,userStatusTemplate:D,messageFilesLayout:he,timestampVisibility:H})),[Oe,Ke,Xe,qe,Y,J,te,ze,re,O,ie,de,R,D,he,H]);return g.createElement(q.Provider,{value:mt},g.createElement("div",{style:{width:i,height:c,position:"relative",overflow:"hidden",...y},onKeyDown:st,className:rt(),ref:e=>{Ve.current=e,We.current=e,"function"==typeof t?t(e):t&&(t.current=e)},...Me},void 0!==S&&g.createElement(ne,null,ct()),et&&g.createElement(le,{message:et,onUnpin:K,user:qe}),g.createElement("div",{className:"k-message-list",onBlur:nt,onFocus:at,role:"log","aria-label":tt.toLanguageString(v,L[v]),"aria-live":"polite",ref:je},g.createElement("div",{className:a.classNames("k-message-list-content",{"k-message-list-content-empty":0===Xe.length})},0===Xe.length&&void 0!==N&&ut(),Xe.length>0&&it())),g.createElement(ae,{onSendMessage:(e,t)=>{u&&u({message:e,syntheticEvent:t,nativeEvent:t.nativeEvent,target:t.currentTarget})},onSuggestionClick:e=>{m&&m(e)},isDirectionRightToLeft:Le,ref:$e,placeholder:k,MessageBox:f,suggestions:x,suggestionTemplate:w,inputValue:A,onInputValueChange:e=>{d&&d(e)},onInputClick:()=>{Ge.current=!1},sendButtonConfig:ge,suggestionsLayout:T,dir:h}),g.createElement(se,{show:Pe,text:tt.toLanguageString(I,L[I])}),Qe&&g.createElement(a.WatermarkOverlay,{message:Ze})))}));ge.displayName="Chat",ge.propTypes={messages:r.arrayOf(r.object),user:r.object,messageTemplate:r.any,messageContentTemplate:r.any,attachmentTemplate:r.any,width:r.oneOfType([r.string,r.number]),style:r.object,onSendMessage:r.func,onActionExecute:r.func,dir:r.string,messageBox:r.any,noDataTemplate:r.oneOfType([r.element,r.func]),suggestionsLayout:r.oneOf(["scroll","wrap","scrollbuttons"]),quickActionsLayout:r.oneOf(["scroll","wrap","scrollbuttons"]),userStatusTemplate:r.elementType,messageFilesLayout:r.oneOf(["vertical","wrap","horizontal"]),showAvatar:r.bool,showUsername:r.bool,authorMessageSettings:r.object,receiverMessageSettings:r.object};const he=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)))))},fe={name:"Output view",buttonText:"Output",buttonIcon:l.commentIcon},ke={name:"Commands view",buttonIcon:l.moreHorizontalIcon},ve={name:"Prompt view",buttonText:"Ask AI",buttonIcon:l.sparklesIcon},be=t.createContext([{},()=>{}]),ye=()=>t.useContext(be),Ce=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))},Ee=t.forwardRef(((e,a)=>{const{children:o,streaming:r,onCancel:i}=e,c=s.useLocalization().toLanguageString(y,L[y]),[u]=ye(),m=u.activeView===fe.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))}));Ee.displayName="KendoReactAIPromptContent";const Ie=e=>{const[t]=ye();return t.activeView===e.name?e.children:null},xe=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))},we=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&&we(e.children||[])))),Te=({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),Fe=({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,f]=t.useState(s||""),[k,v]=a.useCustomComponent(i),[b,y]=a.useCustomComponent(r),C={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:C,w=Object.keys(y).length>0?y: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})();f(t)}},F=()=>{h.trim()&&p&&p(h.trim())};return t.createElement(b,{value:h,onChange:e=>{const t=e.target.value;f(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(k,{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(oe,{component:"AIPrompt"}),l=a.getLicenseMessage(oe),{activeView:s,toolbarItems:o,children:r,onActiveViewChange:i,onPromptRequest:c,onCommandExecute:u,style:m,dir:d,className:p,streaming:g,loading:h,onCancel:f,suggestionsView:k,...v}=e,b=o||[ve,fe],[y,C]=t.useState({activeView:s}),E={...y,activeView:s,streaming:g,loading:h,suggestionsView:null!=k?k:"classic",onCancel:f,onActiveViewChange:i,onPromptRequest:c,onCommandExecute:u};return t.createElement(be.Provider,{value:[E,e=>{C(e)}]},t.createElement("div",{className:a.classNames("k-prompt",p),style:m,dir:d,...v},t.createElement(he,{activeView:E.activeView,toolbarItems:b,activeViewChange:i}),r,n&&t.createElement(a.WatermarkOverlay,{message:l})))},e.AIPromptCommandsView=e=>{const{commands:a}=e,[n]=ye();return t.createElement(Ie,{name:ke.name},t.createElement(Ee,{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:""},we(null!=a?a:[])))))},e.AIPromptContent=Ee,e.AIPromptFooter=Ce,e.AIPromptOutputView=e=>{const[a,r]=t.useState(""),i=t.useRef(null),[c]=ye(),{outputs:u,showOutputRating:m,outputCard:d}=e,{header:p,body:g,actions:h}=d||{},f=s.useLocalization(),k=(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"})},y=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%"}}))),C=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:()=>k(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:()=>k(e,"negative")}))))))),E=t.createElement(o.Card,null,t.createElement(o.CardBody,null,f.toLanguageString(b,L[b])));return t.createElement(Ie,{name:fe.name},t.createElement(Ee,{ref:i,streaming:c.streaming,onCancel:c.onCancel},t.createElement("div",{className:"k-card-list"},c.loading&&y,C,(!C||0===C.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]=ye(),[g,h]=a.useCustomComponent(o),[f,k]=a.useCustomComponent(s),v=t.useRef(null);t.useEffect((()=>{var e,t;null!=(t=null==(e=v.current)?void 0:e.element)&&t.current&&requestAnimationFrame((()=>{var e,t;if(null!=(t=null==(e=v.current)?void 0:e.element)&&t.current){const e=v.current.element.current;e.style.height="auto",e.style.height=`${e.scrollHeight}px`}}))}),[m]);const b={title:"Generate",children:"Generate",svgIcon:l.sparklesIcon},y=Object.keys(h).length>0?h:b,C=Object.keys(k).length>0?k:{placeholder:"Ask or generate content with AI ...",rows:2},E=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 I;return r&&(I="object"==typeof r?{...r,onResult:r.onResult||E}:{onResult:E}),t.createElement(Ie,{name:ve.name},t.createElement(Ee,{streaming:p.streaming,onCancel:p.onCancel},t.createElement(f,{ref:v,value:m,flow:"vertical",textareaStyle:{maxHeight:"110px"},autoSize:!0,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",...I}))):void 0,onChange:e=>{d(e.target.value)},...C}),u&&u.length>0&&t.createElement(xe,{title:"Prompt Suggestions"},t.createElement(te,{suggestionsView:p.suggestionsView,suggestions:u.map(((e,t)=>({id:t,text:e,description:e}))),onSuggestionClick:e=>{(e=>{d(e)})(e.text)}}))),t.createElement(Ce,null,t.createElement(g,{themeColor:"primary",fillMode:"solid",rounded:"full",size:"medium",onClick:()=>{p.onPromptRequest&&p.onPromptRequest.call(null,m),d("")},disabled:!m.trim(),...y},y.children)))},e.AIPromptViewRender=Ie,e.Chat=ge,e.ChatMessage=W,e.DEFAULT_FIELD_MAPPING=re,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(oe,{component:"InlineAIPrompt"}),r=a.getLicenseMessage(oe),{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:f,onDiscard:k,outputActions:v,onOutputAction:b,enableSpeechToText:y=!1,streaming:C,onPromptCancel:E,show:I=!1,anchor:x,width:w,height:T,onOpen:F,onClose:A,animate:S=!0,appendTo:N,commands:M,onCommandExecute:R,style:D,className:L,popupOptions:B={},...P}=e,[z,O]=t.useState(""),[K,q]=t.useState(!1),[U,V]=t.useState({left:0,top:0}),W=t.useRef(null),{body:j,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==f||f(e)})(t);break;case"discard":(e=>{null==k||k(e)})(t);break;default:null==b||b(e,t)}},_=t.useCallback((e=>{"Escape"===e.key&&(C&&E?E():!C&&A&&A({target:null}))}),[C,E,A]),Y={...D,...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",L),style:Y,onKeyDown:_,...P},t.createElement(Ee,{ref:W},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,j?j(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&&z===e.id?l.checkIcon:a.svgIcon,onClick:()=>G(a,e)},a.text)})))))))),t.createElement(Fe,{promptValue:g,placeholder:p,onPromptRequest:h,onMenuClick:e=>{if(!W.current)return;const t=W.current.getBoundingClientRect();V({left:t.left,top:t.bottom}),q(!0)},onPromptCancel:E,promptInput:m,generateButton:d,enableSpeechToText:y,streaming:C,commands:M}))),s&&t.createElement(a.WatermarkOverlay,{message:r}));return t.createElement(t.Fragment,null,t.createElement(Te,{show:I,anchor:x,onOpen:F,onClose:A,animate:S,appendTo:N,popupOptions:B,style:X},J),t.createElement(o.ContextMenu,{show:K,offset:U,onClose:()=>{q(!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=>{q(!1),R&&R(e)})(n)}}))},e.PromptHeader=he,e.SuggestionGroup=te,e.commandsViewDefaults=ke,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=ue,e.mapDataArrayToMessages=ce,e.mapDataToMessage=ie,e.mapMessageToCustomFormat=(e,t={})=>{const a={...re,...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=fe,e.promptViewDefaults=ve}));