refactor: remove webchat prefix from input panel and chat area

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

@@ -5,9 +5,9 @@ import { BotonicContainerId } from '../constants'
 import { useWebchatDimensions } from '../hooks'
 import { WebchatMessageList } from '../message-list'
 import { WebchatReplies } from '../replies'
-import { StyledWebchatChatArea } from './styles'
+import { StyledChatArea } from './styles'
 
-export const WebchatChatArea = () => {
+export const ChatArea = () => {
   const {
     webchatState: { replies },
     chatAreaRef,
@@ -21,7 +21,7 @@ export const WebchatChatArea = () => {
   }, [])
 
   return (
-    <StyledWebchatChatArea
+    <StyledChatArea
       id={BotonicContainerId.ChatArea}
       ref={chatAreaRef}
       height={chatAreaHeight}
@@ -30,6 +30,6 @@ export const WebchatChatArea = () => {
       {replies && Object.keys(replies).length > 0 && (
         <WebchatReplies replies={replies} />
       )}
-    </StyledWebchatChatArea>
+    </StyledChatArea>
   )
 }

packages/botonic-react/src/webchat/webchat-chat-area/styles.ts → packages/botonic-react/src/webchat/chat-area/styles.ts

@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-export const StyledWebchatChatArea = styled.div<{ height: number }>`
+export const StyledChatArea = styled.div<{ height: number }>`
   display: inherit;
   flex-direction: inherit;
   height: ${props => props.height}px;

packages/botonic-react/src/webchat/webchat-input-panel/index.tsx → packages/botonic-react/src/webchat/input-panel/index.tsx

@@ -14,7 +14,7 @@ import { SendButton } from './send-button'
 import { UserInputContainer } from './styles'
 import { Textarea } from './textarea'
 
-interface WebchatInputPanelProps {
+interface InputPanelProps {
   persistentMenu: any
   enableEmojiPicker: boolean
   enableAttachments: boolean
@@ -24,15 +24,15 @@ interface WebchatInputPanelProps {
   onUserInput?: (event: any) => Promise<void>
 }
 
-export const WebchatInputPanel = ({
+export const InputPanel = ({
   persistentMenu,
   enableEmojiPicker,
   enableAttachments,
   handleAttachment,
   textareaRef,
   host,
   onUserInput,
-}: WebchatInputPanelProps) => {
+}: InputPanelProps) => {
   const {
     getThemeProperty,
     sendText,

packages/botonic-react/src/webchat/webchat.jsx

@@ -41,6 +41,7 @@ import {
   initSession,
   shouldKeepSessionOnReload,
 } from '../util/webchat'
+import { ChatArea } from './chat-area'
 import { OpenedPersistentMenu } from './components/opened-persistent-menu'
 import { BotonicContainerId } from './constants'
 import { WebchatHeader } from './header'
@@ -51,11 +52,10 @@ import {
   useTyping,
   useWebchat,
 } from './hooks'
+import { InputPanel } from './input-panel'
 import { TriggerButton } from './trigger-button'
 import { useStorageState } from './use-storage-state-hook'
 import { getParsedAction } from './utils'
-import { WebchatChatArea } from './webchat-chat-area'
-import { WebchatInputPanel } from './webchat-input-panel'
 import { WebviewContainer } from './webview'
 
 const StyledWebchat = styled.div`
@@ -727,7 +727,7 @@ export const Webchat = forwardRef((props, ref) => {
         <StyledWebchat
           id={BotonicContainerId.Webchat}
           ref={webchatRef}
-          // TODO: Distinguis between multiple instances of webchat, e.g. `${uniqueId}-botonic-webchat`
+          // TODO: Distinguish between multiple instances of webchat, e.g. `${uniqueId}-botonic-webchat`
           role={ROLES.WEBCHAT}
           width={webchatState.width}
           height={webchatState.height}
@@ -748,13 +748,13 @@ export const Webchat = forwardRef((props, ref) => {
               <ErrorMessage>{webchatState.error.message}</ErrorMessage>
             </ErrorMessageContainer>
           )}
-          <WebchatChatArea />
+          <ChatArea />
 
           {webchatState.isPersistentMenuOpen && (
             <DarkenBackground component={persistentMenu()} />
           )}
           {!webchatState.handoff && userInputEnabled && (
-            <WebchatInputPanel
+            <InputPanel
               persistentMenu={props.persistentMenu}
               enableEmojiPicker={props.enableEmojiPicker}
               enableAttachments={props.enableAttachments}