botonic-react: create webchat context folder (#2966)

## Description

Create a folder with all files used in WebchatContext

## Testing

import act from `@testing-library/react`

packages/botonic-plugin-flow-builder/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botonic/plugin-flow-builder",
-  "version": "0.31.0-alpha.4",
+  "version": "0.31.0-alpha.5",
   "main": "./lib/cjs/index.js",
   "module": "./lib/esm/index.js",
   "description": "Use Flow Builder to show your contents",
@@ -14,7 +14,7 @@
     "lint_core": "../../node_modules/.bin/eslint_d --cache --quiet 'src/**/*.ts*'"
   },
   "dependencies": {
-    "@botonic/react": "0.31.0-alpha.4",
+    "@botonic/react": "0.31.0-alpha.5",
     "axios": "^1.7.2",
     "uuid": "^10.0.0"
   },

packages/botonic-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botonic/react",
-  "version": "0.31.0-alpha.4",
+  "version": "0.31.0-alpha.5",
   "license": "MIT",
   "description": "Build Chatbots using React",
   "main": "./lib/cjs",

packages/botonic-react/src/components/button.tsx

@@ -3,10 +3,10 @@ import React, { useContext, useState } from 'react'
 import styled from 'styled-components'
 
 import { COLORS, WEBCHAT } from '../constants'
-import { WebchatContext } from '../contexts'
 import { resolveImage } from '../util/environment'
 import { renderComponent } from '../util/react'
 import { generateWebviewUrlWithParams } from '../util/webviews'
+import { WebchatContext } from '../webchat/context'
 import { ButtonsDisabler } from './buttons-disabler'
 import { ButtonProps } from './index-types'
 

packages/botonic-react/src/components/carousel.jsx

@@ -5,8 +5,8 @@ import styled from 'styled-components'
 import LeftArrow from '../assets/leftArrow.svg'
 import RightArrow from '../assets/rightArrow.svg'
 import { COLORS, WEBCHAT } from '../constants'
-import { WebchatContext } from '../contexts'
 import { resolveImage } from '../util/environment'
+import { WebchatContext } from '../webchat/context'
 import { ButtonsDisabler } from './buttons-disabler'
 import { Message } from './message'
 

packages/botonic-react/src/components/document.tsx

@@ -3,8 +3,8 @@ import React, { useContext } from 'react'
 import styled from 'styled-components'
 
 import { ROLES, WEBCHAT } from '../constants'
-import { WebchatContext } from '../contexts'
 import { staticAsset } from '../util/environment'
+import { WebchatContext } from '../webchat/context'
 import { DocumentProps } from './index-types'
 import { Message } from './message'
 

packages/botonic-react/src/components/handoff.jsx

@@ -2,7 +2,7 @@ import React, { useContext, useState } from 'react'
 import styled from 'styled-components'
 
 import { COLORS } from '../constants'
-import { WebchatContext } from '../contexts'
+import { WebchatContext } from '../webchat/context'
 
 const Container = styled.div`
   display: flex;

packages/botonic-react/src/components/image.tsx

@@ -3,8 +3,8 @@ import React, { useContext, useState } from 'react'
 import styled from 'styled-components'
 
 import { ROLES, WEBCHAT } from '../constants'
-import { WebchatContext } from '../contexts'
 import { staticAsset } from '../util/environment'
+import { WebchatContext } from '../webchat/context'
 import { ImageProps } from './index-types'
 import { Message } from './message'
 

packages/botonic-react/src/components/message/index.jsx

@@ -3,11 +3,12 @@ import React, { useContext, useEffect, useState } from 'react'
 import { v7 as uuidv7 } from 'uuid'
 
 import { COLORS, WEBCHAT } from '../../constants'
-import { RequestContext, WebchatContext } from '../../contexts'
+import { RequestContext } from '../../contexts'
 import { SENDERS } from '../../index-types'
 import { Fade } from '../../shared/styles'
 import { isDev } from '../../util/environment'
 import { ConditionalWrapper, renderComponent } from '../../util/react'
+import { WebchatContext } from '../../webchat/context'
 import { Button } from '../button'
 import { ButtonsDisabler } from '../buttons-disabler'
 import { getMarkdownStyle, renderLinks, renderMarkdown } from '../markdown'

packages/botonic-react/src/components/message/message-feedback.tsx

@@ -3,9 +3,9 @@ import { v7 as uuidv7 } from 'uuid'
 
 import ThumbsDown from '../../assets/thumbs-down.svg'
 import ThumbsUp from '../../assets/thumbs-up.svg'
-import { WebchatContext } from '../../contexts'
 import { ActionRequest } from '../../index-types'
 import { resolveImage } from '../../util'
+import { WebchatContext } from '../../webchat/context'
 import { EventAction, FeedbackOption } from '../../webchat/tracking'
 import { FeedbackButton, FeedbackMessageContainer } from './styles'
 

packages/botonic-react/src/components/message/message-footer.tsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react'
 
-import { WebchatContext } from '../../contexts'
 import { SENDERS } from '../../index-types'
+import { WebchatContext } from '../../webchat/context'
 import { MessageFeedback } from './message-feedback'
 import { MessageFooterContainer } from './styles'
 import { MessageTimestamp, resolveMessageTimestamps } from './timestamps'

packages/botonic-react/src/components/message/message-image.tsx

@@ -1,9 +1,9 @@
 import React, { useContext } from 'react'
 
 import { WEBCHAT } from '../../constants'
-import { WebchatContext } from '../../contexts'
 import { SENDERS } from '../../index-types'
 import { resolveImage } from '../../util/environment'
+import { WebchatContext } from '../../webchat/context'
 import { BotMessageImageContainer } from './styles'
 
 interface MessageImageProps {

packages/botonic-react/src/components/message/timestamps.tsx

@@ -1,9 +1,9 @@
 import React, { useContext } from 'react'
 
 import { WEBCHAT } from '../../constants'
-import { WebchatContext } from '../../contexts'
 import { SENDERS } from '../../index-types'
 import { resolveImage } from '../../util'
+import { WebchatContext } from '../../webchat/context'
 import { TimestampContainer, TimestampText } from './styles'
 
 export const resolveMessageTimestamps = (

packages/botonic-react/src/components/reply.tsx

@@ -2,8 +2,8 @@ import React, { useContext } from 'react'
 import styled from 'styled-components'
 
 import { COLORS, WEBCHAT } from '../constants'
-import { WebchatContext } from '../contexts'
 import { renderComponent } from '../util/react'
+import { WebchatContext } from '../webchat/context'
 import { ReplyProps } from './index-types'
 
 const StyledButton = styled.button`

packages/botonic-react/src/components/webchat-settings.tsx

@@ -1,10 +1,10 @@
 import { INPUT } from '@botonic/core'
 import React, { useContext } from 'react'
 
-import { WebchatContext } from '../contexts'
 import { renderComponent } from '../util/react'
 import { stringifyWithRegexs } from '../util/regexs'
-import { WebchatSettingsProps } from '.'
+import { WebchatContext } from '../webchat/context'
+import { WebchatSettingsProps } from './index-types'
 
 export const WebchatSettings = ({
   theme,

packages/botonic-react/src/contexts.tsx

@@ -1,8 +1,7 @@
 import { Input as CoreInput, Session as CoreSession } from '@botonic/core'
 import { createContext } from 'react'
 
-import { ActionRequest, WebchatContextProps } from './index-types'
-import { webchatInitialState } from './webchat/hooks'
+import { ActionRequest } from './index-types'
 
 export const RequestContext = createContext<
   Partial<ActionRequest> & {
@@ -36,77 +35,3 @@ export const WebviewRequestContext = createContext<{
   params: {} as Record<string, any>,
   session: {} as Partial<CoreSession>,
 })
-
-export const WebchatContext = createContext<WebchatContextProps>({
-  addMessage: () => {
-    return
-  },
-  getThemeProperty: () => {
-    return
-  }, // used to retrieve a specific property of the theme defined by the developer in his 'webchat/index.js'
-  openWebview: () => {
-    return
-  },
-  resolveCase: () => {
-    return
-  },
-  resetUnreadMessages: () => {
-    return
-  },
-  setIsInputFocused: () => {
-    return
-  },
-  setLastMessageVisible: () => {
-    return
-  },
-  sendAttachment: async () => {
-    return
-  },
-  sendInput: async () => {
-    return
-  },
-  sendPayload: async () => {
-    return
-  },
-  sendText: async () => {
-    return
-  },
-  theme: {},
-  toggleCoverComponent: () => {
-    return
-  },
-  toggleWebchat: () => {
-    return
-  },
-  toggleEmojiPicker: () => {
-    return
-  },
-  togglePersistentMenu: () => {
-    return
-  },
-  updateLatestInput: () => {
-    return
-  },
-  updateMessage: () => {
-    return
-  },
-  updateReplies: () => {
-    return
-  },
-  updateUser: () => {
-    return
-  },
-  updateWebchatDevSettings: () => {
-    return
-  },
-  webchatState: webchatInitialState,
-  trackEvent: async () => {
-    return
-  },
-  webchatRef: { current: null },
-  chatAreaRef: { current: null },
-  inputPanelRef: { current: null },
-  headerRef: { current: null },
-  scrollableMessagesListRef: { current: null },
-  repliesRef: { current: null },
-})

packages/botonic-react/src/index-types.ts

@@ -11,7 +11,6 @@ import {
 } from '@botonic/core'
 import React from 'react'
 
-import { Reply } from './components'
 import {
   BlockInputOption,
   ButtonProps,
@@ -20,11 +19,9 @@ import {
   ReplyProps,
   ThemeProps,
   WebchatSettingsProps,
-  Webview,
 } from './components/index-types'
 import { CloseWebviewOptions } from './contexts'
-import { UseWebchat } from './webchat/hooks/use-webchat'
-import { WebchatState } from './webchat/index-types'
+import { UseWebchat } from './webchat/context/use-webchat'
 import { WebchatApp } from './webchat-app'
 
 /**
@@ -214,38 +211,3 @@ interface UpdateMessageInfoEvent {
   message: MessageInfo
   isError?: boolean
 }
-
-// ClientInput: type for sendInput and updateLatestInput function without message_id and bot_interaction_id because backend set this values
-export type ClientInput = Omit<CoreInput, 'message_id' | 'bot_interaction_id'>
-
-export interface WebchatContextProps {
-  addMessage: (message: WebchatMessage) => void
-  getThemeProperty: (property: string, defaultValue?: any) => any
-  openWebview: (webviewComponent: Webview, params?: any) => void
-  resetUnreadMessages: () => void
-  resolveCase: () => void
-  sendAttachment: (attachment: File) => Promise<void>
-  sendInput: (input: ClientInput) => Promise<void>
-  sendPayload: (payload: string) => Promise<void>
-  sendText: (text: string, payload?: string) => Promise<void>
-  setIsInputFocused: (isInputFocused: boolean) => void
-  setLastMessageVisible: (isLastMessageVisible: boolean) => void
-  theme: ThemeProps // TODO: Review if theme is needed and used from WebchatContext
-  toggleWebchat: (toggle: boolean) => void
-  toggleEmojiPicker: (toggle: boolean) => void
-  togglePersistentMenu: (toggle: boolean) => void
-  toggleCoverComponent: (toggle: boolean) => void
-  updateLatestInput: (input: ClientInput) => void
-  updateMessage: (message: WebchatMessage) => void
-  updateReplies: (replies: (typeof Reply)[]) => void
-  updateUser: (user: Partial<CoreSessionUser>) => void
-  updateWebchatDevSettings: (settings: WebchatSettingsProps) => void
-  trackEvent?: TrackEventFunction
-  webchatState: WebchatState
-  webchatRef: React.MutableRefObject<HTMLDivElement | null> // Rename this to webchatContainerRef
-  chatAreaRef: React.MutableRefObject<HTMLDivElement | null>
-  inputPanelRef: React.MutableRefObject<HTMLDivElement | null>
-  headerRef: React.MutableRefObject<HTMLDivElement | null>
-  scrollableMessagesListRef: React.MutableRefObject<HTMLDivElement | null>
-  repliesRef: React.MutableRefObject<HTMLDivElement | null>
-}

packages/botonic-react/src/index.ts

@@ -1,10 +1,6 @@
 export { BotonicInputTester, BotonicOutputTester } from './botonic-tester'
 export * from './components'
-export {
-  RequestContext,
-  WebchatContext,
-  WebviewRequestContext,
-} from './contexts'
+export { RequestContext, WebviewRequestContext } from './contexts'
 export { DevApp } from './dev-app'
 export * from './index-types'
 export { msgsToBotonic, msgToBotonic } from './msg-to-botonic'

packages/botonic-react/src/webchat/chat-area/index.tsx

@@ -1,7 +1,7 @@
 import React, { useContext, useEffect, useState } from 'react'
 
-import { WebchatContext } from '../../contexts'
 import { BotonicContainerId } from '../constants'
+import { WebchatContext } from '../context'
 import { useWebchatDimensions } from '../hooks'
 import { WebchatMessageList } from '../message-list'
 import { WebchatReplies } from '../replies'

packages/botonic-react/src/webchat/components/conditional-animation.jsx

@@ -1,9 +1,9 @@
 import React, { useContext } from 'react'
 
 import { WEBCHAT } from '../../constants'
-import { WebchatContext } from '../../contexts'
 import { Scale } from '../../shared/styles'
 import { ConditionalWrapper } from '../../util/react'
+import { WebchatContext } from '../context'
 
 export const ConditionalAnimation = props => {
   const { getThemeProperty } = useContext(WebchatContext)

packages/botonic-react/src/webchat/components/opened-persistent-menu.jsx

@@ -3,7 +3,7 @@ import styled from 'styled-components'
 
 import { Button } from '../../components/button'
 import { ROLES, WEBCHAT } from '../../constants'
-import { WebchatContext } from '../../contexts'
+import { WebchatContext } from '../context'
 import { useComponentVisible } from '../hooks'
 
 const ButtonsContainer = styled.div`