@botonic/react 0.22.0-alpha.0 → 0.22.0-alpha.2

package/lib/esm/webview-app.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @ts-nocheck
+import { getString } from '@botonic/core/lib/esm/i18n';
+import { PROVIDER } from '@botonic/core/lib/esm/models/legacy-types';
+import { params2queryString } from '@botonic/core/lib/esm/utils';
+import axios from 'axios';
+import React from 'react';
+import { render } from 'react-dom';
+import { BrowserRouter, Route } from 'react-router-dom';
+import { RequestContext } from './contexts';
+class App extends React.Component {
+    constructor(props) {
+        super(props);
+        const url = new URL(window.location.href);
+        const params = Array.from(url.searchParams.entries())
+            .filter(([key, value]) => key != 'context')
+            .reduce((o, [key, value]) => {
+            o[key] = value;
+            return o;
+        }, {});
+        const session = JSON.parse(url.searchParams.get('context') || {});
+        this.state = { session, params };
+    }
+    async close(options) {
+        let payload = options ? options.payload : null;
+        if (options.path)
+            payload = `__PATH_PAYLOAD__${options.path}`;
+        if (payload) {
+            if (options.params) {
+                payload = `${payload}?${params2queryString(options.params)}`;
+            }
+            const s = this.state.session;
+            try {
+                const baseUrl = s._hubtype_api || 'https://api.hubtype.com';
+                const resp = await axios({
+                    method: 'post',
+                    url: `${baseUrl}/v1/bots/${s.bot.id}/send_postback/`,
+                    // eslint-disable-next-line @typescript-eslint/naming-convention
+                    data: { payload: payload, chat_id: s.user.id },
+                });
+            }
+            catch (e) {
+                console.log(e);
+            }
+        }
+        const provider = this.state.session.user.provider;
+        const impId = this.state.session.user.imp_id;
+        if (provider === PROVIDER.WHATSAPP) {
+            const phone_number = this.state.session.user.unformatted_phone_number;
+            location.href = 'https://wa.me/' + phone_number;
+        }
+        if (provider === PROVIDER.TELEGRAM) {
+            location.href = 'https://t.me/' + impId;
+        }
+        if (provider === PROVIDER.APPLE) {
+            location.href = 'https://bcrw.apple.com/urn:biz:' + impId;
+        }
+        if (provider === PROVIDER.TWITTER) {
+            location.href =
+                'https://twitter.com/messages/compose?recipient_id=' + impId;
+        }
+        if (provider === PROVIDER.INSTAGRAM) {
+            window.close();
+        }
+        if (provider === PROVIDER.FACEBOOK) {
+            try {
+                window.MessengerExtensions.requestCloseBrowser(() => undefined, err => console.log(err));
+            }
+            catch (e) { }
+        }
+        if (provider === PROVIDER.WEBCHAT) {
+            try {
+                await parent.postMessage('botonicCloseWebview', '*');
+            }
+            catch (e) { }
+        }
+    }
+    render() {
+        const requestContext = {
+            getString: stringId => getString(this.props.locales, this.state.session.__locale, stringId),
+            session: this.state.session || {},
+            params: this.state.params || {},
+            closeWebview: this.close.bind(this),
+        };
+        return (_jsx(RequestContext.Provider, Object.assign({ value: requestContext }, { children: this.props.webviews.map((Webview, i) => (_jsx(Route, { path: `/${Webview.name}`, component: Webview }, i))) })));
+    }
+}
+export class WebviewApp {
+    constructor({ webviews, locales }) {
+        this.webviews = webviews;
+        this.locales = locales;
+    }
+    render(dest) {
+        render(_jsx(BrowserRouter, { children: _jsx(App, { webviews: this.webviews, locales: this.locales }) }), dest);
+    }
+}
+//# sourceMappingURL=webview-app.js.map

package/lib/esm/webview-app.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"webview-app.js","sourceRoot":"src/","sources":["webview-app.tsx"],"names":[],"mappings":"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"}

package/lib/esm/webview.template.html

@@ -0,0 +1,39 @@
+<html>
+  <head>
+    <title></title>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <style>
+      html,
+      body,
+      #root {
+        width: 100%;
+        height: 100%;
+        margin: 0px;
+        padding: 0px;
+      }
+    </style>
+  </head>
+
+  <body>
+    <script>
+      ;(function (d, s, id) {
+        var js,
+          fjs = d.getElementsByTagName(s)[0]
+        if (d.getElementById(id)) {
+          return
+        }
+        js = d.createElement(s)
+        js.id = id
+        js.src = 'https://connect.facebook.net/en_US/messenger.Extensions.js'
+        fjs.parentNode.insertBefore(js, fjs)
+      })(document, 'script', 'Messenger')
+    </script>
+    <div id="root"></div>
+    <script type="text/javascript">
+      document.addEventListener('DOMContentLoaded', function (event) {
+        BotonicWebview.render(document.getElementById('root'))
+      })
+    </script>
+  </body>
+</html>

package/package.json

@@ -1,19 +1,25 @@
 {
   "name": "@botonic/react",
-  "version": "0.22.0-alpha.0",
+  "version": "0.22.0-alpha.2",
   "license": "MIT",
   "description": "Build Chatbots using React",
-  "main": "src/index.js",
-  "types": "./index.d.ts",
+  "main": "./lib/cjs",
+  "module": "./lib/esm",
+  "types": "./lib/cjs/index.d.ts",
   "scripts": {
-    "test": "../../node_modules/.bin/jest --coverage",
+    "test:no-coverage": "./node_modules/.bin/jest --env=jsdom",
+    "test": "./node_modules/.bin/jest --env=jsdom --coverage",
     "cloc": "../../scripts/qa/cloc-package.sh .",
-    "prepare": "node ../../preinstall.js",
-    "build": "rm -rf lib && babel src --out-dir lib --source-maps --copy-files",
+    "prepublishOnly": "npm run clean; npm run build; npm run copy-files;",
+    "prepare": "node ../../preinstall.js;",
+    "clean": "rm -rf ./lib/",
+    "copy-files": "copyfiles -u 1 src/**/*.svg src/**/*.png src/**/*.scss src/**/*.html lib/esm/; copyfiles -u 1 src/**/*.svg src/**/*.png src/**/*.scss src/**/*.html lib/cjs/;",
+    "build": "./node_modules/.bin/tsc -p tsconfig.json && ./node_modules/.bin/tsc -p tsconfig.esm.json",
     "build:watch": "npm run build -- --watch",
-    "lint": "npm run lint_core -- --fix",
+    "prettier": "../../node_modules/.bin/prettier --no-error-on-unmatched-pattern --write '**/*.md' '**/*.css' '.*.js' '*.js{,on}'",
+    "lint": "npm run prettier; npm run lint_core -- --fix",
     "lint_ci": "npm run lint_core",
-    "lint_core": "../../node_modules/.bin/eslint_d --cache --quiet '.*.js' '*.js' 'src/**/*.js*' 'src/**/*.d.ts' 'tests/**/*.js' 'tests/**/*.jsx'"
+    "lint_core": "../../node_modules/.bin/eslint_d --cache --quiet '.*.js' '*.js' 'src/**/*.js*' 'src/**/*.d.ts' --fix"
   },
   "sideEffects": [
     "*.scss",
@@ -29,43 +35,50 @@
     "README.md"
   ],
   "dependencies": {
-    "@botonic/core": "0.21.0",
-    "axios": "^0.24.0",
-    "emoji-picker-react": "^3.2.3",
+    "@botonic/core": "0.22.0-alpha.0",
+    "axios": "^1.4.0",
+    "emoji-picker-react": "^4.4.9",
     "framer-motion": "^3.1.1",
     "he": "^1.2.0",
     "lodash.merge": "^4.6.2",
     "markdown-it": "^12.0.6",
     "qrcode.react": "^1.0.1",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
     "react-frame-component": "^4.1.3",
     "react-json-tree": "^0.15.0",
     "react-reveal": "^1.2.2",
-    "react-router-dom": "^5.2.1",
+    "react-router-dom": "^5.3.4",
     "react-textarea-autosize": "^7.1.2",
     "reconnecting-websocket": "^4.4.0",
-    "simplebar-react": "^2.3.3",
+    "simplebar-react": "^2.4.3",
     "styled-components": "^5.3.0",
-    "ua-parser-js": "^0.7.21",
+    "ua-parser-js": "^0.8.1",
     "unescape": "^1.0.1",
-    "use-async-effect": "^2.2.3",
+    "use-async-effect": "^2.2.7",
     "uuid": "^8.3.2"
   },
   "devDependencies": {
-    "@babel/cli": "^7.13.16",
-    "@babel/core": "^7.14.2",
-    "@babel/plugin-proposal-class-properties": "^7.13.0",
-    "@babel/plugin-proposal-object-rest-spread": "^7.14.2",
-    "@babel/plugin-transform-runtime": "^7.14.2",
-    "@babel/preset-env": "^7.14.2",
-    "@babel/preset-react": "^7.13.13",
+    "@babel/cli": "^7.21.5",
+    "@babel/core": "^7.21.8",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
+    "@babel/plugin-transform-runtime": "^7.21.4",
+    "@babel/preset-env": "^7.21.5",
+    "@babel/preset-react": "^7.18.6",
     "@testing-library/react": "^12.0.0",
-    "@testing-library/react-hooks": "^7.0.0",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@types/jest": "^29.5.1",
+    "@types/parse5": "^7.0.0",
     "@types/react": "17.0.27",
-    "babel-plugin-add-module-exports": "^1.0.2",
+    "babel-plugin-add-module-exports": "^1.0.4",
+    "copyfiles": "^2.4.1",
     "identity-obj-proxy": "^3.0.0",
-    "react-test-renderer": "^16.14.0"
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
+    "react-test-renderer": "^17.0.0",
+    "ts-jest": "^29.1.0",
+    "typescript": "^5.0.4"
   },
   "engines": {
     "node": ">=10.0.0"

package/src/components/audio.jsx

@@ -2,6 +2,7 @@ import { INPUT, isBrowser } from '@botonic/core'
 import React from 'react'
 
 import { ROLES } from '../constants'
+import { staticAsset } from '../util/environment'
 import { Message } from './message'
 
 const serialize = audioProps => {
@@ -9,6 +10,7 @@ const serialize = audioProps => {
 }
 
 export const Audio = props => {
+  props = { ...props, src: staticAsset(props.src) }
   let content = props.children
   if (isBrowser())
     content = (

package/src/components/document.jsx

@@ -4,6 +4,7 @@ import styled from 'styled-components'
 
 import { ROLES, WEBCHAT } from '../constants'
 import { WebchatContext } from '../contexts'
+import { staticAsset } from '../util/environment'
 import { Message } from './message'
 
 const StyledButton = styled.a`
@@ -29,6 +30,7 @@ const serialize = documentProps => {
 }
 
 export const Document = props => {
+  props = { ...props, src: staticAsset(props.src) }
   let content = props.children
 
   const { getThemeProperty } = useContext(WebchatContext)

package/src/components/image.jsx

@@ -4,6 +4,7 @@ import styled from 'styled-components'
 
 import { ROLES, WEBCHAT } from '../constants'
 import { WebchatContext } from '../contexts'
+import { staticAsset } from '../util/environment'
 import { Message } from './message'
 
 const StyledImage = styled.img`
@@ -19,6 +20,7 @@ const serialize = imageProps => {
 }
 
 export const Image = props => {
+  props = { ...props, src: staticAsset(props.src) }
   let content = props.children
 
   const [isPreviewerOpened, setIsPreviewerOpened] = useState(false)

package/src/components/location.jsx

@@ -16,8 +16,8 @@ const serialize = locationProps => {
 }
 
 export const Location = props => {
-  const lat = parseFloat(props.lat)
-  const long = parseFloat(props.long)
+  const { lat, long } = props
+
   const renderBrowser = () => {
     const locationUrl = `https://www.google.com/maps/search/?api=1&query=${lat},${long}`
     return (

package/src/components/message.jsx

@@ -85,12 +85,8 @@ export const Message = props => {
   const isFromUser = from === SENDERS.user
   const isFromBot = from === SENDERS.bot
   const markdown = props.markdown
-  const {
-    webchatState,
-    addMessage,
-    updateReplies,
-    getThemeProperty,
-  } = useContext(WebchatContext)
+  const { webchatState, addMessage, updateReplies, getThemeProperty } =
+    useContext(WebchatContext)
   const [state, setState] = useState({
     id: props.id || uuidv4(),
   })
@@ -114,11 +110,8 @@ export const Message = props => {
       typeof e === 'string' ? renderLinks(e) : e
     )
 
-  const {
-    timestampsEnabled,
-    getFormattedTimestamp,
-    timestampStyle,
-  } = resolveMessageTimestamps(getThemeProperty, enabletimestamps)
+  const { timestampsEnabled, getFormattedTimestamp, timestampStyle } =
+    resolveMessageTimestamps(getThemeProperty, enabletimestamps)
 
   const getEnvAck = () => {
     if (isDev) return 1

package/src/components/multichannel/multichannel-text.jsx

@@ -194,11 +194,8 @@ export const MultichannelText = props => {
   if (isFacebook(requestContext)) {
     const text = getText(props.children)
     const multichannelFacebook = new MultichannelFacebook()
-    const {
-      texts,
-      propsLastText,
-      propsWithoutChildren,
-    } = multichannelFacebook.convertText(props, text[0])
+    const { texts, propsLastText, propsWithoutChildren } =
+      multichannelFacebook.convertText(props, text[0])
     return (
       <>
         {texts &&

package/src/components/pic.jsx

@@ -2,9 +2,10 @@ import React from 'react'
 import styled from 'styled-components'
 
 import { COLORS, WEBCHAT } from '../constants'
+import { staticAsset } from '../util/environment'
 import { renderComponent } from '../util/react'
 
-const PicStyled = styled.div`
+const PicStyled = styled.img`
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
   width: ${WEBCHAT.DEFAULTS.ELEMENT_WIDTH}px;
@@ -15,6 +16,7 @@ const PicStyled = styled.div`
 `
 
 export const Pic = props => {
+  props = { ...props, src: staticAsset(props.src) }
   const renderBrowser = () => <PicStyled src={props.src} />
   const renderNode = () => <pic>{props.src}</pic>
   return renderComponent({ renderBrowser, renderNode })

package/src/components/video.jsx

@@ -3,6 +3,7 @@ import React from 'react'
 import styled from 'styled-components'
 
 import { COLORS, ROLES } from '../constants'
+import { staticAsset } from '../util/environment'
 import { Message } from './message'
 
 const StyledVideo = styled.video`
@@ -18,6 +19,7 @@ const serialize = videoProps => {
 }
 
 export const Video = props => {
+  props = { ...props, src: staticAsset(props.src) }
   let content = props.children
   if (isBrowser())
     content = (

package/src/index.js

@@ -7,4 +7,4 @@ export { NodeApp } from './node-app'
 export { staticAsset } from './util/environment'
 export { getBotonicApp, Webchat } from './webchat/index.js'
 export { WebchatApp } from './webchat-app'
-export { WebviewApp } from './webview'
+export { WebviewApp } from './webview-app'

package/src/msg-to-botonic.jsx

@@ -1,16 +1,5 @@
 import React from 'react'
 
-import {
-  isAudio,
-  isButtonMessage,
-  isCarousel,
-  isCustom,
-  isDocument,
-  isImage,
-  isLocation,
-  isText,
-  isVideo,
-} from '../src/message-utils'
 import { Audio } from './components/audio'
 import { Button } from './components/button'
 import { ButtonsDisabler } from './components/buttons-disabler'
@@ -25,6 +14,17 @@ import { Subtitle } from './components/subtitle'
 import { Text } from './components/text'
 import { Title } from './components/title'
 import { Video } from './components/video'
+import {
+  isAudio,
+  isButtonMessage,
+  isCarousel,
+  isCustom,
+  isDocument,
+  isImage,
+  isLocation,
+  isText,
+  isVideo,
+} from './message-utils'
 
 /**
  *

package/src/util/environment.js

@@ -9,10 +9,11 @@ export const staticAsset = path => {
       .getAttribute('src')
     const scriptName = scriptBaseURL.split('/').pop()
     const basePath = scriptBaseURL.replace('/' + scriptName, '/')
-    return basePath + path
+    const resolvedStaticAssetPath = basePath + path
+    return resolvedStaticAssetPath
   } catch (e) {
     console.error(`Could not resolve path: '${path}'`)
-    return path
+    return normalize(path)
   }
 }
 
@@ -26,3 +27,31 @@ export const isURL = urlPath => {
   const pattern = new RegExp(/^(https?|ftp):\/\/[^\s/$.?#].[^\s]*$/)
   return !!pattern.test(urlPath)
 }
+
+export function normalize(path) {
+  const isAbsolute = path.charAt(0) === '/'
+  const trailingSlash = path && path[path.length - 1] === '/'
+  // Normalize the path
+  path = normalizeArray(path.split('/'), !isAbsolute).join('/')
+  if (!path && !isAbsolute) path = '.'
+  if (path && trailingSlash) path += '/'
+  return (isAbsolute ? '/' : '') + path
+}
+
+function normalizeArray(parts, allowAboveRoot) {
+  const res = []
+  for (let i = 0; i < parts.length; i++) {
+    const p = parts[i]
+    if (!p || p === '.') continue
+    if (p === '..') {
+      if (res.length && res[res.length - 1] !== '..') {
+        res.pop()
+      } else if (allowAboveRoot) {
+        res.push('..')
+      }
+    } else {
+      res.push(p)
+    }
+  }
+  return res
+}

package/src/util/error-boundary.jsx

@@ -1,48 +1,33 @@
+// @ts-nocheck
 import { isNode } from '@botonic/core'
-import React from 'react'
+import React, { useState } from 'react'
 
 import { Text } from '../components/text'
 
-/**
- * Replaces crashed children with the provided fallback component.
- * https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html
- * See alternative at https://stackoverflow.com/a/60255291/145289
- */
 export const createErrorBoundary = ({
-  errorComponent = props => <Text>The message cannot be displayed</Text>,
+  errorComponent = ({ errorMessage }) => (
+    <Text>The message cannot be displayed</Text>
+  ),
 } = {}) => {
-  class ErrorBoundary extends React.Component {
-    constructor(props) {
-      super(props)
-      this.state = { error: null }
-    }
+  const ErrorBoundary = ({ children }) => {
+    const [error, setError] = useState(null)
 
-    /**
-     * @param error the exception which was trown
-     * @param errorInfo the stack of component names at the error
-     */
-    componentDidCatch(error, errorInfo) {
-      // No need to log the error because at least chrome & firefox already show
-      // both component and call stacks
+    const componentDidCatch = (error, errorInfo) => {
       if (isNode()) {
-        // In node, only the component stack is displayed
         console.error(`Failure at:`, error)
       }
     }
 
-    static getDerivedStateFromError(error) {
+    const getDerivedStateFromError = error => {
       return { error }
     }
 
-    render() {
-      if (this.state.error) {
-        return errorComponent({
-          ...this.props,
-          errorMessage: this.state.error.message,
-        })
-      } else {
-        return this.props.children
-      }
+    if (error) {
+      return errorComponent({
+        errorMessage: error.message,
+      })
+    } else {
+      return children
     }
   }
 

package/src/util/webchat.js

@@ -10,21 +10,20 @@ import { getProperty } from './objects'
  * It gives preference to nested defined properties (e.g.: header.style) over plain properties (e.g.: headerStyle).
  * If property doesn't exist, returns the defaultValue.
  */
-export const _getThemeProperty = theme => (
-  property,
-  defaultValue = undefined
-) => {
-  for (const [k, v] of Object.entries(WEBCHAT.CUSTOM_PROPERTIES)) {
-    if (v == property) {
-      const nestedProperty = getProperty(theme, v)
-      if (nestedProperty !== undefined) return nestedProperty
-      const plainProperty = getProperty(theme, k)
-      if (plainProperty !== undefined) return plainProperty
-      return defaultValue
+export const _getThemeProperty =
+  theme =>
+  (property, defaultValue = undefined) => {
+    for (const [k, v] of Object.entries(WEBCHAT.CUSTOM_PROPERTIES)) {
+      if (v == property) {
+        const nestedProperty = getProperty(theme, v)
+        if (nestedProperty !== undefined) return nestedProperty
+        const plainProperty = getProperty(theme, k)
+        if (plainProperty !== undefined) return plainProperty
+        return defaultValue
+      }
     }
+    return undefined
   }
-  return undefined
-}
 
 export const createUser = () => {
   const parser = new UAParser()

package/src/webchat/components/attachment.jsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react'
+import React, { useContext, useRef } from 'react'
 
 import AttachmentIcon from '../../assets/attachment-icon.svg'
 import { ROLES, WEBCHAT } from '../../constants'
@@ -9,6 +9,8 @@ import { Icon } from './common'
 export const Attachment = ({ onChange, accept, enableAttachments }) => {
   const { getThemeProperty } = useContext(WebchatContext)
 
+  const fileInputRef = useRef(null)
+
   const CustomAttachments = getThemeProperty(
     WEBCHAT.CUSTOM_PROPERTIES.customAttachments,
     undefined
@@ -25,6 +27,11 @@ export const Attachment = ({ onChange, accept, enableAttachments }) => {
   }
   const attachmentsEnabled = isAttachmentsEnabled()
 
+  const handleOnChange = event => {
+    onChange(event)
+    fileInputRef.current.value = null
+  }
+
   return (
     <>
       {attachmentsEnabled ? (
@@ -38,11 +45,12 @@ export const Attachment = ({ onChange, accept, enableAttachments }) => {
               )}
             </label>
             <input
+              ref={fileInputRef}
               type='file'
               name='file'
               id='attachment'
               style={{ display: 'none' }}
-              onChange={onChange}
+              onChange={handleOnChange}
               accept={accept}
             />
           </div>

package/src/webchat/components/emoji-picker.jsx

@@ -64,7 +64,13 @@ export const OpenedEmojiPicker = props => {
     <div ref={ref}>
       {isComponentVisible && (
         <Container role={ROLES.EMOJI_PICKER}>
-          <Picker onEmojiClick={props.onEmojiClick} disableAutoFocus={true} />
+          <Picker
+            width='100%'
+            height='19rem'
+            previewConfig={{ showPreview: false }}
+            onEmojiClick={props.onEmojiClick}
+            disableAutoFocus={true}
+          />
         </Container>
       )}
     </div>

package/src/webchat/hooks.js

@@ -247,7 +247,8 @@ export function useComponentVisible(initialIsVisible, onClickOutside) {
   const [isComponentVisible, setIsComponentVisible] = useState(initialIsVisible)
   const ref = useRef(null)
   const handleClickOutside = event => {
-    if (ref.current && !ref.current.contains(event.path[0])) {
+    const target = event.path ? event.path[0] : event.target
+    if (ref.current && !ref.current.contains(target)) {
       setIsComponentVisible(false)
       onClickOutside()
     }