add custom delay in text and custom step

Author: LucasBassetti

lib/ChatBot.jsx

@@ -30,8 +30,8 @@ class ChatBot extends Component {
       opened: props.opened || !props.floating,
       inputValue: '',
       inputInvalid: false,
-      defaulBotSettings: {},
-      defaulUserSettings: {},
+      defaultBotSettings: {},
+      defaultUserSettings: {},
     };
 
     this.renderStep = this.renderStep.bind(this);
@@ -41,21 +41,32 @@ class ChatBot extends Component {
   }
 
   componentWillMount() {
-    const { botDelay, botAvatar, userDelay, userAvatar } = this.props;
+    const { botDelay, botAvatar, customDelay, userDelay, userAvatar } = this.props;
     const steps = {};
 
-    const defaulBotSettings = {
+    const defaultBotSettings = {
       delay: botDelay,
       avatar: botAvatar,
     };
-    const defaulUserSettings = {
+    const defaultUserSettings = {
       delay: userDelay,
       avatar: userAvatar,
     };
+    const defaultCustomSettings = {
+      delay: customDelay,
+    };
 
     for (let i = 0, len = this.props.steps.length; i < len; i += 1) {
       const step = this.props.steps[i];
-      const settings = step.user ? defaulUserSettings : defaulBotSettings;
+      let settings = {};
+
+      if (step.user || step.asMessage) {
+        settings = defaultUserSettings;
+      } else if (step.message) {
+        settings = defaultBotSettings;
+      } else if (step.component) {
+        settings = defaultCustomSettings;
+      }
 
       steps[step.id] = Object.assign(
         {},
@@ -69,8 +80,8 @@ class ChatBot extends Component {
     const previousSteps = [steps[currentStep.id]];
 
     this.setState({
-      defaulBotSettings,
-      defaulUserSettings,
+      defaultBotSettings,
+      defaultUserSettings,
       steps,
       currentStep,
       renderedSteps,
@@ -118,7 +129,7 @@ class ChatBot extends Component {
       renderedSteps,
       previousSteps,
       steps,
-      defaulUserSettings,
+      defaultUserSettings,
     } = this.state;
     let { currentStep, previousStep } = this.state;
     const isEnd = currentStep.end;
@@ -140,7 +151,7 @@ class ChatBot extends Component {
         {},
         currentStep,
         option,
-        defaulUserSettings,
+        defaultUserSettings,
         {
           user: true,
           trigger: option.trigger,
@@ -271,7 +282,7 @@ class ChatBot extends Component {
         renderedSteps,
         previousSteps,
         inputValue,
-        defaulUserSettings,
+        defaultUserSettings,
       } = this.state;
       let { currentStep } = this.state;
 
@@ -285,7 +296,7 @@ class ChatBot extends Component {
 
         currentStep = Object.assign(
           {},
-          defaulUserSettings,
+          defaultUserSettings,
           currentStep,
           step,
         );
@@ -358,7 +369,6 @@ class ChatBot extends Component {
       avatarStyle,
       bubbleStyle,
       customStyle,
-      customDelay,
       hideBotAvatar,
       hideUserAvatar,
     } = this.props;
@@ -381,7 +391,6 @@ class ChatBot extends Component {
       return (
         <CustomStep
           key={index}
-          delay={customDelay}
           step={step}
           steps={steps}
           style={customStyle}

lib/schemas/customSchema.js

@@ -29,6 +29,11 @@ export default [
     types: ['string', 'number'],
     required: false,
   },
+  {
+    key: 'delay',
+    types: ['number'],
+    required: false,
+  },
   {
     key: 'end',
     types: ['boolean'],

lib/schemas/textSchema.js

@@ -19,6 +19,11 @@ export default [
     types: ['string', 'number'],
     required: false,
   },
+  {
+    key: 'delay',
+    types: ['number'],
+    required: false,
+  },
   {
     key: 'end',
     types: ['boolean'],

lib/steps/custom/CustomStep.jsx

@@ -16,8 +16,9 @@ class CustomStep extends Component {
   }
 
   componentDidMount() {
-    const { delay } = this.props;
-    const { waitAction } = this.props.step;
+    const { step } = this.props;
+    const { delay, waitAction } = step;
+
     setTimeout(() => {
       this.setState({ loading: false }, () => {
         if (!waitAction) {
@@ -47,16 +48,17 @@ class CustomStep extends Component {
         className="rsc-cs"
         style={style}
       >
-        { loading ? (
-          <Loading />
-        ) : this.renderComponent() }
+        {
+          loading ? (
+            <Loading />
+          ) : this.renderComponent()
+        }
       </CustomStepContainer>
     );
   }
 }
 
 CustomStep.propTypes = {
-  delay: PropTypes.number.isRequired,
   step: PropTypes.object.isRequired,
   steps: PropTypes.object.isRequired,
   style: PropTypes.object.isRequired,

lib/steps/options/OptionElement.jsx

@@ -2,15 +2,12 @@ import styled from 'styled-components';
 import defaultTheme from '../../theme';
 
 const OptionElement = styled.a`
-  background: ${props => props.user
-    ? props.theme.userBubbleColor
-    : props.theme.botBubbleColor};
+  background: ${({ theme }) => theme.botBubbleColor};
   border-radius: 22px;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
-  color: ${props => props.user
-    ? props.theme.userFontColor
-    : props.theme.botFontColor};
+  color: ${({ theme }) => theme.botFontColor};
   display: inline-block;
+  font-size: 14px;
   padding: 12px;
 
   &:hover { opacity: .7; }

src/components/Example.jsx

@@ -13,10 +13,27 @@ const otherFontTheme = {
   userFontColor: '#4a4a4a',
 };
 
+const Test = () =>
+  <div>Hello</div>;
+
 const steps = [
   {
     id: '1',
     message: 'Hello World',
+    delay: 1000,
+    trigger: '2',
+  },
+  {
+    id: '2',
+    options: [
+      { value: 'a', label: 'aaa', trigger: '3' },
+    ],
+  },
+  {
+    id: '3',
+    component: <Test />,
+    // asMessage: true,
+    // delay: 0,
     end: true,
   },
 ];