Developer

.gitignore

@@ -6,8 +6,5 @@ yarn-error.log
 # OSX
 .DS_Store
 
-# Build files
-lib
-
 # Test files
 coverage

dev/App.tsx

@@ -39,7 +39,7 @@ export default class App extends Component {
   render() {
     return (
       <div>
-        <button style={{position: 'absolute', right: 40, bottom: 150}}>test</button>
+        {/* <button style={{position: 'absolute', right: 40, bottom: 150}}>test</button> */}
         <Widget
           title="Bienvenido"
           subtitle="Asistente virtual"

package.json

@@ -1,10 +1,10 @@
 {
-  "name": "react-chat-widget",
-  "version": "3.0.5",
+  "name": "react-chat-widget-with-mic",
+  "version": "0.0.2",
   "description": "Chat web widget for React apps",
   "main": "lib/index.js",
-  "repository": "[email protected]:Wolox/react-chat-widget.git",
-  "author": "Martín Callegari <[email protected]>",
+  "repository": "[email protected]:Vexole/react-chat-widget.git",
+  "author": "",
   "license": "MIT",
   "types": "./lib/index.d.ts",
   "scripts": {

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

@@ -4,6 +4,8 @@ import { useSelector } from 'react-redux';
 import { GlobalState } from 'src/store/types';
 
 const send = require('../../../../../../../assets/send_button.svg') as string;
+const micBlack = require('../../../../../../../assets/mic.svg') as string;
+const micRed = require('../../../../../../../assets/mic-red.svg') as string;
 
 import './style.scss';
 
@@ -14,16 +16,33 @@ type Props = {
   sendMessage: (event: any) => void;
   buttonAlt: string;
   onTextInputChange?: (event: any) => void;
+  isRecording: boolean;
+  handleStream: () => void;
+  inputMessage: string;
 }
 
-function Sender({ sendMessage, placeholder, disabledInput, autofocus, onTextInputChange, buttonAlt }: Props) {
+function Sender({ isRecording, handleStream, sendMessage, placeholder, disabledInput, autofocus, inputMessage, onTextInputChange, buttonAlt }: Props) {
   const showChat = useSelector((state: GlobalState) => state.behavior.showChat);
   const inputRef = useRef(null);
+  let mic = isRecording ? micRed : micBlack;
   // @ts-ignore
   useEffect(() => { if (showChat) inputRef.current?.focus(); }, [showChat]);
+  const [message, setMessage] = useState(inputMessage);
+  useEffect(() => {
+    mic = isRecording ? micRed : micBlack;
+  }, [isRecording])
+
+  useEffect(() => {
+    setMessage(inputMessage)
+  }, [inputMessage])
+
+  const handleSubmission = e => {
+    sendMessage(e)
+    setMessage('')
+  }
 
   return (
-    <form className="rcw-sender" onSubmit={sendMessage}>
+    <form className="rcw-sender" onSubmit={handleSubmission}>
       <input
         type="text"
         className="rcw-new-message"
@@ -33,8 +52,12 @@ function Sender({ sendMessage, placeholder, disabledInput, autofocus, onTextInpu
         disabled={disabledInput}
         autoFocus={autofocus}
         autoComplete="off"
-        onChange={onTextInputChange}
+        defaultValue={message}
+        onChange={e => setMessage(e.target.value)}
       />
+      <button type="button" className="rcw-send" onClick={handleStream}>
+        <img src={mic} className="rcw-send-icon" alt={buttonAlt} />
+      </button>
       <button type="submit" className="rcw-send">
         <img src={send} className="rcw-send-icon" alt={buttonAlt} />
       </button>

src/components/Widget/components/Conversation/index.tsx

@@ -26,6 +26,9 @@ type Props = {
   onTextInputChange?: (event: any) => void;
   sendButtonAlt: string;
   showTimeStamp: boolean;
+  isRecording: boolean;
+  handleStream: AnyFunction;
+  inputMessage: string;
 };
 
 function Conversation({
@@ -43,7 +46,10 @@ function Conversation({
   onQuickButtonClicked,
   onTextInputChange,
   sendButtonAlt,
-  showTimeStamp
+  showTimeStamp,
+  isRecording,
+  handleStream,
+  inputMessage
 }: Props) {
   return (
     <div className={cn('rcw-conversation-container', className)} aria-live="polite">
@@ -57,12 +63,15 @@ function Conversation({
       <Messages profileAvatar={profileAvatar} showTimeStamp={showTimeStamp} />
       <QuickButtons onQuickButtonClicked={onQuickButtonClicked} />
       <Sender
+        handleStream={handleStream}
+        isRecording={isRecording}
         sendMessage={sendMessage}
         placeholder={senderPlaceHolder}
         disabledInput={disabledInput}
         autofocus={autofocus}
         onTextInputChange={onTextInputChange}
         buttonAlt={sendButtonAlt}
+        inputMessage={inputMessage}
       />
     </div>
   );

src/components/Widget/index.tsx

@@ -27,6 +27,9 @@ type Props = {
   imagePreview?: boolean;
   zoomStep?: number;
   handleSubmit?: AnyFunction;
+  handleStream: AnyFunction;
+  isRecording: boolean;
+  inputMessage: string;
 }
 
 function Widget({
@@ -49,7 +52,10 @@ function Widget({
   showTimeStamp,
   imagePreview,
   zoomStep,
-  handleSubmit
+  handleSubmit,
+  handleStream,
+  isRecording,
+  inputMessage
 }: Props) {
   const dispatch = useDispatch();
 
@@ -60,9 +66,9 @@ function Widget({
   const handleMessageSubmit = (event) => {
     event.preventDefault();
     const userInput = event.target.message.value;
-    
-    if (!userInput.trim()) {      
-      return;      
+
+    if (!userInput.trim()) {
+      return;
     }
 
     handleSubmit?.(userInput);
@@ -98,6 +104,9 @@ function Widget({
       showTimeStamp={showTimeStamp}
       imagePreview={imagePreview}
       zoomStep={zoomStep}
+      handleStream={handleStream}
+      isRecording={isRecording}
+      inputMessage={inputMessage}
     />
   );
 }

src/components/Widget/layout.tsx

@@ -1,4 +1,4 @@
-import React,{ useEffect, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import cn from 'classnames';
 
@@ -33,6 +33,9 @@ type Props = {
   showTimeStamp: boolean;
   imagePreview?: boolean;
   zoomStep?: number;
+  handleStream: AnyFunction;
+  isRecording: boolean;
+  inputMessage: string;
 }
 
 function WidgetLayout({
@@ -55,7 +58,10 @@ function WidgetLayout({
   sendButtonAlt,
   showTimeStamp,
   imagePreview,
+  handleStream,
+  isRecording,
   zoomStep,
+  inputMessage,
 }: Props) {
   const dispatch = useDispatch();
   const { dissableInput, showChat, visible } = useSelector((state: GlobalState) => ({
@@ -67,16 +73,16 @@ function WidgetLayout({
   const messageRef = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
-    if(showChat) {
+    if (showChat) {
       messageRef.current = document.getElementById('messages') as HTMLDivElement;
     }
     return () => {
       messageRef.current = null;
     }
   }, [showChat])
-  
+
   const eventHandle = evt => {
-    if(evt.target && evt.target.className === 'rcw-message-img') {
+    if (evt.target && evt.target.className === 'rcw-message-img') {
       const { src, alt, naturalWidth, naturalHeight } = (evt.target as HTMLImageElement);
       const obj = {
         src: src,
@@ -93,7 +99,7 @@ function WidgetLayout({
    */
   useEffect(() => {
     const target = messageRef?.current;
-    if(imagePreview && showChat) {
+    if (imagePreview && showChat) {
       target?.addEventListener('click', eventHandle, false);
     }
 
@@ -111,11 +117,12 @@ function WidgetLayout({
       className={cn('rcw-widget-container', {
         'rcw-full-screen': fullScreenMode,
         'rcw-previewer': imagePreview
-        })
+      })
       }
     >
       {showChat &&
         <Conversation
+          inputMessage={inputMessage}
           title={title}
           subtitle={subtitle}
           sendMessage={onSendMessage}
@@ -131,6 +138,8 @@ function WidgetLayout({
           onTextInputChange={onTextInputChange}
           sendButtonAlt={sendButtonAlt}
           showTimeStamp={showTimeStamp}
+          handleStream={handleStream}
+          isRecording={isRecording}
         />
       }
       {customLauncher ?

src/index.tsx

@@ -3,7 +3,7 @@ import { Provider } from 'react-redux';
 
 import Widget from './components/Widget';
 
-import store from  './store';
+import store from './store';
 
 import { AnyFunction } from './utils/types';
 
@@ -28,6 +28,9 @@ type Props = {
   imagePreview?: boolean;
   zoomStep?: number;
   handleSubmit?: AnyFunction;
+  handleStream: AnyFunction;
+  isRecording: boolean;
+  inputMessage: string;
 } & typeof defaultProps;
 
 function ConnectedWidget({
@@ -50,7 +53,10 @@ function ConnectedWidget({
   showTimeStamp,
   imagePreview,
   zoomStep,
-  handleSubmit
+  handleSubmit,
+  handleStream,
+  isRecording,
+  inputMessage
 }: Props) {
   return (
     <Provider store={store}>
@@ -75,6 +81,9 @@ function ConnectedWidget({
         imagePreview={imagePreview}
         zoomStep={zoomStep}
         handleSubmit={handleSubmit}
+        handleStream={handleStream}
+        isRecording={isRecording}
+        inputMessage={inputMessage}
       />
     </Provider>
   );