@botonic/react 0.44.1-alpha.3 → 0.45.0-alpha.0

package/src/components/markdown.js

@@ -3,7 +3,7 @@ import MarkdownIt from 'markdown-it'
 import { isInWebviewApp } from '../util/environment'
 
 const BR_STRING_TAG = '<br/>'
-const BR_STRING_TAG_REGEX = new RegExp('<br\\s*/?>', 'g')
+const BR_STRING_TAG_REGEX = /<br\s*\/?>/g
 export const ESCAPED_LINE_BREAK = '&lt;br&gt;'
 const ESCAPED_LINE_BREAK_REGEX = new RegExp(ESCAPED_LINE_BREAK, 'g')
 const isLineBreakElement = element => element.type === 'br'
@@ -12,19 +12,15 @@ const withLinksTarget = (renderer, target = '_blank') => {
   // Support opening links in new tabs: https://github.com/markdown-it/markdown-it/blob/master/docs/architecture.md#renderer
   const newRenderer =
     renderer.renderer.rules.link_open ||
-    function (tokens, idx, options, env, self) {
-      return self.renderToken(tokens, idx, options)
-    }
-  renderer.renderer.rules.link_open = function (
-    tokens,
-    idx,
-    options,
-    env,
-    self
-  ) {
+    ((tokens, idx, options, _env, self) =>
+      self.renderToken(tokens, idx, options))
+  renderer.renderer.rules.link_open = (tokens, idx, options, env, self) => {
     const aIndex = tokens[idx].attrIndex('target')
-    if (aIndex < 0) tokens[idx].attrPush(['target', target])
-    else tokens[idx].attrs[aIndex][1] = target
+    if (aIndex < 0) {
+      tokens[idx].attrPush(['target', target])
+    } else {
+      tokens[idx].attrs[aIndex][1] = target
+    }
     return newRenderer(tokens, idx, options, env, self)
   }
 }
@@ -55,12 +51,15 @@ export const renderMarkdown = text => {
   // Supporting multiline: https://stackoverflow.com/a/20543835
   text = text
     .map(e => {
-      if (isLineBreakElement(e)) return BR_STRING_TAG
-      else if (typeof e === 'string')
+      if (isLineBreakElement(e)) {
+        return BR_STRING_TAG
+      } else if (typeof e === 'string') {
         return e
           .replace(BR_STRING_TAG_REGEX, BR_STRING_TAG)
           .replace(ESCAPED_LINE_BREAK_REGEX, BR_STRING_TAG)
-      else return String(e)
+      } else {
+        return String(e)
+      }
     })
     .join('')
   return markdownRenderer.render(text)
@@ -76,9 +75,14 @@ export const serializeMarkdown = children => {
   const text = children
     .filter(e => isLineBreakElement(e) || !e.type)
     .map(e => {
-      if (Array.isArray(e)) return serializeMarkdown(e)
-      if (isLineBreakElement(e)) return ESCAPED_LINE_BREAK
-      else return String(e).replace(BR_STRING_TAG_REGEX, ESCAPED_LINE_BREAK)
+      if (Array.isArray(e)) {
+        return serializeMarkdown(e)
+      }
+      if (isLineBreakElement(e)) {
+        return ESCAPED_LINE_BREAK
+      } else {
+        return String(e).replace(BR_STRING_TAG_REGEX, ESCAPED_LINE_BREAK)
+      }
     })
     .join('')
   return text
@@ -87,9 +91,6 @@ export const serializeMarkdown = children => {
 export const toMarkdownChildren = children =>
   children.map(e => (isLineBreakElement(e) ? ESCAPED_LINE_BREAK : e))
 
-export const getMarkdownStyle = (getThemeFn, defaultColor) =>
-  getThemeFn('markdownStyle', getDefaultMarkdownStyle(defaultColor))
-
 export const getDefaultMarkdownStyle = color => `
 *{
   margin: 0px;
@@ -164,3 +165,6 @@ table, td, th {
   padding:10px;
 }
 `
+export const getMarkdownStyle = (getThemeFn, defaultColor) => {
+  return getThemeFn('markdownStyle', getDefaultMarkdownStyle(defaultColor))
+}

package/src/components/message/index.jsx

@@ -68,10 +68,11 @@ export const Message = props => {
   let textChildren = React.Children.toArray(children).filter(
     e => ![Button, Reply].includes(e.type)
   )
-  if (isSentByUser)
+  if (isSentByUser) {
     textChildren = textChildren.map(e =>
       typeof e === 'string' ? renderLinks(e) : e
     )
+  }
 
   const { timestampsEnabled, getFormattedTimestamp } = resolveMessageTimestamps(
     getThemeProperty,
@@ -79,9 +80,15 @@ export const Message = props => {
   )
 
   const getEnvAck = () => {
-    if (isDev) return 1
-    if (!isSentByUser) return 1
-    if (props.ack !== undefined) return props.ack
+    if (isDev) {
+      return 1
+    }
+    if (!isSentByUser) {
+      return 1
+    }
+    if (props.ack !== undefined) {
+      return props.ack
+    }
     return 0
   }
 
@@ -115,7 +122,7 @@ export const Message = props => {
           url: r.props.url,
           text: r.props.children,
         })),
-        display: delay + typing == 0,
+        display: delay + typing === 0,
         customTypeName: decomposedChildren.customTypeName,
         ack: ack,
         isUnread: isUnread === 1 || isUnread === true,
@@ -131,9 +138,8 @@ export const Message = props => {
     if (isBrowser()) {
       const msg = webchatState.messagesJSON.find(m => m.id === state.id)
       if (
-        msg &&
-        msg.display &&
-        webchatState.messagesJSON.filter(m => !m.display).length == 0
+        msg?.display &&
+        webchatState.messagesJSON.filter(m => !m.display).length === 0
       ) {
         updateReplies(replies)
       }
@@ -143,7 +149,9 @@ export const Message = props => {
   const brandColor = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.brandColor)
 
   const getBgColor = () => {
-    if (!blob) return COLORS.TRANSPARENT
+    if (!blob) {
+      return COLORS.TRANSPARENT
+    }
     if (isSentByUser) {
       return getThemeProperty(
         WEBCHAT.CUSTOM_PROPERTIES.userMessageBackground,
@@ -167,7 +175,9 @@ export const Message = props => {
 
   const renderBrowser = () => {
     const messageJSON = webchatState.messagesJSON.find(m => m.id === state.id)
-    if (!messageJSON || !messageJSON.display) return <></>
+    if (!messageJSON || !messageJSON.display) {
+      return <></>
+    }
 
     if (messageJSON?.type === INPUT.SYSTEM_DEBUG_TRACE) {
       return children
@@ -178,7 +188,7 @@ export const Message = props => {
       // that is why the color depends on the pointerSize
       // https://developpaper.com/realization-code-of-css-drawing-triangle-border-method/
       const color =
-        pointerSize == 5
+        pointerSize === 5
           ? getBgColor()
           : getThemeProperty(
               `message.${userOrBotMessage}.style.borderColor`,
@@ -222,62 +232,60 @@ export const Message = props => {
         condition={animationsEnabled}
         wrapper={children => <Fade>{children}</Fade>}
       >
-        <>
-          <MessageContainer
-            isSentByUser={isSentByUser}
+        <MessageContainer
+          isSentByUser={isSentByUser}
+          style={{
+            ...getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.messageStyle),
+          }}
+        >
+          <MessageImage imagestyle={imagestyle} sentBy={sentBy} />
+          <BlobContainer
+            className={className}
+            issentbysystem={isSentBySystem}
+            bgcolor={getBgColor()}
+            color={isSentByUser ? COLORS.SOLID_WHITE : COLORS.SOLID_BLACK}
+            blobwidth={getThemeProperty(
+              WEBCHAT.CUSTOM_PROPERTIES.botMessageBlobWidth
+            )}
+            blob={blob}
             style={{
-              ...getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.messageStyle),
+              ...getMessageStyle(),
+              ...style,
+              ...{ opacity: ack === 0 ? 0.6 : 1 },
             }}
+            {...otherProps}
           >
-            <MessageImage imagestyle={imagestyle} sentBy={sentBy} />
-            <BlobContainer
-              className={className}
-              issentbysystem={isSentBySystem}
-              bgcolor={getBgColor()}
-              color={isSentByUser ? COLORS.SOLID_WHITE : COLORS.SOLID_BLACK}
-              blobwidth={getThemeProperty(
-                WEBCHAT.CUSTOM_PROPERTIES.botMessageBlobWidth
-              )}
-              blob={blob}
-              style={{
-                ...getMessageStyle(),
-                ...style,
-                ...{ opacity: ack === 0 ? 0.6 : 1 },
-              }}
-              {...otherProps}
-            >
-              {markdown ? (
-                <BlobText
-                  blob={blob}
-                  dangerouslySetInnerHTML={{
-                    __html: renderMarkdown(textChildren),
-                  }}
-                  markdownstyle={getMarkdownStyle(
-                    getThemeProperty,
-                    isSentByUser ? COLORS.SEASHELL_WHITE : brandColor
-                  )}
-                />
-              ) : (
-                <BlobText blob={blob}>{textChildren}</BlobText>
-              )}
-              {!!buttons.length && (
-                <div className='message-buttons-container'>{buttons}</div>
-              )}
-              {Boolean(blob) && hasBlobTick() && getBlobTick(6)}
-              {Boolean(blob) && hasBlobTick() && getBlobTick(5)}
-            </BlobContainer>
-          </MessageContainer>
-          {timestampsEnabled || feedbackEnabled ? (
-            <MessageFooter
-              enabletimestamps={timestampsEnabled}
-              messageJSON={messageJSON}
-              sentBy={sentBy}
-              feedbackEnabled={feedbackEnabled}
-              inferenceId={inferenceId}
-              botInteractionId={botInteractionId}
-            />
-          ) : null}
-        </>
+            {markdown ? (
+              <BlobText
+                blob={blob}
+                dangerouslySetInnerHTML={{
+                  __html: renderMarkdown(textChildren),
+                }}
+                markdownstyle={getMarkdownStyle(
+                  getThemeProperty,
+                  isSentByUser ? COLORS.SEASHELL_WHITE : brandColor
+                )}
+              />
+            ) : (
+              <BlobText blob={blob}>{textChildren}</BlobText>
+            )}
+            {!!buttons.length && (
+              <div className='message-buttons-container'>{buttons}</div>
+            )}
+            {Boolean(blob) && hasBlobTick() && getBlobTick(6)}
+            {Boolean(blob) && hasBlobTick() && getBlobTick(5)}
+          </BlobContainer>
+        </MessageContainer>
+        {timestampsEnabled || feedbackEnabled ? (
+          <MessageFooter
+            enabletimestamps={timestampsEnabled}
+            messageJSON={messageJSON}
+            sentBy={sentBy}
+            feedbackEnabled={feedbackEnabled}
+            inferenceId={inferenceId}
+            botInteractionId={botInteractionId}
+          />
+        ) : null}
       </ConditionalWrapper>
     )
   }

package/src/components/message/message-feedback.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from 'react'
+import { useContext, useEffect, useState } from 'react'
 
 import ThumbsDown from '../../assets/thumbs-down.svg'
 import ThumbsUp from '../../assets/thumbs-up.svg'

package/src/components/message/message-footer.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react'
+import { useContext } from 'react'
 
 import { SENDERS } from '../../index-types'
 import { WebchatContext } from '../../webchat/context'

package/src/components/message/message-image.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react'
+import { useContext } from 'react'
 
 import { WEBCHAT } from '../../constants'
 import { SENDERS } from '../../index-types'

package/src/components/message/timestamps.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react'
+import { useContext } from 'react'
 
 import { WEBCHAT } from '../../constants'
 import { SENDERS } from '../../index-types'
@@ -81,6 +81,7 @@ export const MessageTimestamp = ({
     >
       {timestampsWithImage && BotMessageImage && !isSentByUser && (
         <img
+          alt={isSentByAgent ? 'Agent message image' : 'Bot message image'}
           src={resolveImage(
             isSentByAgent ? AgentMessageImage : BotMessageImage
           )}

package/src/components/message-template.jsx

@@ -1,5 +1,4 @@
-import React from 'react'
-
+/** biome-ignore-all lint/security/noDangerouslySetInnerHtml: MessageTemplate is a component that renders a message template */
 import { renderComponent } from '../util/react'
 
 export const MessageTemplate = props => {

package/src/components/multichannel/facebook/facebook.jsx

@@ -1,8 +1,6 @@
 export const MAX_CHARACTERS_FACEBOOK = 640
 
 export class MultichannelFacebook {
-  constructor() {}
-
   convertText(props, originalText) {
     if (originalText.length > MAX_CHARACTERS_FACEBOOK) {
       const texts = this.splitText(originalText)
@@ -39,7 +37,9 @@ export class MultichannelFacebook {
     if (Array.isArray(props.children)) {
       props.children
         .filter(e => e.type)
-        .forEach(e => propsLastText.children.push(e))
+        .forEach(e => {
+          propsLastText.children.push(e)
+        })
     }
     const propsWithoutChildren = { ...props }
     delete propsWithoutChildren.children

package/src/components/multichannel/multichannel-button.jsx

@@ -1,5 +1,5 @@
 import { isWhatsapp } from '@botonic/core'
-import React, { useContext } from 'react'
+import { useContext } from 'react'
 
 import { RequestContext } from '../../contexts'
 import { truncateText } from '../../util'
@@ -23,7 +23,7 @@ export const MultichannelButton = props => {
   const hasWebview = () => Boolean(props.webview)
 
   const getUrl = () => props.url
-  const getWebview = () => props.webview
+  const _getWebview = () => props.webview
 
   const increaseCurrentIndex = () => {
     if (typeof multichannelContext.currentIndex === 'number') {
@@ -49,9 +49,9 @@ export const MultichannelButton = props => {
       ? `${formatIndex(multichannelContext.currentIndex + separator)} `
       : ''
     if (hasPostback()) {
-      text = newline + `${index}${text}`
+      text = `${newline}${index}${text}`
     } else if (hasUrl()) {
-      text = newline + `- ${text}`
+      text = `${newline}- ${text}`
     }
     return text
   }
@@ -65,7 +65,9 @@ export const MultichannelButton = props => {
         const text = getText()
         increaseCurrentIndex()
         return `${text}`
-      } else if (hasWebview()) return <Button {...props}>{getText()}</Button>
+      } else if (hasWebview()) {
+        return <Button {...props}>{getText()}</Button>
+      }
     }
     return (
       <Button {...props}>

package/src/components/multichannel/multichannel-carousel.jsx

@@ -5,7 +5,7 @@ import {
   isWebchat,
   isWhatsapp,
 } from '@botonic/core'
-import React, { useContext } from 'react'
+import { useContext } from 'react'
 
 import { RequestContext } from '../../contexts'
 import { Button } from '../button/index'
@@ -92,11 +92,21 @@ function parseCarouselElement(element) {
   const buttonsChildren = []
 
   for (const node of element) {
-    if (isNodePic(node)) imageProps = node.props
-    if (isNodeTitle(node)) title = node.props.children
-    if (isNodeSubtitle(node)) subtitle = node.props.children
-    if (isMultichannelButton(node)) buttonsChildren.push(node)
-    if (Array.isArray(node)) buttonsChildren.push(...getButtons(node))
+    if (isNodePic(node)) {
+      imageProps = node.props
+    }
+    if (isNodeTitle(node)) {
+      title = node.props.children
+    }
+    if (isNodeSubtitle(node)) {
+      subtitle = node.props.children
+    }
+    if (isMultichannelButton(node)) {
+      buttonsChildren.push(node)
+    }
+    if (Array.isArray(node)) {
+      buttonsChildren.push(...getButtons(node))
+    }
   }
 
   const buttons = buttonsChildren.map(button => {

package/src/components/multichannel/multichannel-reply.jsx

@@ -1,5 +1,5 @@
 import { isWhatsapp } from '@botonic/core'
-import React, { useContext } from 'react'
+import { useContext } from 'react'
 
 import { RequestContext } from '../../contexts'
 import { COMPONENT_DISPLAY_NAMES } from '../constants'
@@ -12,7 +12,9 @@ export const MultichannelReply = props => {
   const getText = () => `${props.children}`
 
   if (isWhatsapp(requestContext.session)) {
-    if (hasPath() || hasPayload()) return `${getText()}`
+    if (hasPath() || hasPayload()) {
+      return `${getText()}`
+    }
     return null
   } else {
     return <Reply {...props}>{props.children}</Reply>

package/src/components/multichannel/multichannel-text.jsx

@@ -40,11 +40,14 @@ export const MultichannelText = props => {
     const text = children
       .filter(e => e && !e.type)
       .map(e => {
-        if (Array.isArray(e)) return getText(e)
-        else return String(e)
+        if (Array.isArray(e)) {
+          return getText(e)
+        } else {
+          return String(e)
+        }
       })
       .join('')
-    if (text == undefined) {
+    if (text === undefined) {
       return []
     }
     return [text].filter(t => t !== '') // to avoid line breaks when the carousel doesn't have title or subtitle
@@ -61,15 +64,19 @@ export const MultichannelText = props => {
     const urlButtons = []
     const webviewButtons = []
     for (const button of getButtonsAndReplies()) {
-      if (elementHasUrl(button)) urlButtons.push(button)
-      else if (elementHasWebview(button)) webviewButtons.push(button)
-      else if (elementHasPostback(button)) postbackButtons.push(button)
+      if (elementHasUrl(button)) {
+        urlButtons.push(button)
+      } else if (elementHasWebview(button)) {
+        webviewButtons.push(button)
+      } else if (elementHasPostback(button)) {
+        postbackButtons.push(button)
+      }
     }
     return { postbackButtons, urlButtons, webviewButtons }
   }
 
   const getDefaultIndex = () => {
-    if (props.indexMode == undefined) {
+    if (props.indexMode === undefined) {
       return undefined
     }
     if (multichannelContext.currentIndex != null) {
@@ -204,13 +211,14 @@ export const MultichannelText = props => {
       return (
         <>
           {messages.map((message, i) => {
-            if (message.type === INPUT.WHATSAPP_BUTTON_LIST)
+            if (message.type === INPUT.WHATSAPP_BUTTON_LIST) {
               return (
                 <WhatsappButtonList
                   key={`msg-${i}-whatsapp-list`}
                   {...message.props}
                 />
               )
+            }
             return (
               <Text
                 key={`msg-${i}-with-postback-buttons`}
@@ -311,7 +319,7 @@ export const MultichannelText = props => {
     return (
       <>
         {texts?.map((message, i) => (
-          <Text key={i} {...propsWithoutChildren}>
+          <Text key={`msg-${i}-text`} {...propsWithoutChildren}>
             {convertToMarkdownMeta(message)}
           </Text>
         ))}

package/src/components/multichannel/multichannel-utils.ts

@@ -80,9 +80,15 @@ export type ButtonType = (typeof buttonTypes)[keyof typeof buttonTypes]
 export function getButtonType(
   multichannelButton?: ElementWithProps
 ): ButtonType | undefined {
-  if (elementHasUrl(multichannelButton)) return buttonTypes.URL
-  if (elementHasPostback(multichannelButton)) return buttonTypes.POSTBACK
-  if (elementHasWebview(multichannelButton)) return buttonTypes.WEBVIEW
+  if (elementHasUrl(multichannelButton)) {
+    return buttonTypes.URL
+  }
+  if (elementHasPostback(multichannelButton)) {
+    return buttonTypes.POSTBACK
+  }
+  if (elementHasWebview(multichannelButton)) {
+    return buttonTypes.WEBVIEW
+  }
 
   return undefined
 }
@@ -93,7 +99,9 @@ export function getFilteredElements<T extends ReactElementWithDisplayName>(
 ): T[] {
   const elements: T[] = []
   for (const n of node) {
-    if (filter(n)) elements.push(n)
+    if (filter(n)) {
+      elements.push(n)
+    }
   }
   return elements
 }

package/src/components/multichannel/multichannel.jsx

@@ -1,5 +1,5 @@
 import { isFacebook, isInstagram, isWhatsapp } from '@botonic/core'
-import React, { useContext } from 'react'
+import { useContext } from 'react'
 
 import { RequestContext } from '../../contexts'
 import { deepMapWithIndex } from '../../util/react'

package/src/components/pic.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import styled from 'styled-components'
 
 import { COLORS, WEBCHAT } from '../constants'
@@ -24,7 +23,7 @@ export const Pic = (props: PicProps) => {
 
   const renderBrowser = () => <PicStyled src={props.src} />
 
-  // @ts-ignore
+  // @ts-expect-error
   const renderNode = () => <pic>{props.src}</pic>
 
   return renderComponent({ renderBrowser, renderNode })

package/src/components/raw.jsx

@@ -1,5 +1,5 @@
 import { INPUT, isBrowser } from '@botonic/core'
-import React, { useState } from 'react'
+import { useState } from 'react'
 import styled from 'styled-components'
 
 import { COLORS, ROLES } from '../constants'
@@ -35,7 +35,7 @@ export const Raw = props => {
   let content = props.children
   const data = JSON.stringify(props.data, null, ' ')
   const [isOpen, setIsOpen] = useState(false)
-  if (isBrowser())
+  if (isBrowser()) {
     content = (
       <>
         <div>{props.alt}</div>
@@ -49,6 +49,7 @@ export const Raw = props => {
         )}
       </>
     )
+  }
   return (
     <Message
       role={ROLES.RAW_MESSAGE}

package/src/components/reply.tsx

@@ -1,11 +1,11 @@
-import React, { useContext } from 'react'
+import { useContext } from 'react'
 import styled from 'styled-components'
 
-import { COLORS, WEBCHAT } from '../constants'
+import { WEBCHAT } from '../constants'
 import { renderComponent } from '../util/react'
 import { WebchatContext } from '../webchat/context'
 import { COMPONENT_DISPLAY_NAMES } from './constants'
-import { ReplyProps } from './index-types'
+import type { ReplyProps } from './index-types'
 
 const StyledButton = styled.button`
   width: 100%;
@@ -25,7 +25,9 @@ export const Reply = (props: ReplyProps) => {
     event.preventDefault()
     if (props.children) {
       let payload = props.payload
-      if (props.path) payload = `__PATH_PAYLOAD__${props.path}`
+      if (props.path) {
+        payload = `__PATH_PAYLOAD__${props.path}`
+      }
       sendText(props.children, payload)
     }
   }
@@ -56,11 +58,11 @@ export const Reply = (props: ReplyProps) => {
   const renderNode = () => {
     if (props.path) {
       const payload = `__PATH_PAYLOAD__${props.path}`
-      // @ts-ignore
+      // @ts-expect-error
       // eslint-disable-next-line react/no-unknown-property
       return <reply payload={payload}>{props.children}</reply>
     }
-    // @ts-ignore
+    // @ts-expect-error
     // eslint-disable-next-line react/no-unknown-property
     return <reply payload={props.payload}>{props.children}</reply>
   }
@@ -72,6 +74,8 @@ Reply.displayName = COMPONENT_DISPLAY_NAMES.Reply
 
 Reply.serialize = (replyProps: ReplyProps) => {
   let payload = replyProps.payload
-  if (replyProps.path) payload = `__PATH_PAYLOAD__${replyProps.path}`
+  if (replyProps.path) {
+    payload = `__PATH_PAYLOAD__${replyProps.path}`
+  }
   return { reply: { title: replyProps.children, payload } }
 }

package/src/components/share-button.jsx

@@ -1,5 +1,4 @@
-import React from 'react'
-
+/** biome-ignore-all lint/security/noDangerouslySetInnerHtml: ShareButton is a component that renders a share button */
 import { renderComponent } from '../util/react'
 
 export const ShareButton = props => {

package/src/components/subtitle.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import type React from 'react'
 import styled from 'styled-components'
 
 import { COLORS } from '../constants'