@botonic/react 0.20.6 → 0.20.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botonic/react",
-  "version": "0.20.6",
+  "version": "0.20.8",
   "license": "MIT",
   "description": "Build Chatbots using React",
   "main": "src/index.js",
@@ -43,7 +43,6 @@
     "react-reveal": "^1.2.2",
     "react-router-dom": "^5.2.1",
     "react-textarea-autosize": "^7.1.2",
-    "react-use-storage": "^0.5.1",
     "reconnecting-websocket": "^4.4.0",
     "simplebar-react": "^2.3.3",
     "styled-components": "^5.3.0",

package/src/components/image.jsx

@@ -26,7 +26,7 @@ export const Image = props => {
   const closePreviewer = () => setIsPreviewerOpened(false)
 
   const { getThemeProperty } = useContext(WebchatContext)
-  const imagePreviewer = getThemeProperty(
+  const ImagePreviewer = getThemeProperty(
     WEBCHAT.CUSTOM_PROPERTIES.imagePreviewer,
     null
   )
@@ -36,15 +36,16 @@ export const Image = props => {
         <StyledImage
           src={props.src}
           onClick={openPreviewer}
-          hasPreviewer={Boolean(imagePreviewer)}
+          hasPreviewer={Boolean(ImagePreviewer)}
         />
-        {imagePreviewer &&
-          imagePreviewer({
-            src: props.src,
-            isPreviewerOpened,
-            openPreviewer,
-            closePreviewer,
-          })}
+        {ImagePreviewer && (
+          <ImagePreviewer
+            src={props.src}
+            isPreviewerOpened={isPreviewerOpened}
+            openPreviewer={openPreviewer}
+            closePreviewer={closePreviewer}
+          />
+        )}
       </>
     )
   }

package/src/components/timestamps.jsx

@@ -52,8 +52,9 @@ const TimestampText = styled.div`
 `
 
 export const MessageTimestamp = ({ timestamp, style, isfromuser }) => {
+  const classSufix = isfromuser ? 'user' : 'bot'
   return (
-    <TimestampContainer>
+    <TimestampContainer className={`botonic-timestamp-${classSufix}`}>
       <TimestampText
         isfromuser={isfromuser}
         style={{

package/src/webchat/use-storage-state-hook.js

@@ -1,9 +1,44 @@
-import { useLocalStorage, useSessionStorage } from 'react-use-storage'
-
-export function useStorageState(storage, storageKey) {
-  const [botonicLocalState, saveLocalState] = useLocalStorage(storageKey)
-  const [botonicSessionState, saveSessionState] = useSessionStorage(storageKey)
-  if (storage === null) return [undefined, undefined]
-  if (storage === sessionStorage) return [botonicSessionState, saveSessionState]
-  return [botonicLocalState, saveLocalState]
+import { useCallback, useEffect, useState } from 'react'
+
+//Code taken from https://github.com/leny/react-use-storage
+const evtTarget = new EventTarget()
+
+export function useStorageState(storage, key, defaultValue) {
+  const raw = storage?.getItem(key)
+
+  const [value, setValue] = useState(raw ? JSON.parse(raw) : defaultValue)
+
+  const updater = useCallback(
+    (updatedValue, remove = false) => {
+      setValue(updatedValue)
+      storage[remove ? 'removeItem' : 'setItem'](
+        key,
+        JSON.stringify(updatedValue)
+      )
+      evtTarget.dispatchEvent(
+        new CustomEvent('storage_change', { detail: { key } })
+      )
+    },
+    [key]
+  )
+
+  defaultValue != null && !raw && updater(defaultValue)
+
+  useEffect(() => {
+    const listener = ({ detail }) => {
+      if (detail.key === key) {
+        const lraw = storage?.getItem(key)
+
+        lraw !== raw && setValue(JSON.parse(lraw))
+      }
+    }
+
+    evtTarget.addEventListener('storage_change', listener)
+    return () => evtTarget.removeEventListener('storage_change', listener)
+  })
+
+  if (storage === null) {
+    return [undefined, undefined]
+  }
+  return [value, updater, () => updater(null, true)]
 }