adds extra control

Author: digitalWestie

dist/react-simple-chatbot.js

@@ -72,7 +72,12 @@ class ChatBot extends Component {
     const chatSteps = {};
 
     const defaultBotSettings = { delay: botDelay, avatar: botAvatar };
-    const defaultUserSettings = { delay: userDelay, avatar: userAvatar, hideInput: false };
+    const defaultUserSettings = {
+      delay: userDelay,
+      avatar: userAvatar,
+      hideInput: false,
+      hideExtraControl: false
+    };
     const defaultCustomSettings = { delay: customDelay };
 
     for (let i = 0, len = steps.length; i < len; i += 1) {
@@ -246,6 +251,9 @@ class ChatBot extends Component {
     if (data && data.hideInput) {
       currentStep.hideInput = data.hideInput;
     }
+    if (data && data.hideExtraControl) {
+      currentStep.hideExtraControl = data.hideExtraControl;
+    }
     if (data && data.trigger) {
       currentStep.trigger = this.getTriggeredStep(data.trigger, data.value);
     }
@@ -593,6 +601,7 @@ class ChatBot extends Component {
     const {
       className,
       contentStyle,
+      extraControl,
       floating,
       floatingIcon,
       floatingStyle,
@@ -681,18 +690,21 @@ class ChatBot extends Component {
                 {...inputAttributesOverride}
               />
             )}
-            {!currentStep.hideInput && !hideSubmitButton && (
-              <SubmitButton
-                className="rsc-submit-button"
-                style={submitButtonStyle}
-                onClick={this.handleSubmitButton}
-                invalid={inputInvalid}
-                disabled={disabled}
-                speaking={speaking}
-              >
-                {icon}
-              </SubmitButton>
-            )}
+            <div className="rsc-controls">
+              {!currentStep.hideInput && !currentStep.hideExtraControl && extraControl}
+              {!currentStep.hideInput && !hideSubmitButton && (
+                <SubmitButton
+                  className="rsc-submit-button"
+                  style={submitButtonStyle}
+                  onClick={this.handleSubmitButton}
+                  invalid={inputInvalid}
+                  disabled={disabled}
+                  speaking={speaking}
+                >
+                  {icon}
+                </SubmitButton>
+              )}
+            </div>
           </Footer>
         </ChatBotContainer>
       </div>
@@ -714,6 +726,7 @@ ChatBot.propTypes = {
   customStyle: PropTypes.objectOf(PropTypes.any),
   enableMobileAutoFocus: PropTypes.bool,
   enableSmoothScroll: PropTypes.bool,
+  extraControl: PropTypes.objectOf(PropTypes.element),
   floating: PropTypes.bool,
   floatingIcon: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
   floatingStyle: PropTypes.objectOf(PropTypes.any),
@@ -763,6 +776,7 @@ ChatBot.defaultProps = {
   customDelay: 1000,
   enableMobileAutoFocus: false,
   enableSmoothScroll: false,
+  extraControl: undefined,
   floating: false,
   floatingIcon: <ChatIcon />,
   floatingStyle: {},

dist/react-simple-chatbot.js.map

@@ -54,6 +54,11 @@ export default [
     types: ['boolean'],
     required: false
   },
+  {
+    key: 'hideExtraControl',
+    types: ['boolean'],
+    required: false
+  },
   {
     key: 'inputAttributes',
     types: ['object'],

lib/ChatBot.jsx

@@ -24,6 +24,11 @@ export default [
     types: ['boolean'],
     required: false
   },
+  {
+    key: 'hideExtraControl',
+    types: ['boolean'],
+    required: false
+  },
   {
     key: 'inputAttributes',
     types: ['object'],

lib/schemas/customSchema.js

@@ -39,6 +39,11 @@ export default [
     types: ['boolean'],
     required: false
   },
+  {
+    key: 'hideExtraControl',
+    types: ['boolean'],
+    required: false
+  },
   {
     key: 'inputAttributes',
     types: ['object'],

lib/schemas/optionsSchema.js

@@ -9,6 +9,11 @@ export default [
     types: ['boolean'],
     required: true
   },
+  {
+    key: 'hideExtraControl',
+    types: ['boolean'],
+    required: false
+  },
   {
     key: 'trigger',
     types: ['string', 'number', 'function'],

lib/schemas/textSchema.js

@@ -371,4 +371,53 @@ describe('ChatBot', () => {
       expect(wrapper.find('input.rsc-input').props().autoComplete).to.be.equal('firstname');
     });
   });
+  
+  describe('Extra control', () => {
+    const CustomControl = () => (
+      <button className="my-button">custom</button>
+    );
+    const wrapper = mount(
+      <ChatBot
+        botDelay={10}
+        userDelay={10}
+        customDelay={10}
+        extraControl={<CustomControl />}
+        steps={[
+          {
+            id: '1',
+            user: true,
+            hideExtraControl: false,
+            trigger: '2'
+          },
+          {
+            id: '2',
+            user: true,
+            hideExtraControl: true,
+            trigger: '3'
+          },
+          {
+            id: '3',
+            message: 'end',
+            end: true
+          }
+        ]}
+      />,
+    );
+
+    it('should be rendered with an extra control beside submit button', () => {
+      expect(wrapper.find('div.rsc-controls button.my-button')).to.have.length(1);
+    });
+
+    it('the extra control should be hidden', () => {
+      console.log("Setting input value");
+      wrapper.setState({ inputValue: 'test' });
+      console.log("Simulate key press");
+      wrapper.find('input.rsc-input').simulate('keyPress', { key: 'Enter' });
+      setTimeout(() => {
+        console.log("testing hidden");
+        expect(wrapper.find('div.rsc-controls button.my-button')).to.have.length(0);  
+      }, 500);
+    });
+
+  });
 });