@botonic/react 0.21.4 → 0.21.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botonic/react",
-  "version": "0.21.4",
+  "version": "0.21.6",
   "license": "MIT",
   "description": "Build Chatbots using React",
   "main": "src/index.js",
@@ -29,7 +29,7 @@
     "README.md"
   ],
   "dependencies": {
-    "@botonic/core": "~0.21.5",
+    "@botonic/core": "^0.21.6",
     "axios": "^0.24.0",
     "emoji-picker-react": "^3.2.3",
     "framer-motion": "^3.1.1",
@@ -42,14 +42,14 @@
     "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": {

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/pic.jsx

@@ -2,6 +2,7 @@ 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.img`
@@ -15,6 +16,7 @@ const PicStyled = styled.img`
 `
 
 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/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
+}