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