- add chatbot components to a specific folder

- rename step component folders
- add floatingStyle prop to chatbot

Author: LucasBassetti

dist/react-simple-chatbot.js

@@ -2,18 +2,20 @@ import _ from 'lodash';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Random from 'random-id';
-import { CustomStep, OptionsStep, TextStep } from './steps';
+import { CustomStep, OptionsStep, TextStep } from './steps_components';
 import schema from './schemas/schema';
 import * as storage from './storage';
-import ChatBotContainer from './ChatBotContainer';
-import Content from './Content';
-import Header from './Header';
-import HeaderTitle from './HeaderTitle';
-import HeaderIcon from './HeaderIcon';
-import FloatButton from './FloatButton';
-import Footer from './Footer';
-import Input from './Input';
-import SubmitButton from './SubmitButton';
+import {
+  ChatBotContainer,
+  Content,
+  Header,
+  HeaderTitle,
+  HeaderIcon,
+  FloatButton,
+  Footer,
+  Input,
+  SubmitButton,
+} from './components';
 import Recognition from './recognition';
 import { ChatIcon, CloseIcon, SubmitIcon, MicIcon } from './icons';
 import { isMobile } from './utils';
@@ -520,6 +522,7 @@ class ChatBot extends Component {
       className,
       contentStyle,
       floating,
+      floatingStyle,
       footerStyle,
       headerComponent,
       headerTitle,
@@ -559,6 +562,7 @@ class ChatBot extends Component {
         {floating && (
           <FloatButton
             className="rsc-float-button"
+            style={floatingStyle}
             opened={opened}
             onClick={() => this.toggleChatBot(true)}
           >
@@ -568,6 +572,7 @@ class ChatBot extends Component {
         <ChatBotContainer
           className="rsc-container"
           floating={floating}
+          floatingStyle={floatingStyle}
           opened={opened}
           style={style}
           width={width}
@@ -635,6 +640,7 @@ ChatBot.propTypes = {
   customStyle: PropTypes.object,
   enableMobileAutoFocus: PropTypes.bool,
   floating: PropTypes.bool,
+  floatingStyle: PropTypes.object,
   footerStyle: PropTypes.object,
   handleEnd: PropTypes.func,
   headerComponent: PropTypes.element,
@@ -673,6 +679,7 @@ ChatBot.defaultProps = {
   customDelay: 1000,
   enableMobileAutoFocus: false,
   floating: false,
+  floatingStyle: {},
   footerStyle: {},
   handleEnd: undefined,
   headerComponent: undefined,

src/components/Example.jsx example/components/Example.jsxsrc/components/Example.jsx renamed to example/components/Example.jsx

@@ -0,0 +1,37 @@
+import styled from 'styled-components';
+import defaultTheme from '../theme';
+
+const ChatBotContainer = styled.div`
+  background: ${({ theme }) => theme.background};
+  border-radius: 10px;
+  box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.15);
+  font-family: ${({ theme }) => theme.fontFamily};
+  overflow: hidden;
+  position: ${({ floating }) => floating ? 'fixed' : 'relative'};
+  bottom: ${({ floating, floatingStyle }) => floating ? floatingStyle.bottom || '32px' : 'initial'};
+  top: ${({ floating, floatingStyle }) => floating ? floatingStyle.top || 'initial' : 'initial'};
+  right: ${({ floating, floatingStyle }) => floating ? floatingStyle.right || '32px' : 'initial'};
+  left: ${({ floating, floatingStyle }) => floating ? floatingStyle.left || 'initial' : 'initial'};
+  width: ${({ width }) => width};
+  height: ${({ height }) => height};
+  z-index: 999;
+  transform: ${({ opened }) => opened ? 'scale(1)' : 'scale(0)'};
+  transform-origin: ${({ floatingStyle }) => floatingStyle.transformOrigin || 'bottom right'};
+  transition: transform .3s ease;
+
+  @media screen and (max-width: 568px) {
+    border-radius: ${({ floating }) => floating ? '0' : ''};
+    bottom: 0 !important;
+    left: initial !important;
+    height: 100%;
+    right: 0 !important;
+    top: initial !important;
+    width: 100%;
+  }
+`;
+
+ChatBotContainer.defaultProps = {
+  theme: defaultTheme,
+};
+
+export default ChatBotContainer;