feat(react): add imagePreviewer property in theme and allow rendering…

… custom components in webchat (#2030)

* feat(react): working image preview modal

* feat(react): botonic API to allow open/close modal with custom modal content

* chore(eact): add types for modals

* fix(react): correct styles for large images

* wip: zoom in/zoom out func

* wip: photoswipe working

* chore(react): remove share and full-screen

* wip

* wip(react): setting custom property for imagePreviewer

* feat(react): working previewer feature

* refactor(react): rename names to not be only bind to imagePreviewer and to be generic

packages/botonic-react/src/components/image.jsx

@@ -1,15 +1,17 @@
 import { INPUT, isBrowser } from '@botonic/core'
-import React from 'react'
+import React, { useContext, useState } from 'react'
 import styled from 'styled-components'
 
-import { ROLES } from '../constants'
+import { ROLES, WEBCHAT } from '../constants'
+import { WebchatContext } from '../contexts'
 import { Message } from './message'
 
 const StyledImage = styled.img`
   border-radius: 8px;
   max-width: 150px;
   max-height: 150px;
-  margin: 10px;
+  margin: -3px -6px;
+  cursor: ${({ hasPreviewer }) => (hasPreviewer ? 'pointer' : 'auto')};
 `
 
 const serialize = imageProps => {
@@ -18,7 +20,34 @@ const serialize = imageProps => {
 
 export const Image = props => {
   let content = props.children
-  if (isBrowser()) content = <StyledImage src={props.src} />
+
+  const [isPreviewerOpened, setIsPreviewerOpened] = useState(false)
+  const openPreviewer = () => setIsPreviewerOpened(true)
+  const closePreviewer = () => setIsPreviewerOpened(false)
+
+  const { getThemeProperty } = useContext(WebchatContext)
+  const imagePreviewer = getThemeProperty(
+    WEBCHAT.CUSTOM_PROPERTIES.imagePreviewer,
+    null
+  )
+  if (isBrowser()) {
+    content = (
+      <>
+        <StyledImage
+          src={props.src}
+          onClick={openPreviewer}
+          hasPreviewer={Boolean(imagePreviewer)}
+        />
+        {imagePreviewer &&
+          imagePreviewer({
+            src: props.src,
+            isPreviewerOpened,
+            openPreviewer,
+            closePreviewer,
+          })}
+      </>
+    )
+  }
   return (
     <Message
       role={ROLES.IMAGE_MESSAGE}

packages/botonic-react/src/constants.js

@@ -65,6 +65,7 @@ export const WEBCHAT = {
     enableAnimations: 'animations.enable',
     markdownStyle: 'markdownStyle',
     scrollbar: 'scrollbar',
+    imagePreviewer: 'imagePreviewer',
     // Mobile
     mobileBreakpoint: 'mobileBreakpoint',
     mobileStyle: 'mobileStyle',

packages/botonic-react/src/index.d.ts

@@ -204,6 +204,8 @@ export class WebchatApp {
   updateLastMessageDate(date: string): void
   updateUser(user: core.SessionUser): void
   updateWebchatSettings(settings: WebchatSettingsProps): void
+  renderCustomComponent(customComponent: React.ReactNode): void
+  unmountCustomComponent(): void
 }
 
 export interface WebchatContextProps {

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

@@ -211,6 +211,14 @@ export class WebchatApp {
     this.webchatRef.current.closeCoverComponent()
   }
 
+  renderCustomComponent(_customComponent) {
+    this.webchatRef.current.renderCustomComponent(_customComponent)
+  }
+
+  unmountCustomComponent() {
+    this.webchatRef.current.unmountCustomComponent()
+  }
+
   toggleCoverComponent() {
     this.webchatRef.current.toggleCoverComponent()
   }

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

@@ -14,6 +14,7 @@ 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 DO_RENDER_CUSTOM_COMPONENT = 'doRenderCustomComponent'
 export const SET_ERROR = 'setError'
 export const CLEAR_MESSAGES = 'clearMessages'
 export const UPDATE_LAST_MESSAGE_DATE = 'updateLastMessageDate'

packages/botonic-react/src/webchat/hooks.js

@@ -6,6 +6,7 @@ import {
   ADD_MESSAGE,
   ADD_MESSAGE_COMPONENT,
   CLEAR_MESSAGES,
+  DO_RENDER_CUSTOM_COMPONENT,
   SET_CURRENT_ATTACHMENT,
   SET_ERROR,
   SET_ONLINE,
@@ -59,6 +60,7 @@ export const webchatInitialState = {
   isEmojiPickerOpen: false,
   isPersistentMenuOpen: false,
   isCoverComponentOpen: false,
+  isCustomComponentRendered: false,
   lastMessageUpdate: undefined,
   currentAttachment: undefined,
   jwt: null,
@@ -137,6 +139,11 @@ export function useWebchat() {
       type: TOGGLE_COVER_COMPONENT,
       payload: toggle,
     })
+  const doRenderCustomComponent = toggle =>
+    webchatDispatch({
+      type: DO_RENDER_CUSTOM_COMPONENT,
+      payload: toggle,
+    })
   const setError = error =>
     webchatDispatch({
       type: SET_ERROR,
@@ -192,6 +199,7 @@ export function useWebchat() {
     toggleEmojiPicker,
     togglePersistentMenu,
     toggleCoverComponent,
+    doRenderCustomComponent,
     setError,
     setOnline,
     clearMessages,

packages/botonic-react/src/webchat/webchat-reducer.js

@@ -1,4 +1,5 @@
 import {
+  DO_RENDER_CUSTOM_COMPONENT,
   SET_CURRENT_ATTACHMENT,
   SET_ERROR,
   SET_ONLINE,
@@ -18,6 +19,7 @@ import {
 } from './actions'
 import { messagesReducer } from './messages-reducer'
 
+// eslint-disable-next-line complexity
 export function webchatReducer(state, action) {
   switch (action.type) {
     case UPDATE_WEBVIEW:
@@ -41,6 +43,8 @@ export function webchatReducer(state, action) {
       return { ...state, isPersistentMenuOpen: action.payload }
     case TOGGLE_COVER_COMPONENT:
       return { ...state, isCoverComponentOpen: action.payload }
+    case DO_RENDER_CUSTOM_COMPONENT:
+      return { ...state, isCustomComponentRendered: action.payload }
     case SET_ERROR:
       return { ...state, error: action.payload || {} }
     case SET_ONLINE:

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

@@ -6,6 +6,7 @@ import React, {
   useEffect,
   useImperativeHandle,
   useRef,
+  useState,
 } from 'react'
 import Textarea from 'react-textarea-autosize'
 import styled, { StyleSheetManager } from 'styled-components'
@@ -183,6 +184,7 @@ export const Webchat = forwardRef((props, ref) => {
     toggleEmojiPicker,
     togglePersistentMenu,
     toggleCoverComponent,
+    doRenderCustomComponent,
     setError,
     setOnline,
     clearMessages,
@@ -199,6 +201,7 @@ export const Webchat = forwardRef((props, ref) => {
   const { initialSession, initialDevSettings, onStateChange } = props
   const getThemeProperty = _getThemeProperty(theme)
 
+  const [customComponent, setCustomComponent] = useState(null)
   const storage = props.storage === undefined ? localStorage : props.storage
   const storageKey =
     typeof props.storageKey === 'function'
@@ -559,6 +562,11 @@ export const Webchat = forwardRef((props, ref) => {
     toggleWebchat: () => toggleWebchat(!webchatState.isWebchatOpen),
     openCoverComponent: () => toggleCoverComponent(true),
     closeCoverComponent: () => toggleCoverComponent(false),
+    renderCustomComponent: _customComponent => {
+      setCustomComponent(_customComponent)
+      doRenderCustomComponent(true)
+    },
+    unmountCustomComponent: () => doRenderCustomComponent(false),
     toggleCoverComponent: () =>
       toggleCoverComponent(!webchatState.isCoverComponentOpen),
     openWebviewApi: component => openWebviewT(component),
@@ -886,6 +894,11 @@ export const Webchat = forwardRef((props, ref) => {
     )
   }
 
+  const _renderCustomComponent = () => {
+    if (!customComponent) return <></>
+    else return customComponent
+  }
+
   const WebchatComponent = (
     <WebchatContext.Provider
       value={{
@@ -916,6 +929,7 @@ export const Webchat = forwardRef((props, ref) => {
           {triggerButton()}
         </div>
       )}
+
       {webchatState.isWebchatOpen && (
         <StyledWebchat
           // TODO: Distinguis between multiple instances of webchat, e.g. `${uniqueId}-botonic-webchat`
@@ -948,6 +962,9 @@ export const Webchat = forwardRef((props, ref) => {
           {!webchatState.handoff && userInputArea()}
           {webchatState.webview && webchatWebview()}
           {webchatState.isCoverComponentOpen && coverComponent()}
+          {webchatState.isCustomComponentRendered &&
+            customComponent &&
+            _renderCustomComponent()}
         </StyledWebchat>
       )}
     </WebchatContext.Provider>