@botonic/react 0.22.0-alpha.1 → 0.22.0-beta.0

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,7 @@
 import * as core from '@botonic/core'
-import * as React from 'react'
 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,8 +18,8 @@ export interface WebchatState {
   width: number
   height: number
   messagesJSON: any[]
-  messagesComponents: Message[]
-  replies: Reply[]
+  messagesComponents: any[]
+  replies: any[]
   latestInput: Partial<core.Input>
   typing: boolean
   webview: Webview | null
@@ -41,11 +39,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 +51,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/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'

package/src/index.d.ts

@@ -1,238 +0,0 @@
-import * as core from '@botonic/core'
-import * as React from 'react'
-
-import {
-  BlockInputOption,
-  ButtonProps,
-  CoverComponentOptions,
-  PersistentMenuTheme,
-  ReplyProps,
-  ThemeProps,
-  WebchatSettingsProps,
-  Webview,
-} from './components'
-import { WebchatState } from './webchat'
-
-/**
- * See @botonic/core's Response for the description of the Response's semantics*/
-export interface BotResponse extends core.BotRequest {
-  response: [React.ReactNode]
-}
-
-export interface Route extends core.Route {
-  action?: React.ComponentType<any>
-  retryAction?: React.ComponentType<any>
-}
-type Routes = core.Routes<Route>
-
-export class ReactBot extends core.CoreBot {
-  renderReactActions({
-    actions,
-    request: ActionRequest,
-  }): Promise<React.ReactNode>
-}
-
-export class NodeApp {
-  constructor(options: Omit<core.CoreBotConfig, 'renderer'>)
-  bot: ReactBot
-  input(request: core.BotRequest): Promise<BotResponse>
-  renderNode(args): string
-}
-
-// Parameters of the actions' botonicInit method
-export interface ActionRequest {
-  defaultDelay: number
-  defaultTyping: number
-  input: core.Input
-  lastRoutePath: string
-  params: { [key: string]: string }
-  plugins: { [id: string]: core.Plugin }
-  session: core.Session
-}
-
-export class BotonicInputTester {
-  constructor(app: NodeApp)
-
-  text(
-    inp: string,
-    session?: core.Session,
-    lastRoutePath?: string
-  ): Promise<string>
-
-  payload(
-    inp: string,
-    session?: core.Session,
-    lastRoutePath?: string
-  ): Promise<string>
-}
-
-export class BotonicOutputTester {
-  constructor(app: NodeApp)
-
-  text(out: string, replies?: any): Promise<string>
-}
-
-export interface RequestContextInterface extends ActionRequest {
-  getString: (stringId: string) => string
-  setLocale: (locale: string) => string
-}
-
-export const RequestContext: React.Context<RequestContextInterface>
-export type RequestContext = React.Context<RequestContextInterface>
-
-export interface CustomMessageType {
-  customTypeName: string
-}
-
-export function msgToBotonic(
-  msg: any,
-  customMessageTypes?: CustomMessageType[]
-): React.ReactNode
-
-export function msgsToBotonic(
-  msgs: any | any[],
-  customMessageTypes?: CustomMessageType[]
-): React.ReactNode
-
-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: core.Session) => 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 {
-  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: core.InputType
-  typing: number
-}
-
-export interface OnUserInputArgs {
-  input: core.Input
-  lastRoutePath?: string
-  session?: core.Session
-  user: core.SessionUser
-}
-
-export interface OnStateChangeArgs {
-  messagesJSON: WebchatMessage[]
-  user: core.SessionUser
-}
-
-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 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<core.SessionUser>): void
-  updateWebchatSettings(settings: WebchatSettingsProps): void
-  renderCustomComponent(customComponent: React.ReactNode): void
-  unmountCustomComponent(): void
-}
-
-export interface WebchatContextProps {
-  sendText: (text: string, payload?: string) => void
-  sendAttachment: (attachment: File) => void
-  sendPayload: (payload: string) => void
-  sendInput: (input: core.Input) => void
-  openWebview: (webviewComponent: Webview) => void
-  addMessage: (message: WebchatMessage) => void
-  updateMessage: (message: WebchatMessage) => void
-  updateReplies: (replies: boolean) => void
-  updateLatestInput: (input: core.Input) => void
-  closeWebview: () => void
-  toggleWebchat: () => void
-  getThemeProperty: (property: string, defaultValue?: string) => any
-  resolveCase: () => void
-  theme: ThemeProps
-  webchatState: WebchatState
-  updateWebchatDevSettings: (settings: WebchatSettingsProps) => void
-  updateUser: (user: Partial<core.SessionUser>) => void
-}
-export const WebchatContext: React.Context<WebchatContextProps>
-export type WebchatContext = React.Context<WebchatContextProps>
-
-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'