@progress/kendo-react-conversational-ui/chat/components/NewMessage.js

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

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
"use strict";const D=require("@progress/kendo-react-common"),re=require("react"),T=require("@progress/kendo-react-buttons"),ce=require("@progress/kendo-react-upload"),ue=require("./SuggestionsGroup.js"),se=require("@progress/kendo-react-inputs"),F=require("@progress/kendo-svg-icons"),ie=require("./ChatContext.js"),ge=require("@progress/kendo-react-intl"),ne=require("../utils.js"),n=require("../../messages/index.js"),fe=require("./elements/FileBox.js");function pe(f){const d=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(f){for(const i in f)if(i!=="default"){const k=Object.getOwnPropertyDescriptor(f,i);Object.defineProperty(d,i,k.get?k:{enumerable:!0,get:()=>f[i]})}}return d.default=f,Object.freeze(d)}const e=pe(re),ae=e.forwardRef((f,d)=>{const{onSendMessage:i,isDirectionRightToLeft:k,placeholder:q,MessageBox:z,suggestions:I,onSuggestionClick:oe,inputValue:C,onInputValueChange:m,suggestionTemplate:le,sendButtonConfig:j,onInputClick:L}=f,{replyToMessage:a,setReplyToMessage:S,user:x,messageListScrollContainerRef:p,speechToTextConfig:E,uploadConfig:R}=ie.useChatContext(),[P]=e.useState(!1),[o,y]=e.useState(void 0),[l,B]=e.useState([]),[K,O]=e.useState(!1),b=e.useRef(null),N=e.useRef(null),r=ge.useLocalization(),g=e.useCallback(()=>{b.current!==null&&b.current.focus()},[]);e.useEffect(()=>{C!==void 0&&C!==o&&(y(C),g())},[C,o,g]),e.useEffect(()=>{a&&g()},[a,g]),e.useLayoutEffect(()=>{K&&(p!=null&&p.current)&&(p.current.scrollTop=p.current.scrollHeight-p.current.clientHeight,O(!1))},[K,p]);const A=e.useCallback(t=>{const s=t.value;y(s),m&&m(s)},[m]),h=e.useMemo(()=>!!(o!=null&&o.trim()||l.length>0),[o,l.length]),M=e.useCallback(t=>{if(t.preventDefault(),i){const s=o;if(h){const c={id:"",author:x,text:s||"",timestamp:new Date,replyToId:a?a.id:void 0,files:l.map(u=>({name:u.name,size:u.size,type:u.extension,rawFile:u.getRawFile?u.getRawFile():u}))};S(null),i(c,t),B([]),y(""),m&&m(""),O(!0)}}},[i,o,x,a,l,S,m,h]),U=e.useCallback(t=>{if(!(t.key==="Enter"&&t.shiftKey))switch(t.key){case"Enter":return t.preventDefault(),M(t);case"Escape":b.current&&b.current.blur();break;default:return}},[M]);e.useImperativeHandle(d,()=>({focusInput:g}),[g]);const H=e.useCallback(t=>{B(s=>s.filter(c=>c.name!==t))},[]),V=e.useCallback(()=>e.createElement(fe,{files:l,onFileRemove:H,renderInTextarea:!0}),[l,H]),_=e.useCallback((t,s)=>t.isDeleted?ne.getDeletedMessageText(s,r):t.text,[r]),G=e.useCallback(()=>{if(a){const t=ne.isAuthor(x,a);return e.createElement("div",{className:D.classNames("k-message-reference",t?"k-message-reference-sender":"k-message-reference-receiver")},e.createElement("div",{className:"k-message-reference-content"},_(a,t)),e.createElement("span",{className:"k-spacer"}),e.createElement(T.Button,{fillMode:"flat",themeColor:"base",svgIcon:F.xIcon,onClick:()=>S(null),"aria-label":r.toLanguageString(n.closeReply,n.messages[n.closeReply])}))}return null},[a,x,_,S,r]),$=e.useCallback(t=>{try{const s=Array.from(t.newState);B(c=>[...c,...s]),g()}catch{}},[g]),J=e.useCallback(()=>{N.current&&N.current.actionElement.click()},[]),Q=e.useCallback(t=>{},[]),W=e.useCallback(t=>{const{isFinal:s,alternatives:c}=t;if(c.length>0){const u=c[0];s&&y(w=>(w?`${w} `:"")+u.transcript)}},[]),X=e.useCallback(()=>e.createElement(e.Fragment,null,l.length>0&&V(),a&&e.createElement("span",{className:"k-input-prefix k-input-prefix-horizontal"},G())),[l.length,a,V,G]),Y=e.useCallback(t=>{t.preventDefault()},[]),Z=e.useCallback(t=>{t.key==="Escape"&&t.currentTarget.blur()},[]),v=e.useMemo(()=>e.createElement(T.Button,{rounded:"full",fillMode:"solid",themeColor:"primary",className:"k-chat-send",icon:"paper-plane",svgIcon:F.paperPlaneIcon,onClick:M,onMouseDown:Y,onKeyDown:Z,"aria-label":r.toLanguageString(n.newMessageSendButton,n.messages[n.newMessageSendButton]),dir:k?"rtl":void 0,disabled:!h,"aria-disabled":!h,...j}),[M,Y,Z,r,k,h,j]),ee=e.useCallback(()=>{const t=typeof E=="object"?E:void 0,s=typeof R=="object"?R:{},{className:c,...u}=s,w=D.classNames("k-hidden",c);return e.createElement(se.InputSuffix,null,E!==!1&&e.createElement(T.SpeechToTextButton,{fillMode:"clear",themeColor:"base",onError:Q,onResult:W,...t}),e.createElement(T.Button,{key:"attach-file",fillMode:"clear",themeColor:"base",svgIcon:F.paperclipIcon,onClick:J,"aria-label":r.toLanguageString(n.attachFile,n.messages[n.attachFile])}),e.createElement(ce.Upload,{ref:N,files:l,onAdd:$,multiple:!0,autoUpload:!1,...u,className:w}),e.createElement("span",{className:"k-spacer"}),v)},[E,R,l,Q,W,J,$,r,v]),te=e.useMemo(()=>e.createElement(se.TextArea,{className:D.classNames("k-message-box","!k-flex-col",{"k-focus":P}),resizable:"none",rows:1,placeholder:q,value:o,onChange:A,onKeyDown:U,onClick:L,prefix:X,suffix:ee,ref:b,"aria-label":r.toLanguageString(n.newMessageMessageInput,n.messages[n.newMessageMessageInput])}),[P,q,o,A,U,L,X,ee,r]);return e.createElement("div",{className:"k-message-box-wrapper"},I&&I.length>0&&e.createElement(ue.SuggestionGroup,{onSuggestionClick:oe,suggestions:I,suggestionTemplate:le}),z?e.createElement(z,{messageInput:te,sendButton:v}):te)});ae.displayName="NewMessage";module.exports=ae;