@botonic/react 0.44.1 → 0.45.0-alpha.1

package/src/webchat/hooks/use-webchat-dimensions.ts

@@ -12,11 +12,11 @@ export const useWebchatDimensions = () => {
 
   const calculateResizedPercentualWebchatHeight = useCallback(() => {
     const webchatElement = webchatContainerRef.current
-    if (!isWebchatOpen || !webchatElement) return 0
+    if (!isWebchatOpen || !webchatElement) {
+      return 0
+    }
     const webchatHeight = webchatElement.clientHeight || 0
-    const keyboardOffset =
-      (window.visualViewport && window.visualViewport.height) ||
-      window.innerHeight
+    const keyboardOffset = window.visualViewport?.height || window.innerHeight
     let newWebchatPercentualHeight = keyboardOffset / webchatHeight
     newWebchatPercentualHeight =
       Math.round(newWebchatPercentualHeight * 100 * 100) / 100 // Two decimal places
@@ -28,7 +28,9 @@ export const useWebchatDimensions = () => {
     const headerElement = headerRef.current
     const inputPanelElement = inputPanelRef.current
 
-    if (!isWebchatOpen || !webchatElement) return 0
+    if (!isWebchatOpen || !webchatElement) {
+      return 0
+    }
 
     const headerElementHeight = headerElement ? headerElement.clientHeight : 0
     const inputPanelElementHeight = inputPanelElement

package/src/webchat/index-types.ts

@@ -1,4 +1,4 @@
-import { WebchatArgs } from '../index-types'
+import type { WebchatArgs } from '../index-types'
 
 export interface WebchatDevProps extends WebchatArgs {
   initialDevSettings?: {

package/src/webchat/input-panel/attachment.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useRef } from 'react'
+import { useContext, useRef } from 'react'
 
 import AttachmentIcon from '../../assets/attachment-icon.svg'
 import { ROLES } from '../../constants'

package/src/webchat/input-panel/emoji-picker.tsx

@@ -1,4 +1,6 @@
-import React, { useContext } from 'react'
+/** biome-ignore-all lint/a11y/noStaticElementInteractions: we need to use static elements for the emoji picker */
+/** biome-ignore-all lint/a11y/useKeyWithClickEvents: we need to use key with click events for the emoji picker */
+import { useContext } from 'react'
 
 import LogoEmoji from '../../assets/emojiButton.svg'
 import { ROLES } from '../../constants'

package/src/webchat/input-panel/index.tsx

@@ -1,5 +1,6 @@
 import { INPUT } from '@botonic/core'
-import React, { useContext } from 'react'
+import type React from 'react'
+import { useContext } from 'react'
 import { v7 as uuidv7 } from 'uuid'
 
 import { WEBCHAT } from '../../constants'
@@ -37,7 +38,9 @@ export const InputPanel = ({
   } = useContext(WebchatContext)
 
   const handleSelectedEmoji = event => {
-    if (!textareaRef.current) return
+    if (!textareaRef.current) {
+      return
+    }
 
     textareaRef.current.value += event.emoji
     textareaRef.current.focus()
@@ -52,7 +55,9 @@ export const InputPanel = ({
   }
 
   const sendTextAreaText = async () => {
-    if (!textareaRef.current) return
+    if (!textareaRef.current) {
+      return
+    }
 
     await sendText(textareaRef.current?.value)
     textareaRef.current.value = ''

package/src/webchat/input-panel/opened-emoji-picker.tsx

@@ -1,5 +1,5 @@
 import Picker from 'emoji-picker-react'
-import React, { LegacyRef } from 'react'
+import type { LegacyRef } from 'react'
 
 import { ROLES } from '../../constants'
 import { useComponentVisible } from '../hooks'

package/src/webchat/input-panel/persistent-menu.tsx

@@ -1,4 +1,6 @@
-import React, { useContext } from 'react'
+/** biome-ignore-all lint/a11y/noStaticElementInteractions: we need to use static elements for the persistent menu */
+/** biome-ignore-all lint/a11y/useKeyWithClickEvents: we need to use key with click events for the persistent menu */
+import { useContext } from 'react'
 
 import LogoMenu from '../../assets/menuButton.svg'
 import { ROLES } from '../../constants'

package/src/webchat/input-panel/send-button.tsx

@@ -1,4 +1,6 @@
-import React, { useContext } from 'react'
+/** biome-ignore-all lint/a11y/noStaticElementInteractions: we need to use static elements for the send button */
+/** biome-ignore-all lint/a11y/useKeyWithClickEvents: we need to use key with click events for the send button */
+import { useContext } from 'react'
 
 import SendButtonIcon from '../../assets/send-button.svg'
 import { ROLES } from '../../constants'

package/src/webchat/input-panel/textarea.tsx

@@ -1,7 +1,8 @@
-import React, { useContext } from 'react'
+/* eslint-disable @typescript-eslint/no-use-before-define */
+import type React from 'react'
+import { useContext } from 'react'
 import TextareaAutosize from 'react-textarea-autosize'
 
-import { WEBCHAT } from '../../constants'
 import { Typing } from '../../index-types'
 import { WebchatContext } from '../../webchat/context'
 import { useDeviceAdapter } from '../hooks'
@@ -25,7 +26,7 @@ export const Textarea = ({
   useDeviceAdapter(host, webchatState.isWebchatOpen)
 
   let isTyping = false
-  let typingTimeout
+  let typingTimeout: NodeJS.Timeout | null = null
 
   const persistentMenuOptions = webchatState.theme.userInput?.persistentMenu
 
@@ -42,7 +43,9 @@ export const Textarea = ({
   }
 
   const onKeyUp = () => {
-    if (!textareaRef.current) return
+    if (!textareaRef.current) {
+      return
+    }
 
     if (textareaRef.current.value === '') {
       stopTyping()
@@ -56,8 +59,12 @@ export const Textarea = ({
 
   const clearTimeoutWithReset = (reset: boolean) => {
     const waitTime = 20 * 1000
-    if (typingTimeout) clearTimeout(typingTimeout)
-    if (reset) typingTimeout = setTimeout(stopTyping, waitTime)
+    if (typingTimeout) {
+      clearTimeout(typingTimeout)
+    }
+    if (reset) {
+      typingTimeout = setTimeout(stopTyping, waitTime)
+    }
   }
 
   const startTyping = () => {
@@ -82,7 +89,9 @@ export const Textarea = ({
   return (
     <TextAreaContainer>
       <TextareaAutosize
-        ref={(ref: HTMLTextAreaElement) => (textareaRef.current = ref)}
+        ref={(ref: HTMLTextAreaElement) => {
+          textareaRef.current = ref
+        }}
         onFocus={handleFocus}
         onBlur={handleBlur}
         name='text'

package/src/webchat/message-list/index.tsx

@@ -1,4 +1,3 @@
-import { INPUT } from '@botonic/core'
 import React, { useContext, useEffect, useRef, useState } from 'react'
 
 import { ROLES } from '../../constants'
@@ -11,6 +10,7 @@ import { ScrollButton } from './scroll-button'
 import { MessageContainer, ScrollableMessageList } from './styles'
 import { UnreadMessagesBanner } from './unread-messages-banner'
 import { useNotifications } from './use-notifications'
+
 const SCROLL_TIMEOUT = 200
 const scrollOptionsEnd: ScrollIntoViewOptions = {
   block: 'end',

package/src/webchat/message-list/intro-message.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react'
+import { useContext } from 'react'
 
 import { WEBCHAT } from '../../constants'
 import { Fade } from '../../shared/styles'

package/src/webchat/message-list/scroll-button.tsx

@@ -1,5 +1,4 @@
-import React from 'react'
-
+/** biome-ignore-all lint/a11y/useAltText: This is a SVG icon */
 import ArrowScrollDown from '../../assets/arrow-scroll-down.svg'
 import { resolveImage } from '../../util/environment'
 import { ContainerScrollButton } from './styles'
@@ -20,15 +19,13 @@ export const ScrollButton = ({
   return (
     <>
       {scrollButtonEnabled && show ? (
-        <>
-          {CustomScrollButton ? (
-            <CustomScrollButton handleScrollToBottom={handleClick} />
-          ) : (
-            <ContainerScrollButton onClick={handleClick}>
-              <img src={resolveImage(ArrowScrollDown)} />
-            </ContainerScrollButton>
-          )}
-        </>
+        CustomScrollButton ? (
+          <CustomScrollButton handleScrollToBottom={handleClick} />
+        ) : (
+          <ContainerScrollButton onClick={handleClick}>
+            <img src={resolveImage(ArrowScrollDown)} />
+          </ContainerScrollButton>
+        )
       ) : null}
     </>
   )

package/src/webchat/message-list/unread-messages-banner.tsx

@@ -1,4 +1,6 @@
-import React, { useContext } from 'react'
+/** biome-ignore-all lint/a11y/useAltText: we need to use alt text for the unread messages banner */
+import type React from 'react'
+import { useContext } from 'react'
 
 import ArrowDown from '../../assets/arrow-down.svg'
 import { resolveImage } from '../../util/environment'

package/src/webchat/replies/index.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react'
+import { useContext } from 'react'
 
 import { WEBCHAT } from '../../constants'
 import { WebchatContext } from '../../webchat/context'
@@ -38,7 +38,7 @@ export const WebchatReplies = () => {
         wrap={flexWrap}
       >
         {webchatState.replies?.map((reply, i) => (
-          // @ts-ignore TODO: In this point reply is the the component to render
+          // @ts-expect-error TODO: In this point reply is the the component to render
           <ReplyContainer key={`reply-${i}`}>{reply}</ReplyContainer>
         ))}
       </RepliesContainer>

package/src/webchat/session-view.jsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { JSONTree } from 'react-json-tree'
 import styled from 'styled-components'
 
@@ -98,7 +97,6 @@ const KeepSessionContainer = styled.div`
 `
 
 export const SessionView = props => {
-  // eslint-disable-next-line react-hooks/rules-of-hooks
   const { webchatState, updateDevSettings } = props.webchatHooks || useWebchat()
   const { latestInput: input, session, lastRoutePath } = webchatState
   const toggleSessionView = () =>

package/src/webchat/theme/default-theme.ts

@@ -1,5 +1,5 @@
 import { COLORS, WEBCHAT } from '../../constants'
-import { WebchatTheme } from './types'
+import type { WebchatTheme } from './types'
 
 export const defaultTheme: WebchatTheme = {
   style: {

package/src/webchat/theme/types.ts

@@ -1,4 +1,4 @@
-import {
+import type {
   BlockInputOption,
   ButtonProps,
   CustomMessageType,

package/src/webchat/tracking.ts

@@ -1,4 +1,4 @@
-import {
+import type {
   EventCustom,
   EventFeedback,
   EventFeedbackKnowledgebase,
@@ -6,7 +6,7 @@ import {
 import { useContext } from 'react'
 import { v7 as uuidv7 } from 'uuid'
 
-import { ActionRequest } from '../index-types'
+import type { ActionRequest } from '../index-types'
 import { WebchatContext } from './context'
 
 export enum EventAction {

package/src/webchat/trigger-button/index.tsx

@@ -1,4 +1,6 @@
-import React, { useContext } from 'react'
+/** biome-ignore-all lint/a11y/noStaticElementInteractions: we need to use static elements for the trigger button */
+/** biome-ignore-all lint/a11y/useKeyWithClickEvents: we need to use key with click events for the trigger button */
+import { useContext } from 'react'
 
 import { ROLES, WEBCHAT } from '../../constants'
 import { resolveImage } from '../../util/environment'

package/src/webchat/typing-indicator/index.tsx

@@ -1,4 +1,4 @@
-import React, { ForwardedRef, forwardRef } from 'react'
+import { type ForwardedRef, forwardRef } from 'react'
 
 import { COLORS, ROLES } from '../../constants'
 import { Dot, TypingContainer, TypingMsgWrapper } from './styles'

package/src/webchat/utils.ts

@@ -1,7 +1,9 @@
-import { BotonicAction, BotonicActionType } from '@botonic/core'
+import { BotonicAction, type BotonicActionType } from '@botonic/core'
 
 export const getParsedAction = (botonicAction: BotonicActionType) => {
   const splittedAction = botonicAction.split(`${BotonicAction.CreateCase}:`)
-  if (splittedAction.length <= 1) return undefined
+  if (splittedAction.length <= 1) {
+    return undefined
+  }
   return JSON.parse(splittedAction[1])
 }

package/src/webchat/webchat-dev.jsx

@@ -1,6 +1,6 @@
 import { PROVIDER } from '@botonic/core'
 import merge from 'lodash.merge'
-import React, { forwardRef, useEffect } from 'react'
+import { forwardRef, useEffect } from 'react'
 import { createPortal } from 'react-dom'
 import styled from 'styled-components'
 
@@ -44,7 +44,6 @@ const initialSession = {
   },
 }
 
-// eslint-disable-next-line react/display-name
 export const WebchatDev = forwardRef((props, ref) => {
   const webchatHooks = useWebchat()
   const { webchatState, updateTheme } = webchatHooks