Add onchange event

dev/App.js

@@ -10,13 +10,19 @@ export default class App extends Component {
     addResponseMessage(newMessage);
   }
 
+  handleOnChangeMessage = (event) => {
+    event.preventDefault();
+    console.log(event.target.value);
+  }
+
   render() {
     return (
       <Widget
         title="Bienvenido"
         subtitle="Asistente virtual"
         senderPlaceHolder="Escribe aquí ..."
         handleNewUserMessage={this.handleNewUserMessage}
+        handleOnChangeMessage={this.handleOnChangeMessage}
         badge={1}
       />
     );

src/components/Widget/components/Conversation/components/Sender/index.js

@@ -5,16 +5,17 @@ import send from '@assets/send_button.svg';
 
 import './style.scss';
 
-const Sender = ({ sendMessage, placeholder, disabledInput, autofocus }) =>
+const Sender = ({ sendMessage, placeholder, disabledInput, autofocus, handleOnChangeMessage }) =>
   <form className="rcw-sender" onSubmit={sendMessage}>
-    <input type="text" className="rcw-new-message" name="message" placeholder={placeholder} disabled={disabledInput} autoFocus={autofocus} autoComplete="off" />
+    <input onChange={handleOnChangeMessage} type="text" className="rcw-new-message" name="message" placeholder={placeholder} disabled={disabledInput} autoFocus={autofocus} autoComplete="off" />
     <button type="submit" className="rcw-send">
       <img src={send} className="rcw-send-icon" alt="send" />
     </button>
   </form>;
 
 Sender.propTypes = {
   sendMessage: PropTypes.func,
+  handleOnChangeMessage: PropTypes.func,
   placeholder: PropTypes.string,
   disabledInput: PropTypes.bool,
   autofocus: PropTypes.bool

src/components/Widget/components/Conversation/index.js

@@ -19,6 +19,7 @@ const Conversation = props =>
       profileAvatar={props.profileAvatar}
     />
     <Sender
+      handleOnChangeMessage={props.handleOnChangeMessage}
       sendMessage={props.sendMessage}
       placeholder={props.senderPlaceHolder}
       disabledInput={props.disabledInput}
@@ -36,7 +37,8 @@ Conversation.propTypes = {
   toggleChat: PropTypes.func,
   showCloseButton: PropTypes.bool,
   disabledInput: PropTypes.bool,
-  autofocus: PropTypes.bool
+  autofocus: PropTypes.bool,
+  handleOnChangeMessage: PropTypes.func,
 };
 
 export default Conversation;

src/components/Widget/index.js

@@ -43,6 +43,7 @@ class Widget extends Component {
         badge={this.props.badge}
         autofocus={this.props.autofocus}
         customLauncher={this.props.customLauncher}
+        handleOnChangeMessage={this.props.handleOnChangeMessage}
       />
     );
   }
@@ -59,7 +60,8 @@ Widget.propTypes = {
   fullScreenMode: PropTypes.bool,
   badge: PropTypes.number,
   autofocus: PropTypes.bool,
-  customLauncher: PropTypes.func
+  customLauncher: PropTypes.func,
+  handleOnChangeMessage: PropTypes.func
 };
 
 export default connect()(Widget);

src/components/Widget/layout.js

@@ -25,6 +25,7 @@ const WidgetLayout = props => (
         disabledInput={props.disabledInput}
         autofocus={props.autofocus}
         titleAvatar={props.titleAvatar}
+        handleOnChangeMessage={props.handleOnChangeMessage}
       />
     }
     {props.customLauncher ?
@@ -52,7 +53,8 @@ WidgetLayout.propTypes = {
   fullScreenMode: PropTypes.bool,
   badge: PropTypes.number,
   autofocus: PropTypes.bool,
-  customLauncher: PropTypes.func
+  customLauncher: PropTypes.func,
+  handleOnChangeMessage: PropTypes.func,
 };
 
 export default connect(store => ({

src/index.js

@@ -19,6 +19,7 @@ const ConnectedWidget = props =>
       badge={props.badge}
       autofocus={props.autofocus}
       customLauncher={props.launcher}
+      handleOnChangeMessage={props.handleOnChangeMessage}
     />
   </Provider>;
 
@@ -33,7 +34,8 @@ ConnectedWidget.propTypes = {
   fullScreenMode: PropTypes.bool,
   badge: PropTypes.number,
   autofocus: PropTypes.bool,
-  launcher: PropTypes.func
+  launcher: PropTypes.func,
+  handleOnChangeMessage: PropTypes.func,
 };
 
 ConnectedWidget.defaultProps = {