@progress/kendo-react-conversational-ui/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 c=require("@progress/kendo-react-common"),p=require("react"),h=require("./ChatToolbar.js"),l=require("@progress/kendo-react-buttons"),u=require("@progress/kendo-svg-icons"),g=require("@progress/kendo-react-intl"),n=require("../messages/index.js");function m(a){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const s in a)if(s!=="default"){const o=Object.getOwnPropertyDescriptor(a,s);Object.defineProperty(e,s,o.get?o:{enumerable:!0,get:()=>a[s]})}}return e.default=a,Object.freeze(e)}const t=m(p);class f extends t.Component{constructor(){super(...arguments),this.state={focused:!1},this.inputEl=null,this.toolbarBtnRef=t.createRef(),this.onInputKeyDown=e=>{switch(e.key){case"Enter":return this.sendMessage(e);case"F10":return this.openToolbar(e);default:return}},this.sendMessage=e=>{if(this.props.onMessageSend&&this.inputEl!==null){const s=this.inputEl.value;if(s){const o={author:this.props.user,text:s,timestamp:new Date};this.props.onMessageSend(o,e)}}this.inputEl!==null&&(this.inputEl.value=null)},this.openToolbar=e=>{this.toolbarBtnRef.current!==null&&(e.preventDefault(),this.props.onToolbarActionButtonClick(!this.props.showToolbar,e))}}render(){const e=g.provideLocalizationService(this),s=t.createElement("input",{type:"text",className:this.getClassNames(),placeholder:this.props.placeholder,onKeyDown:this.onInputKeyDown,onFocus:()=>this.setState({focused:!0}),onBlur:()=>this.setState({focused:!1}),ref:r=>this.inputEl=r,"aria-label":e.toLanguageString(n.newMessageMessageInput,n.messages[n.newMessageMessageInput])}),o=t.createElement(l.Button,{fillMode:"flat",themeColor:"base",className:"k-chat-send",icon:"paper-plane",svgIcon:u.paperPlaneIcon,onClick:this.sendMessage,"aria-label":e.toLanguageString(n.newMessageSendButton,n.messages[n.newMessageSendButton]),dir:this.props.isDirectionRightToLeft?"rtl":void 0}),i=t.createElement(l.Button,{ref:this.toolbarBtnRef,fillMode:"flat",themeColor:"base",icon:"more-horizontal",svgIcon:u.moreHorizontalIcon,onClick:r=>this.props.onToolbarActionButtonClick(!this.props.showToolbar,r),"aria-label":e.toLanguageString(n.newMessageOptionsButton,n.messages[n.newMessageOptionsButton])});return t.createElement(t.Fragment,null,t.createElement("span",{className:"k-message-box k-textbox k-input k-input-md k-rounded-md k-input-solid"},this.props.MessageBox?t.createElement(this.props.MessageBox,{messageInput:s,sendButton:o,toolbarButton:i}):t.createElement(t.Fragment,null,s,t.createElement("span",{className:"k-input-separator k-input-separator-vertical"}),t.createElement("span",{className:"k-input-suffix k-input-suffix-horizontal"},this.props.toolbar&&i,o))),this.props.showToolbar&&t.createElement(h.ChatToolbar,null,this.props.toolbar))}focusInput(){this.inputEl!==null&&this.inputEl.focus()}getClassNames(){return c.classNames("k-input-inner",{"k-focus":this.state.focused})}}module.exports=f;