@botonic/react 0.31.0-alpha.2 → 0.31.0-alpha.3

package/src/webchat/webchat.jsx

@@ -44,6 +44,7 @@ import {
 import { ChatArea } from './chat-area'
 import { OpenedPersistentMenu } from './components/opened-persistent-menu'
 import { BotonicContainerId } from './constants'
+import { CoverComponent } from './cover-component'
 import { WebchatHeader } from './header'
 import {
   useComponentWillMount,
@@ -120,6 +121,7 @@ export const Webchat = forwardRef((props, ref) => {
     resetUnreadMessages,
     setCurrentAttachment,
     setError,
+    setIsInputFocused,
     setLastMessageVisible,
     setOnline,
     toggleCoverComponent,
@@ -203,7 +205,7 @@ export const Webchat = forwardRef((props, ref) => {
   const sendUserInput = async input => {
     if (props.onUserInput) {
       resetUnreadMessages()
-      scrollToBottom({ host })
+      scrollToBottom({ host }) // TODO: Remove param {host}
       props.onUserInput({
         user: webchatState.session.user,
         input: input,
@@ -367,7 +369,7 @@ export const Webchat = forwardRef((props, ref) => {
       if (getBlockInputs(rule, input.data)) {
         addMessageComponent(
           <Text
-            id={input.id}
+            id={input.id} //TODO: Remove id from Text component
             sentBy={SENDERS.user}
             blob={false}
             style={{
@@ -407,41 +409,23 @@ export const Webchat = forwardRef((props, ref) => {
         (props.coverComponent.component || props.coverComponent)
     )
   }
-  const CoverComponent = getCoverComponent()
-
-  const closeCoverComponent = () => {
-    toggleCoverComponent(false)
-  }
+  const coverComponent = getCoverComponent()
+  const coverComponentProps = props.coverComponent?.props
 
   useEffect(() => {
-    if (!CoverComponent) return
+    if (!coverComponent) return
     if (
       !botonicState ||
-      (botonicState.messages && botonicState.messages.length == 0)
+      (botonicState.messages && botonicState.messages.length === 0)
     )
       toggleCoverComponent(true)
   }, [])
 
-  const coverComponent = () => {
-    const coverComponentProps = getThemeProperty(
-      WEBCHAT.CUSTOM_PROPERTIES.coverComponentProps,
-      props.coverComponent && props.coverComponent.props
-    )
-
-    if (CoverComponent && webchatState.isCoverComponentOpen)
-      return (
-        <CoverComponent
-          closeComponent={closeCoverComponent}
-          {...coverComponentProps}
-        />
-      )
-    return null
-  }
-
   const messageComponentFromInput = input => {
     let messageComponent = null
     if (isText(input)) {
       messageComponent = (
+        //TODO: Remove id and payload from Text component
         <Text id={input.id} payload={input.payload} sentBy={SENDERS.user}>
           {input.data}
         </Text>
@@ -700,6 +684,7 @@ export const Webchat = forwardRef((props, ref) => {
         openWebview,
         resolveCase,
         resetUnreadMessages,
+        setIsInputFocused,
         setLastMessageVisible,
         sendAttachment,
         sendInput,
@@ -708,6 +693,7 @@ export const Webchat = forwardRef((props, ref) => {
         toggleWebchat,
         toggleEmojiPicker,
         togglePersistentMenu,
+        toggleCoverComponent,
         updateLatestInput,
         updateMessage,
         updateReplies,
@@ -744,36 +730,50 @@ export const Webchat = forwardRef((props, ref) => {
               toggleWebchat(false)
             }}
           />
-          {webchatState.error.message && (
-            <ErrorMessageContainer>
-              <ErrorMessage>{webchatState.error.message}</ErrorMessage>
-            </ErrorMessageContainer>
-          )}
-          <ChatArea />
 
-          {webchatState.isPersistentMenuOpen && (
-            <DarkenBackground component={persistentMenu()} />
-          )}
-          {!webchatState.handoff && userInputEnabled && (
-            <InputPanel
-              persistentMenu={props.persistentMenu}
-              enableEmojiPicker={props.enableEmojiPicker}
-              enableAttachments={props.enableAttachments}
-              handleAttachment={handleAttachment}
-              textareaRef={textareaRef}
-              host={host}
-              onUserInput={props.onUserInput}
+          {webchatState.isCoverComponentOpen ? (
+            <CoverComponent
+              component={coverComponent}
+              componentProps={coverComponentProps}
             />
+          ) : (
+            <>
+              {webchatState.error.message && (
+                <ErrorMessageContainer>
+                  <ErrorMessage>{webchatState.error.message}</ErrorMessage>
+                </ErrorMessageContainer>
+              )}
+
+              <ChatArea />
+
+              {webchatState.isPersistentMenuOpen && (
+                <DarkenBackground component={persistentMenu()} />
+              )}
+
+              {!webchatState.handoff && userInputEnabled && (
+                <InputPanel
+                  persistentMenu={props.persistentMenu}
+                  enableEmojiPicker={props.enableEmojiPicker}
+                  enableAttachments={props.enableAttachments}
+                  handleAttachment={handleAttachment}
+                  textareaRef={textareaRef}
+                  host={host}
+                  onUserInput={props.onUserInput}
+                />
+              )}
+
+              {webchatState.webview && webchatWebview()}
+
+              {webchatState.isCustomComponentRendered &&
+                customComponent &&
+                _renderCustomComponent()}
+            </>
           )}
-          {webchatState.webview && webchatWebview()}
-          {webchatState.isCoverComponentOpen && coverComponent()}
-          {webchatState.isCustomComponentRendered &&
-            customComponent &&
-            _renderCustomComponent()}
         </StyledWebchat>
       )}
     </WebchatContext.Provider>
   )
+
   return props.shadowDOM ? (
     <StyleSheetManager target={host}>{WebchatComponent}</StyleSheetManager>
   ) : (

package/src/{webchat-app.jsx → webchat-app.tsx}

@@ -1,15 +1,128 @@
-import { HubtypeService, INPUT } from '@botonic/core'
+import { HubtypeService, INPUT, Input, ServerConfig } from '@botonic/core'
 import merge from 'lodash.merge'
 import React, { createRef } from 'react'
-import { createRoot } from 'react-dom/client'
-
+import { createRoot, Root } from 'react-dom/client'
+
+import {
+  BlockInputOption,
+  CoverComponentOptions,
+  PersistentMenuTheme,
+  ThemeProps,
+  WebchatSettingsProps,
+} from './components/index-types'
 import { WEBCHAT } from './constants'
-import { SENDERS, Typing } from './index-types'
+import { CloseWebviewOptions } from './contexts'
+import {
+  ActionRequest,
+  EventArgs,
+  SENDERS,
+  Typing,
+  WebchatMessage,
+} from './index-types'
 import { msgToBotonic } from './msg-to-botonic'
 import { isShadowDOMSupported, onDOMLoaded } from './util/dom'
+import { ErrorMessage } from './webchat/index-types'
 import { Webchat } from './webchat/webchat'
 
+export interface WebchatAppProps {
+  theme?: ThemeProps
+  persistentMenu?: PersistentMenuTheme
+  coverComponent?: CoverComponentOptions
+  blockInputs?: BlockInputOption[]
+  enableEmojiPicker?: boolean
+  enableAttachments?: boolean
+  enableUserInput?: boolean
+  enableAnimations?: boolean
+  hostId?: string
+  shadowDOM?: boolean | (() => boolean)
+  defaultDelay?: number
+  defaultTyping?: number
+  storage?: Storage | null
+  storageKey?: string
+  onInit?: (app: WebchatApp, args: any) => void
+  onOpen?: (app: WebchatApp, args: any) => void
+  onClose?: (app: WebchatApp, args: any) => void
+  onMessage?: (app: WebchatApp, message: WebchatMessage) => void
+  onTrackEvent?: (
+    request: ActionRequest,
+    eventName: string,
+    args?: EventArgs
+  ) => Promise<void>
+  onConnectionChange?: (app: WebchatApp, isOnline: boolean) => void
+  appId?: string
+  visibility?: boolean | (() => boolean) | 'dynamic'
+  server?: ServerConfig
+}
+
+interface WebchatRef {
+  addBotResponse: ({
+    response,
+    session,
+    lastRoutePath,
+  }: AddBotResponseArgs) => void
+  setTyping: (typing: boolean) => void
+  addUserMessage: (message: any) => Promise<void>
+  updateUser: (userToUpdate: any) => void
+  openWebchat: () => void
+  closeWebchat: () => void
+  toggleWebchat: () => void
+  openCoverComponent: () => void
+  closeCoverComponent: () => void
+  renderCustomComponent: (customComponent: any) => void
+  unmountCustomComponent: () => void
+  toggleCoverComponent: () => void
+  openWebviewApi: (component: any) => void
+  setError: (error: ErrorMessage) => void
+  setOnline: (online: boolean) => void
+  getMessages: () => { id: string; ack: number; unsentInput: Input }[] // TODO: define MessagesJSON
+  isOnline: () => boolean
+  clearMessages: () => void
+  getLastMessageUpdate: () => string
+  updateMessageInfo: (msgId: string, messageInfo: any) => void
+  updateWebchatSettings: (settings: WebchatSettingsProps) => void
+  closeWebview: (options?: CloseWebviewOptions) => Promise<void>
+}
+
+interface AddBotResponseArgs {
+  response: any
+  session?: any
+  lastRoutePath?: any
+}
+
 export class WebchatApp {
+  public theme?: ThemeProps
+  public persistentMenu?: PersistentMenuTheme
+  public coverComponent?: CoverComponentOptions
+  public blockInputs?: BlockInputOption[]
+  public enableEmojiPicker?: boolean
+  public enableAttachments?: boolean
+  public enableUserInput?: boolean
+  public enableAnimations?: boolean
+  public hostId?: string
+  public shadowDOM?: boolean | (() => boolean)
+  public defaultDelay?: number
+  public defaultTyping?: number
+  public storage?: Storage | null
+  public storageKey: string
+  public onInit?: (app: WebchatApp, args: any) => void
+  public onOpen?: (app: WebchatApp, args: any) => void
+  public onClose?: (app: WebchatApp, args: any) => void
+  public onMessage?: (app: WebchatApp, message: WebchatMessage) => void
+  public onTrackEvent?: (
+    request: ActionRequest,
+    eventName: string,
+    args?: EventArgs
+  ) => Promise<void>
+  public onConnectionChange?: (app: WebchatApp, isOnline: boolean) => void
+  public appId?: string
+  public visibility?: boolean | (() => boolean) | 'dynamic'
+  public server?: ServerConfig
+  public webchatRef: React.RefObject<WebchatRef | null>
+
+  private reactRoot: Root | null = null
+  private host: (HTMLElement | null) | ShadowRoot = null
+  private hubtypeService: HubtypeService
+
   constructor({
     theme = {},
     persistentMenu,
@@ -19,8 +132,8 @@ export class WebchatApp {
     enableAttachments,
     enableUserInput,
     enableAnimations,
-    hostId,
-    shadowDOM,
+    hostId = 'root',
+    shadowDOM = false,
     defaultDelay,
     defaultTyping,
     storage,
@@ -34,7 +147,7 @@ export class WebchatApp {
     appId,
     visibility,
     server,
-  }) {
+  }: WebchatAppProps) {
     this.theme = theme
     this.persistentMenu = persistentMenu
     this.coverComponent = coverComponent
@@ -43,13 +156,15 @@ export class WebchatApp {
     this.enableAttachments = enableAttachments
     this.enableUserInput = enableUserInput
     this.enableAnimations = enableAnimations
+
     this.shadowDOM = Boolean(
       typeof shadowDOM === 'function' ? shadowDOM() : shadowDOM
     )
     if (this.shadowDOM && !isShadowDOMSupported()) {
       console.warn('[botonic] ShadowDOM not supported on this browser')
       this.shadowDOM = false
-    }
+    } // Review this
+
     this.hostId = hostId || WEBCHAT.DEFAULTS.HOST_ID
     this.defaultDelay = defaultDelay
     this.defaultTyping = defaultTyping
@@ -63,12 +178,14 @@ export class WebchatApp {
     this.onConnectionChange = onConnectionChange
     this.visibility = visibility
     this.server = server
-    this.webchatRef = createRef()
+    this.webchatRef = createRef<WebchatRef>()
     this.appId = appId
+
+    this.host = null
     this.reactRoot = null
   }
 
-  createRootElement(host) {
+  createRootElement(host: HTMLElement | null) {
     // Create root element <div id='root'> if not exists
     // Create shadowDOM to root element if needed
     if (host) {
@@ -79,45 +196,63 @@ export class WebchatApp {
           )
           this.hostId = host.id
         }
-      } else if (host.id) this.hostId = host.id
-      else if (this.hostId) host.id = this.hostId
+      } else if (host.id) {
+        this.hostId = host.id
+      } else if (this.hostId) {
+        host.id = this.hostId
+      }
     } else {
-      host = document.getElementById(this.hostId)
+      host = this.hostId ? document.getElementById(this.hostId) : null
     }
+
     if (!host) {
       host = document.createElement('div')
-      host.id = this.hostId
-      if (document.body.firstChild)
+      host.id = this.hostId!
+      if (document.body.firstChild) {
         document.body.insertBefore(host, document.body.firstChild)
-      else document.body.appendChild(host)
+      } else {
+        document.body.appendChild(host)
+      }
     }
     this.host = this.shadowDOM ? host.attachShadow({ mode: 'open' }) : host
   }
 
-  getReactMountNode(node) {
+  getReactMountNode(
+    node?: (HTMLElement | null) | ShadowRoot
+  ): Element | DocumentFragment {
     if (!node) {
       node = this.host
     }
-    return node.shadowRoot ? node.shadowRoot : node
+
+    if (node === null) {
+      throw new Error('Host element not found')
+    }
+
+    // TODO: Review logic of ShadowRoot
+    if ('shadowRoot' in node && node.shadowRoot !== null) {
+      return node.shadowRoot
+    }
+
+    return node
   }
 
-  onInitWebchat(...args) {
+  onInitWebchat(...args: [any]) {
     this.onInit && this.onInit(this, ...args)
   }
 
-  onOpenWebchat(...args) {
+  onOpenWebchat(...args: [any]) {
     this.onOpen && this.onOpen(this, ...args)
   }
 
-  onCloseWebchat(...args) {
+  onCloseWebchat(...args: [any]) {
     this.onClose && this.onClose(this, ...args)
   }
 
   async onUserInput({ user, input }) {
     this.onMessage &&
       this.onMessage(this, {
+        ...input,
         sentBy: SENDERS.user,
-        message: input,
         isUnread: false,
       })
     return this.hubtypeService.postMessage(user, input)
@@ -133,19 +268,19 @@ export class WebchatApp {
     const lastMessageUpdateDate = this.getLastMessageUpdate()
     if (this.hubtypeService) {
       this.hubtypeService.lastMessageId = lastMessageId
-      this.hubtypeService.lastMessageUpdateDate = lastMessageUpdateDate
+      this.hubtypeService.lastMessageUpdateDate = lastMessageUpdateDate!
     } else if (!this.hubtypeService && user) {
       this.hubtypeService = new HubtypeService({
-        appId: this.appId,
+        appId: this.appId!,
         user,
         lastMessageId,
-        lastMessageUpdateDate,
-        onEvent: event => this.onServiceEvent(event),
+        lastMessageUpdateDate: lastMessageUpdateDate!,
+        onEvent: (event: any) => this.onServiceEvent(event),
         unsentInputs: () =>
           this.webchatRef.current
-            .getMessages()
-            .filter(msg => msg.ack === 0 && msg.unsentInput),
-        server: this.server,
+            ?.getMessages()
+            .filter(msg => msg.ack === 0 && msg.unsentInput) || [],
+        server: this.server!,
       })
     }
   }
@@ -153,7 +288,7 @@ export class WebchatApp {
   onServiceEvent(event) {
     if (event.action === 'connectionChange') {
       this.onConnectionChange && this.onConnectionChange(this, event.online)
-      this.webchatRef.current.setOnline(event.online)
+      this.webchatRef.current?.setOnline(event.online)
     } else if (event.action === 'update_message_info') {
       this.updateMessageInfo(event.message.id, event.message)
     } else if (event.message?.type === 'update_webchat_settings') {
@@ -162,115 +297,122 @@ export class WebchatApp {
       this.setTyping(event.message.data === Typing.On)
     } else {
       this.onMessage &&
-        this.onMessage(this, { sentBy: SENDERS.bot, message: event.message })
+        this.onMessage(this, {
+          sentBy: SENDERS.bot,
+          ...event.message,
+        } as WebchatMessage)
       this.addBotMessage(event.message)
     }
   }
 
-  updateUser(user) {
-    this.webchatRef.current.updateUser(user)
+  updateUser(user: any) {
+    this.webchatRef.current?.updateUser(user)
   }
 
-  addBotMessage(message) {
+  addBotMessage(message: any) {
     message.ack = 0
     message.isUnread = true
     message.sentBy = message.sent_by?.split('message_sent_by_')[1]
     delete message.sent_by
     const response = msgToBotonic(
       message,
-      this.theme.message?.customTypes || this.theme.customMessageTypes
+      // TODO: Review if is neded allow declar customTypes inseide and ouside theme
+      // @ts-ignore
+      this.theme?.message?.customTypes || this.theme?.customMessageTypes || []
     )
 
-    this.webchatRef.current.addBotResponse({
+    this.webchatRef.current?.addBotResponse({
       response,
     })
   }
 
-  addBotText(text) {
+  addBotText(text: string) {
     this.addBotMessage({ type: INPUT.TEXT, data: text })
   }
 
-  addUserMessage(message) {
-    this.webchatRef.current.addUserMessage(message)
+  addUserMessage(message: any) {
+    this.webchatRef.current?.addUserMessage(message)
   }
 
-  addUserText(text) {
+  addUserText(text: string) {
     this.addUserMessage({ type: INPUT.TEXT, data: text })
   }
 
-  addUserPayload(payload) {
+  addUserPayload(payload: string) {
     this.addUserMessage({ type: INPUT.POSTBACK, payload })
   }
 
-  setTyping(typing) {
-    this.webchatRef.current.setTyping(typing)
+  setTyping(typing: boolean) {
+    this.webchatRef.current?.setTyping(typing)
   }
 
   open() {
-    this.webchatRef.current.openWebchat()
+    this.webchatRef.current?.openWebchat()
   }
 
   close() {
-    this.webchatRef.current.closeWebchat()
+    this.webchatRef.current?.closeWebchat()
   }
 
-  async closeWebview() {
-    await this.webchatRef.current.closeWebview()
+  async closeWebview(options?: CloseWebviewOptions) {
+    await this.webchatRef.current?.closeWebview(options)
   }
 
+  // TODO: Remove this function because we have open and close functions
   toggle() {
-    this.webchatRef.current.toggleWebchat()
+    this.webchatRef.current?.toggleWebchat()
   }
 
   openCoverComponent() {
-    this.webchatRef.current.openCoverComponent()
+    this.webchatRef.current?.openCoverComponent()
   }
 
   closeCoverComponent() {
-    this.webchatRef.current.closeCoverComponent()
+    this.webchatRef.current?.closeCoverComponent()
   }
 
-  renderCustomComponent(_customComponent) {
-    this.webchatRef.current.renderCustomComponent(_customComponent)
+  renderCustomComponent(_customComponent: any) {
+    this.webchatRef.current?.renderCustomComponent(_customComponent)
   }
 
   unmountCustomComponent() {
-    this.webchatRef.current.unmountCustomComponent()
+    this.webchatRef.current?.unmountCustomComponent()
   }
 
+  // TODO: Remove this function because we have openCoverComponent and closeCoverComponent functions
   toggleCoverComponent() {
-    this.webchatRef.current.toggleCoverComponent()
+    this.webchatRef.current?.toggleCoverComponent()
   }
 
   getMessages() {
-    return this.webchatRef.current.getMessages()
+    return this.webchatRef.current?.getMessages()
   }
 
   clearMessages() {
-    this.webchatRef.current.clearMessages()
+    this.webchatRef.current?.clearMessages()
   }
 
   async getVisibility() {
     return this.resolveWebchatVisibility({
-      appId: this.appId,
+      appId: this.appId!,
       visibility: this.visibility,
     })
   }
 
   getLastMessageUpdate() {
-    return this.webchatRef.current.getLastMessageUpdate()
+    return this.webchatRef.current?.getLastMessageUpdate()
   }
 
-  updateMessageInfo(msgId, messageInfo) {
-    return this.webchatRef.current.updateMessageInfo(msgId, messageInfo)
+  updateMessageInfo(msgId: string, messageInfo: any) {
+    return this.webchatRef.current?.updateMessageInfo(msgId, messageInfo)
   }
 
-  updateWebchatSettings(settings) {
-    return this.webchatRef.current.updateWebchatSettings(settings)
+  updateWebchatSettings(settings: WebchatSettingsProps) {
+    return this.webchatRef.current?.updateWebchatSettings(settings)
   }
 
   // eslint-disable-next-line complexity
-  getComponent(host, optionsAtRuntime = {}) {
+  getComponent(host, optionsAtRuntime: WebchatAppProps = {}) {
     let {
       theme = {},
       persistentMenu,
@@ -319,10 +461,12 @@ export class WebchatApp {
     this.appId = appId || this.appId
     this.hostId = hostId || this.hostId
     this.createRootElement(host)
+
     return (
       <Webchat
         {...webchatOptions}
         ref={this.webchatRef}
+        // @ts-ignore
         host={this.host}
         shadowDOM={this.shadowDOM}
         theme={theme}
@@ -337,12 +481,16 @@ export class WebchatApp {
         storageKey={this.storageKey}
         defaultDelay={defaultDelay}
         defaultTyping={defaultTyping}
-        onInit={(...args) => this.onInitWebchat(...args)}
-        onOpen={(...args) => this.onOpenWebchat(...args)}
-        onClose={(...args) => this.onCloseWebchat(...args)}
-        onUserInput={(...args) => this.onUserInput(...args)}
+        onInit={(...args: [any]) => this.onInitWebchat(...args)}
+        onOpen={(...args: [any]) => this.onOpenWebchat(...args)}
+        onClose={(...args: [any]) => this.onCloseWebchat(...args)}
+        onUserInput={(...args: [any]) => this.onUserInput(...args)}
         onStateChange={webchatState => this.onStateChange(webchatState)}
-        onTrackEvent={(...args) => this.onTrackEvent(...args)}
+        onTrackEvent={(
+          request: ActionRequest,
+          eventName: string,
+          args?: EventArgs
+        ) => this.onTrackEvent && this.onTrackEvent(request, eventName, args)}
         server={server}
       />
     )
@@ -360,10 +508,15 @@ export class WebchatApp {
   }
 
   isOnline() {
-    return this.webchatRef.current.isOnline()
+    return this.webchatRef.current?.isOnline()
   }
 
-  async resolveWebchatVisibility(optionsAtRuntime) {
+  async resolveWebchatVisibility(optionsAtRuntime?: {
+    appId: string
+    visibility: boolean | (() => boolean) | 'dynamic' | undefined
+  }) {
+    if (!optionsAtRuntime) return true // If optionsAtRuntime is not provided, always render the webchat
+
     let { appId, visibility } = optionsAtRuntime
     visibility = visibility || this.visibility
     if (visibility === undefined || visibility === true) return true
@@ -379,7 +532,7 @@ export class WebchatApp {
     if (this.storage) this.storage.removeItem(this.storageKey)
   }
 
-  async render(dest, optionsAtRuntime = {}) {
+  async render(dest: HTMLDivElement, optionsAtRuntime: any = undefined) {
     onDOMLoaded(async () => {
       const isVisible = await this.resolveWebchatVisibility(optionsAtRuntime)
       if (isVisible) {