@botonic/react 0.22.0-alpha.1 → 0.22.0-alpha.3

package/src/index-types.ts

@@ -0,0 +1,195 @@
+import type {
+  BotRequest as CoreBotRequest,
+  Input as CoreInput,
+  InputType as CoreInputType,
+  Plugin as CorePlugin,
+  Route as CoreRoute,
+  Routes as CoreRoutes,
+  Session as CoreSession,
+  SessionUser as CoreSessionUser,
+} from '@botonic/core/lib/esm/models/legacy-types'
+import React from 'react'
+
+import {
+  ButtonProps,
+  ReplyProps,
+  ThemeProps,
+  WebchatSettingsProps,
+  Webview,
+} from './components/index-types'
+import { WebchatState } from './webchat'
+
+/**
+ * See @botonic/core's Response for the description of the Response's semantics*/
+export interface BotResponse extends CoreBotRequest {
+  response: [React.ReactNode]
+}
+
+export interface Route extends CoreRoute {
+  action?: React.ComponentType<any>
+  retryAction?: React.ComponentType<any>
+}
+export type Routes = CoreRoutes<Route>
+
+// Parameters of the actions' botonicInit method
+export interface ActionRequest {
+  defaultDelay: number
+  defaultTyping: number
+  input: CoreInput
+  lastRoutePath: string
+  params: { [key: string]: string }
+  plugins: { [id: string]: CorePlugin }
+  session: CoreSession
+}
+
+export interface RequestContextInterface extends ActionRequest {
+  getString: (stringId: string) => string
+  setLocale: (locale: string) => string
+}
+
+export interface CustomMessageType {
+  customTypeName: string
+}
+
+// TODO: Reuse types to be reused in respective components
+// export class WebchatApp {
+//   constructor(options: WebchatAppArgs)
+//   addBotMessage(message: WebchatMessage): void
+//   addBotText(text: string): void
+//   addUserMessage(message: WebchatMessage): void
+//   addUserPayload(payload: string): void
+//   addUserText(text: string): void
+//   clearMessages(): void
+//   close(): void
+//   closeCoverComponent(): void
+//   destroy(): void
+//   getComponent(
+//     host: HTMLElement,
+//     optionsAtRuntime?: WebchatAppArgs
+//   ): React.ForwardRefExoticComponent<any>
+//   getLastMessageUpdate(): string
+//   getMessages(): WebchatMessage[]
+//   getVisibility(): Promise<boolean>
+//   isWebchatVisible({ appId: string }): Promise<boolean>
+//   onCloseWebchat(args: any): void
+//   onInitWebchat(args: any): void
+//   onOpenWebchat(args: any): void
+//   onServiceEvent(event: Event): void
+//   onStateChange(args: OnStateChangeArgs): void
+//   onUserInput(args: OnUserInputArgs): Promise<void>
+//   open(): void
+//   openCoverComponent(): void
+//   render(dest?: HTMLElement, optionsAtRuntime?: WebchatAppArgs): void
+//   resendUnsentInputs(): Promise<void>
+//   resolveWebchatVisibility(optionsAtRuntime: {
+//     appId: string
+//     visibility: () => boolean
+//   }): Promise<boolean>
+//   setTyping(enable: boolean): void
+//   toggle(): void
+//   toggleCoverComponent(): void
+//   updateMessageInfo(msgId: string, messageInfo: MessageInfo): void
+//   updateLastMessageDate(date: string): void
+//   updateUser(user: Partial<CoreSessionUser>): void
+//   updateWebchatSettings(settings: WebchatSettingsProps): void
+//   renderCustomComponent(customComponent: React.ReactNode): void
+//   unmountCustomComponent(): void
+// }
+
+// export interface WebchatArgs {
+//   blockInputs?: BlockInputOption[]
+//   coverComponent?: CoverComponentOptions
+//   defaultDelay?: number
+//   defaultTyping?: number
+//   enableAnimations?: boolean
+//   enableAttachments?: boolean
+//   enableEmojiPicker?: boolean
+//   enableUserInput?: boolean
+//   shadowDOM?: boolean | (() => boolean)
+//   hostId?: string
+//   getString?: (stringId: string, session: CoreSession) => string
+//   onClose?: (app: WebchatApp, args: any) => void
+//   onInit?: (app: WebchatApp, args: any) => void
+//   onMessage?: (app: WebchatApp, message: WebchatMessage) => void
+//   onOpen?: (app: WebchatApp, args: any) => void
+//   onConnectionChange?: (app: WebchatApp, isOnline: boolean) => void
+//   persistentMenu?: PersistentMenuTheme
+//   storage?: Storage | null
+//   storageKey?: any
+//   theme?: ThemeProps
+// }
+
+// export interface WebchatAppArgs extends WebchatArgs {
+export interface WebchatAppArgs {
+  appId?: string
+  visibility?: () => boolean
+}
+
+export interface WebchatMessage {
+  ack: 0 | 1
+  buttons: ButtonProps[]
+  data: any
+  delay: number
+  display: boolean
+  from: 'user' | 'bot'
+  id: string
+  markdown: boolean
+  replies: ReplyProps[]
+  timestamp: string
+  type: CoreInputType
+  typing: number
+}
+
+export interface OnUserInputArgs {
+  input: CoreInput
+  lastRoutePath?: string
+  session?: CoreSession
+  user: CoreSessionUser
+}
+
+export interface OnStateChangeArgs {
+  messagesJSON: WebchatMessage[]
+  user: CoreSessionUser
+}
+
+export interface MessageInfo {
+  data: any | 'typing_on'
+  id: string
+  type: 'update_webchat_settings' | 'sender_action'
+}
+
+export interface Event {
+  action?: 'update_message_info'
+  isError?: boolean
+  message?: MessageInfo
+}
+
+export interface WebchatContextProps {
+  sendText: (text: string, payload?: string) => void
+  sendAttachment: (attachment: File) => void
+  sendPayload: (payload: string) => void
+  sendInput: (input: CoreInput) => void
+  openWebview: (webviewComponent: Webview) => void
+  addMessage: (message: WebchatMessage) => void
+  updateMessage: (message: WebchatMessage) => void
+  updateReplies: (replies: boolean) => void
+  updateLatestInput: (input: CoreInput) => void
+  closeWebview: () => void
+  toggleWebchat: () => void
+  getThemeProperty: (property: string, defaultValue?: string) => any
+  resolveCase: () => void
+  theme: ThemeProps
+  webchatState: WebchatState
+  updateWebchatDevSettings: (settings: WebchatSettingsProps) => void
+  updateUser: (user: Partial<CoreSessionUser>) => void
+}
+
+// export class DevApp extends WebchatApp {
+//   constructor(args: WebchatAppArgs)
+//   onUserInput(args: OnUserInputArgs): Promise<void>
+//   render(dest: HTMLElement, optionsAtRuntime: WebchatAppArgs): void
+// }
+
+export * from './components'
+export * from './util'
+export * from './webchat'

package/src/{index.js → index.ts}

@@ -1,10 +1,11 @@
 export { BotonicInputTester, BotonicOutputTester } from './botonic-tester'
-export * from './components'
+// export * from './components'
 export { RequestContext, WebchatContext } from './contexts'
 export { DevApp } from './dev-app'
+export * from './index-types'
 export { msgsToBotonic, msgToBotonic } from './msg-to-botonic'
 export { NodeApp } from './node-app'
-export { staticAsset } from './util/environment'
-export { getBotonicApp, Webchat } from './webchat/index.js'
+export * from './util'
+// export { getBotonicApp, Webchat } from './webchat/index'
 export { WebchatApp } from './webchat-app'
 export { WebviewApp } from './webview-app'

package/src/message-utils.js

@@ -1,4 +1,4 @@
-import { INPUT } from '@botonic/core'
+import { INPUT } from '@botonic/core/lib/esm/models/legacy-types'
 
 import { MAX_ALLOWED_SIZE_MB, MIME_WHITELIST } from './constants'
 

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 './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/react-bot.jsx

@@ -1,4 +1,4 @@
-import { CoreBot } from '@botonic/core'
+import { CoreBot } from '@botonic/core/lib/esm'
 import React from 'react'
 
 import { Text } from './components/text'

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/index.ts

@@ -0,0 +1,8 @@
+export * from './dom'
+export * from './environment'
+export * from './error-boundary'
+export * from './logs'
+export * from './objects'
+export * from './react'
+export * from './regexs'
+export * from './webchat'

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()
     }

package/src/webchat/{index.d.ts → index-types.ts}

@@ -1,9 +1,10 @@
-import * as core from '@botonic/core'
-import * as React from 'react'
+import type {
+  Input as CoreInput,
+  Session as CoreSession,
+} from '@botonic/core/lib/esm/models/legacy-types'
 import { RefObject } from 'react'
 
-import { Reply, Webview } from '../components/index'
-import { Message, WebchatApp, WebchatArgs } from '../index'
+import { Webview } from '../components/index-types'
 
 export interface WebchatStateTheme {
   headerTitle: string
@@ -20,13 +21,13 @@ export interface WebchatState {
   width: number
   height: number
   messagesJSON: any[]
-  messagesComponents: Message[]
-  replies: Reply[]
-  latestInput: Partial<core.Input>
+  messagesComponents: any[]
+  replies: any[]
+  latestInput: Partial<CoreInput>
   typing: boolean
   webview: Webview | null
   webviewParams: null
-  session: Partial<core.Session>
+  session: Partial<CoreSession>
   lastRoutePath: string | null
   handoff: boolean
   theme: WebchatStateTheme
@@ -41,11 +42,11 @@ export interface WebchatState {
   currentAttachment: File | undefined
 }
 
-export interface WebchatProps extends WebchatArgs {
+// export interface WebchatProps extends WebchatArgs {
+export interface WebchatProps {
   ref: RefObject<any>
   onConnectionRegained?: () => Promise<void>
 }
-export const WebChat: React.ForwardRefExoticComponent<WebchatProps>
 
 export interface WebchatDevProps extends WebchatProps {
   initialDevSettings?: {
@@ -53,9 +54,6 @@ export interface WebchatDevProps extends WebchatProps {
     showSessionView?: boolean
   }
 }
-export const WebChatDev: React.ForwardRefExoticComponent<WebchatDevProps>
-
-export function getBotonicApp(): WebchatApp
 
 export interface CoverComponentProps {
   closeComponent: () => void

package/src/webchat/{index.js → index.ts}

@@ -1,11 +1,11 @@
+// @ts-nocheck
 export { Webchat } from './webchat'
 export { WebchatDev } from './webchat-dev'
 
-/**
- * @returns {WebChatApp}
- */
 export function getBotonicApp() {
   // Botonic is exported from your bot
   // eslint-disable-next-line no-undef
   return Botonic
 }
+
+export * from './index-types'

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

@@ -1,9 +1,20 @@
 import { useCallback, useEffect, useState } from 'react'
 
-//Code taken from https://github.com/leny/react-use-storage
-const evtTarget = new EventTarget()
+// Code taken from https://github.com/leny/react-use-storage/blob/master/src/index.js
+const IS_BROWSER =
+  typeof window !== 'undefined' &&
+  typeof navigator !== 'undefined' &&
+  typeof document !== 'undefined'
 
 export function useStorageState(storage, key, defaultValue) {
+  let evtTarget
+
+  try {
+    evtTarget = new EventTarget()
+  } catch {
+    evtTarget = (IS_BROWSER ? document : {})?.createElement?.('phony')
+  }
+
   const raw = storage?.getItem(key)
 
   const [value, setValue] = useState(raw ? JSON.parse(raw) : defaultValue)

package/src/webchat/webchat.jsx

@@ -1,5 +1,4 @@
 import { INPUT, isMobile, params2queryString } from '@botonic/core'
-import { motion } from 'framer-motion'
 import merge from 'lodash.merge'
 import React, {
   forwardRef,
@@ -161,7 +160,7 @@ const DarkBackgroundMenu = styled.div`
   height: 100%;
 `
 
-// eslint-disable-next-line complexity
+// eslint-disable-next-line complexity, react/display-name
 export const Webchat = forwardRef((props, ref) => {
   const {
     webchatState,
@@ -372,8 +371,8 @@ export const Webchat = forwardRef((props, ref) => {
   const openWebview = (webviewComponent, params) =>
     updateWebview(webviewComponent, params)
 
-  const handleSelectedEmoji = (event, emojiObject) => {
-    textArea.current.value += emojiObject.emoji
+  const handleSelectedEmoji = event => {
+    textArea.current.value += event.emoji
     textArea.current.focus()
   }
 
@@ -712,8 +711,6 @@ export const Webchat = forwardRef((props, ref) => {
     }
   }, [webchatState.isWebchatOpen])
 
-  const textArea = useRef()
-
   const getTriggerImage = () => {
     const triggerImage = getThemeProperty(
       WEBCHAT.CUSTOM_PROPERTIES.triggerButtonImage,
@@ -768,6 +765,7 @@ export const Webchat = forwardRef((props, ref) => {
 
   const userInputEnabled = isUserInputEnabled()
 
+  const textArea = useRef(null)
   const userInputArea = () => {
     return (
       userInputEnabled && (
@@ -792,6 +790,7 @@ export const Webchat = forwardRef((props, ref) => {
 
           <TextAreaContainer>
             <Textarea
+              inputRef={textArea}
               name='text'
               onFocus={() => deviceAdapter.onFocus(host)}
               onBlur={() => deviceAdapter.onBlur()}
@@ -803,7 +802,6 @@ export const Webchat = forwardRef((props, ref) => {
                 WEBCHAT.DEFAULTS.PLACEHOLDER
               )}
               autoFocus={true}
-              inputRef={textArea}
               onKeyDown={e => onKeyDown(e)}
               onKeyUp={onKeyUp}
               style={{

package/src/webchat-app.jsx

@@ -1,4 +1,5 @@
-import { HubtypeService, INPUT } from '@botonic/core'
+import { HubtypeService } from '@botonic/core'
+import { INPUT } from '@botonic/core/lib/esm/models/legacy-types'
 import merge from 'lodash.merge'
 import React, { createRef } from 'react'
 import { render, unmountComponentAtNode } from 'react-dom'

package/src/webview-app.tsx

@@ -1,6 +1,6 @@
 // @ts-nocheck
-import type { PROVIDER } from '@botonic/core'
 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'