chore(react): move necessary files to be changed into experimental an…

…d update imports

packages/botonic-react/src/experimental/constants.js

@@ -0,0 +1,189 @@
+import BotonicLogo from '../assets/botonic_react_logo100x100.png'
+
+export const SENDERS = {
+  bot: 'bot',
+  user: 'user',
+}
+
+export const COLORS = {
+  // http://chir.ag/projects/name-that-color
+  APPLE_GREEN: 'rgba(58, 156, 53, 1)',
+  BLEACHED_CEDAR_PURPLE: 'rgba(46, 32, 59, 1)',
+  BOTONIC_BLUE: 'rgba(0, 153, 255, 1)',
+  CACTUS_GREEN: 'rgba(96, 115, 94, 1)',
+  CONCRETE_WHITE: 'rgba(243, 243, 243, 1)',
+  CURIOUS_BLUE: 'rgba(38, 139, 210, 1)',
+  DAINTREE_BLUE: 'rgba(0, 43, 53, 1)',
+  ERROR_RED: 'rgba(255, 43, 94)',
+  FRINGY_FLOWER_GREEN: 'rgba(198, 231, 192, 1)',
+  GRAY: 'rgba(129, 129, 129, 1)',
+  LIGHT_GRAY: 'rgba(209, 209, 209, 1)',
+  MID_GRAY: 'rgba(105, 105, 115, 1)',
+  PIGEON_POST_BLUE_ALPHA_0_5: 'rgba(176, 196, 222, 0.5)',
+  SCORPION_GRAY: 'rgba(87, 87, 87, 1)',
+  SEASHELL_WHITE: 'rgba(241, 240, 240, 1)',
+  SILVER: 'rgba(200, 200, 200, 1)',
+  SOLID_BLACK_ALPHA_0_2: 'rgba(0, 0, 0, 0.2)',
+  SOLID_BLACK_ALPHA_0_5: 'rgba(0, 0, 0, 0.5)',
+  SOLID_BLACK: 'rgba(0, 0, 0, 1)',
+  SOLID_WHITE_ALPHA_0_2: 'rgba(255, 255, 255, 0.2)',
+  SOLID_WHITE_ALPHA_0_8: 'rgba(255, 255, 255, 0.8)',
+  SOLID_WHITE: 'rgba(255, 255, 255, 1)',
+  TASMAN_GRAY: 'rgba(209, 216, 207, 1)',
+  TRANSPARENT: 'rgba(0, 0, 0, 0)',
+  WILD_SAND_WHITE: 'rgba(244, 244, 244, 1)',
+}
+
+export const WEBCHAT = {
+  DEFAULTS: {
+    WIDTH: 300,
+    HEIGHT: 450,
+    TITLE: 'Botonic',
+    LOGO: BotonicLogo,
+    PLACEHOLDER: 'Ask me something...',
+    FONT_FAMILY: "'Noto Sans JP', sans-serif",
+    BORDER_RADIUS_TOP_CORNERS: '6px 6px 0px 0px',
+    ELEMENT_WIDTH: 222,
+    ELEMENT_MARGIN_RIGHT: 6,
+    STORAGE_KEY: 'botonicState',
+    HOST_ID: 'root',
+    ID: 'botonic-webchat',
+    BUTTON_AUTO_DISABLE: false,
+    BUTTON_DISABLED_STYLE: {
+      opacity: 0.5,
+      cursor: 'auto',
+      pointerEvents: 'none',
+    },
+  },
+  SELECTORS: {
+    SCROLLABLE_CONTENT: '#botonic-scrollable-content',
+    SIMPLEBAR_CONTENT: '.simplebar-content',
+    SIMPLEBAR_WRAPPER: '.simplebar-content-wrapper',
+  },
+  CUSTOM_PROPERTIES: {
+    // General
+    enableAnimations: 'animations.enable',
+    markdownStyle: 'markdownStyle',
+    scrollbar: 'scrollbar',
+    // Mobile
+    mobileBreakpoint: 'mobileBreakpoint',
+    mobileStyle: 'mobileStyle',
+    // Webviews
+    webviewHeaderStyle: 'webview.header.style',
+    webviewStyle: 'webview.style',
+    // Brand
+    brandColor: 'brand.color',
+    brandImage: 'brand.image',
+    // Header
+    customHeader: 'header.custom',
+    headerImage: 'header.image',
+    headerStyle: 'header.style',
+    headerSubtitle: 'header.subtitle',
+    headerTitle: 'header.title',
+    // Bot Message
+    botMessageBackground: 'message.bot.style.background',
+    botMessageBlobTick: 'message.bot.blobTick',
+    botMessageBlobTickStyle: 'message.bot.blobTickStyle',
+    botMessageBlobWidth: 'message.bot.blobWidth',
+    botMessageBorderColor: 'message.bot.style.borderColor',
+    botMessageImage: 'message.bot.image',
+    botMessageImageStyle: 'message.bot.imageStyle',
+    botMessageStyle: 'message.bot.style',
+    // User Message
+    customMessageTypes: 'message.customTypes',
+    messageStyle: 'message.style',
+    userMessageBackground: 'message.user.style.background',
+    userMessageBlobTick: 'message.user.blobTick',
+    userMessageBlobTickStyle: 'message.user.blobTickStyle',
+    userMessageBorderColor: 'message.user.style.borderColor',
+    userMessageStyle: 'message.user.style',
+    // Timestamps
+    enableMessageTimestamps: 'message.timestamps.enable',
+    messageTimestampsFormat: 'message.timestamps.format',
+    messageTimestampsStyle: 'message.timestamps.style',
+    // Intro
+    customIntro: 'intro.custom',
+    introImage: 'intro.image',
+    introStyle: 'intro.style',
+    // Buttons
+    buttonHoverBackground: 'button.hoverBackground',
+    buttonHoverTextColor: 'button.hoverTextColor',
+    buttonMessageType: 'button.messageType',
+    buttonStyle: 'button.style',
+    buttonDisabledStyle: 'button.disabledstyle',
+    buttonAutoDisable: 'button.autodisable',
+    buttonStyleBackground: 'button.style.background',
+    buttonStyleColor: 'button.style.color',
+    customButton: 'button.custom',
+    // Replies
+    alignReplies: 'replies.align',
+    customReply: 'reply.custom',
+    replyStyle: 'reply.style',
+    wrapReplies: 'replies.wrap',
+    // TriggerButton
+    customTrigger: 'triggerButton.custom',
+    triggerButtonImage: 'triggerButton.image',
+    triggerButtonStyle: 'triggerButton.style',
+    // User Input
+    blockInputs: 'userInput.blockInputs',
+    documentDownload: 'documentDownload',
+    customMenuButton: 'userInput.menuButton.custom',
+    customPersistentMenu: 'userInput.menu.custom',
+    customSendButton: 'userInput.sendButton.custom',
+    darkBackgroundMenu: 'userInput.menu.darkBackground',
+    enableAttachments: 'userInput.attachments.enable',
+    enableEmojiPicker: 'userInput.emojiPicker.enable',
+    enableSendButton: 'userInput.sendButton.enable',
+    enableUserInput: 'userInput.enable',
+    persistentMenu: 'userInput.persistentMenu',
+    textPlaceholder: 'userInput.box.placeholder',
+    userInputBoxStyle: 'userInput.box.style',
+    userInputStyle: 'userInput.style',
+    // Cover Component
+    coverComponent: 'coverComponent.component',
+    coverComponentProps: 'coverComponent.props',
+    // Carousel
+    customCarouselLeftArrow: 'carousel.arrow.left',
+    customCarouselRightArrow: 'carousel.arrow.right',
+    enableCarouselArrows: 'carousel.enableArrows',
+  },
+}
+
+export const MIME_WHITELIST = {
+  audio: ['audio/mpeg', 'audio/mp3'],
+  document: ['application/pdf'],
+  image: ['image/jpeg', 'image/png'],
+  video: ['video/mp4', 'video/quicktime'],
+}
+
+export const MAX_ALLOWED_SIZE_MB = 10
+
+export const ROLES = {
+  ATTACHMENT_ICON: 'attachment-icon',
+  EMOJI_PICKER_ICON: 'emoji-picker-icon',
+  EMOJI_PICKER: 'emoji-picker',
+  HEADER: 'header',
+  MESSAGE_LIST: 'message-list',
+  PERSISTENT_MENU_ICON: 'persistent-menu-icon',
+  PERSISTENT_MENU: 'persistent-menu',
+  SEND_BUTTON_ICON: 'send-button-icon',
+  WEBCHAT: 'webchat',
+  TRIGGER_BUTTON: 'trigger-button',
+  TYPING_INDICATOR: 'typing-indicator',
+  TEXT_BOX: 'textbox',
+  WEBVIEW: 'webview',
+  WEBVIEW_HEADER: 'webview-header',
+  MESSAGE: 'message',
+  IMAGE_MESSAGE: 'image-message',
+  AUDIO_MESSAGE: 'audio-message',
+  VIDEO_MESSAGE: 'video-message',
+  DOCUMENT_MESSAGE: 'document-message',
+  RAW_MESSAGE: 'raw-message',
+}
+
+export const COMPONENT_TYPE = {
+  TEXT: 'Text',
+  BUTTON: 'Button',
+  REPLY: 'Reply',
+  CAROUSEL: 'Carousel',
+}

packages/botonic-react/src/experimental/contexts.jsx

@@ -0,0 +1,36 @@
+import React from 'react'
+
+import { webchatInitialState } from './webchat/hooks'
+
+export const RequestContext = React.createContext({
+  getString: () => '',
+  setLocale: () => '',
+  session: {},
+  params: {},
+  input: {},
+  defaultDelay: 0,
+  defaultTyping: 0,
+})
+
+export const WebchatContext = React.createContext({
+  sendText: text => {},
+  sendAttachment: attachment => {},
+  sendPayload: payload => {},
+  sendInput: input => {},
+  setReplies: replies => {},
+  openWebview: webviewComponent => {},
+  addMessage: message => {},
+  updateMessage: message => {},
+  updateReplies: replies => {},
+  updateLatestInput: input => {},
+  closeWebview: () => {},
+  toggleWebchat: () => {},
+  getThemeProperty: property => undefined, // used to retrieve a specific property of the theme defined by the developer in his 'webchat/index.js'
+  resolveCase: () => {},
+  theme: {},
+  webchatState: webchatInitialState,
+  updateWebchatDevSettings: settings => {
+    return {}
+  },
+  updateUser: user => {},
+})

packages/botonic-react/src/experimental/dev-app.jsx

@@ -2,9 +2,9 @@ import merge from 'lodash.merge'
 import React from 'react'
 import { render } from 'react-dom'
 
-import { SENDERS } from '../constants'
-import { onDOMLoaded } from '../util/dom'
+import { SENDERS } from './constants'
 import { ReactBot } from './react-bot'
+import { onDOMLoaded } from './util/dom'
 import { WebchatDev } from './webchat/webchat-dev'
 import { WebchatApp } from './webchat-app'
 

packages/botonic-react/src/experimental/msg-to-botonic.jsx

@@ -1,5 +1,12 @@
 import React from 'react'
 
+import { Button } from '../components/button'
+import { ButtonsDisabler } from '../components/buttons-disabler'
+import { Element } from '../components/element'
+import { Pic } from '../components/pic'
+import { Reply } from '../components/reply'
+import { Subtitle } from '../components/subtitle'
+import { Title } from '../components/title'
 import {
   isAudio,
   isCarousel,
@@ -9,14 +16,7 @@ import {
   isLocation,
   isText,
   isVideo,
-} from '../../src/message-utils'
-import { Button } from '../components/button'
-import { ButtonsDisabler } from '../components/buttons-disabler'
-import { Element } from '../components/element'
-import { Pic } from '../components/pic'
-import { Reply } from '../components/reply'
-import { Subtitle } from '../components/subtitle'
-import { Title } from '../components/title'
+} from '../message-utils'
 // Experimental
 import { Audio } from './components/audio'
 import { Carousel } from './components/carousel'

packages/botonic-react/src/experimental/react-bot.jsx

@@ -1,8 +1,8 @@
 import { CoreBot } from '@botonic/core'
 import React from 'react'
 
-import { RequestContext } from '../contexts'
 import { Text } from './components/text'
+import { RequestContext } from './contexts'
 
 export class ReactBot extends CoreBot {
   constructor(options) {

packages/botonic-react/src/experimental/util/dom.js

@@ -0,0 +1,55 @@
+import { WEBCHAT } from '../constants'
+
+export const getScrollableArea = webchatElement => {
+  const getArea = area => {
+    const botonicScrollableContent = webchatElement.querySelector(
+      WEBCHAT.SELECTORS.SCROLLABLE_CONTENT
+    )
+    const scrollableArea =
+      botonicScrollableContent && botonicScrollableContent.querySelector(area)
+    return scrollableArea
+  }
+  return {
+    full: getArea(WEBCHAT.SELECTORS.SIMPLEBAR_CONTENT),
+    visible: getArea(WEBCHAT.SELECTORS.SIMPLEBAR_WRAPPER),
+  }
+}
+
+export const scrollToBottom = ({
+  timeout = 200,
+  behavior = 'smooth',
+  host,
+} = {}) => {
+  const webchatElement = getWebchatElement(host)
+  if (!webchatElement) return
+  const frame = getScrollableArea(webchatElement).visible
+  if (frame) {
+    setTimeout(
+      () => frame.scrollTo({ top: frame.scrollHeight, behavior: behavior }),
+      timeout
+    )
+  }
+}
+
+export const getWebchatElement = host =>
+  host && host.querySelector(`#${WEBCHAT.DEFAULTS.ID}`)
+
+// https://stackoverflow.com/questions/9457891/how-to-detect-if-domcontentloaded-was-fired
+export const onDOMLoaded = callback => {
+  if (/complete|interactive|loaded/.test(document.readyState)) {
+    // In case the document has finished parsing, document's readyState will
+    // be one of "complete", "interactive" or (non-standard) "loaded".
+    callback()
+  } else {
+    // The document is not ready yet, so wait for the DOMContentLoaded event
+    document.addEventListener('DOMContentLoaded', callback, false)
+  }
+}
+
+export const isShadowDOMSupported = () => {
+  try {
+    return document.head.createShadowRoot || document.head.attachShadow
+  } catch (e) {
+    return false
+  }
+}

packages/botonic-react/src/experimental/webchat-app.jsx

@@ -3,9 +3,9 @@ import merge from 'lodash.merge'
 import React, { createRef } from 'react'
 import { render } from 'react-dom'
 
-import { SENDERS, WEBCHAT } from '../constants'
-import { isShadowDOMSupported, onDOMLoaded } from '../util/dom'
+import { SENDERS, WEBCHAT } from './constants'
 import { msgToBotonic } from './msg-to-botonic'
+import { isShadowDOMSupported, onDOMLoaded } from './util/dom'
 import { Webchat } from './webchat/webchat'
 
 export class WebchatApp {

packages/botonic-react/src/experimental/webchat/actions.jsx

@@ -0,0 +1,22 @@
+export const ADD_MESSAGE = 'addMessage'
+export const ADD_MESSAGE_COMPONENT = 'addMessageComponent'
+export const UPDATE_MESSAGE = 'updateMessage'
+export const UPDATE_REPLIES = 'updateReplies'
+export const UPDATE_LATEST_INPUT = 'updateLatestInput'
+export const UPDATE_TYPING = 'updateTyping'
+export const UPDATE_WEBVIEW = 'updateWebview'
+export const UPDATE_SESSION = 'updateSession'
+export const UPDATE_LAST_ROUTE_PATH = 'updateLastRoutePath'
+export const UPDATE_HANDOFF = 'updateHandoff'
+export const UPDATE_THEME = 'updateTheme'
+export const UPDATE_DEV_SETTINGS = 'updateDevSettings'
+export const TOGGLE_WEBCHAT = 'toggleWebchat'
+export const TOGGLE_EMOJI_PICKER = 'toggleEmojiPicker'
+export const TOGGLE_PERSISTENT_MENU = 'togglePersistentMenu'
+export const TOGGLE_COVER_COMPONENT = 'toggleCoverComponent'
+export const SET_ERROR = 'setError'
+export const CLEAR_MESSAGES = 'clearMessages'
+export const UPDATE_LAST_MESSAGE_DATE = 'updateLastMessageDate'
+export const SET_CURRENT_ATTACHMENT = 'setCurrentAttachment'
+export const SET_ONLINE = 'setOnline'
+export const UPDATE_JWT = 'updateJwt'