Fix tests

packages/component/src/BasicSendBox.tsx

@@ -6,7 +6,6 @@ import React, { FC } from 'react';
 
 import DictationInterims from './SendBox/DictationInterims';
 import MicrophoneButton from './SendBox/MicrophoneButton';
-import SendBoxComposer from './providers/internal/SendBox/SendBoxComposer';
 import SendButton from './SendBox/SendButton';
 import SuggestedActions from './SendBox/SuggestedActions';
 import TextBox from './SendBox/TextBox';
@@ -53,7 +52,7 @@ type BasicSendBoxProps = {
   className?: string;
 };
 
-const BasicSendBoxCore: FC<BasicSendBoxProps> = ({ className }) => {
+const BasicSendBox: FC<BasicSendBoxProps> = ({ className }) => {
   const [{ hideUploadButton, sendBoxButtonAlignment }] = useStyleOptions();
   const [{ sendBox: sendBoxStyleSet }] = useStyleSet();
   const [{ SpeechRecognition = undefined } = {}] = useWebSpeechPonyfill();
@@ -98,23 +97,14 @@ const BasicSendBoxCore: FC<BasicSendBoxProps> = ({ className }) => {
   );
 };
 
-BasicSendBoxCore.defaultProps = {
+BasicSendBox.defaultProps = {
   className: ''
 };
 
-BasicSendBoxCore.propTypes = {
+BasicSendBox.propTypes = {
   className: PropTypes.string
 };
 
-const BasicSendBox: FC<BasicSendBoxProps> = (props: BasicSendBoxProps) => (
-  <SendBoxComposer>
-    <BasicSendBoxCore {...props} />
-  </SendBoxComposer>
-);
-
-BasicSendBox.defaultProps = BasicSendBoxCore.defaultProps;
-BasicSendBox.propTypes = BasicSendBoxCore.propTypes;
-
 export default BasicSendBox;
 
 export { useSendBoxSpeechInterimsVisible };

packages/component/src/Composer.tsx

@@ -27,6 +27,7 @@ import Dictation from './Dictation';
 import downscaleImageToDataURL from './Utils/downscaleImageToDataURL';
 import ErrorBox from './ErrorBox';
 import mapMap from './Utils/mapMap';
+import SendBoxComposer from './providers/internal/SendBox/SendBoxComposer';
 import UITracker from './hooks/internal/UITracker';
 import WebChatUIContext from './hooks/internal/WebChatUIContext';
 
@@ -227,8 +228,11 @@ const ComposerCore: FC<ComposerCoreProps> = ({
   return (
     <SayComposer ponyfill={webSpeechPonyfill}>
       <WebChatUIContext.Provider value={context}>
-        {children}
-        <Dictation onError={dictationOnError} />
+        {/* When <SendBoxComposer> is finalized, it will be using an independent instance that lives inside <BasicSendBox>. */}
+        <SendBoxComposer>
+          {children}
+          <Dictation onError={dictationOnError} />
+        </SendBoxComposer>
       </WebChatUIContext.Provider>
     </SayComposer>
   );

packages/component/src/providers/internal/SendBox/SendBoxComposer.tsx

@@ -39,8 +39,13 @@ const TIME_TO_RESET_ERROR_MESSAGE = 50;
 
 // This component is marked as internal because it is not fully implemented and is not ready to be consumed publicly.
 // When it is done, it should provide and replace all the functionalities we did in Redux, including but not limited to:
-//       - Speech interims
-//       - Maintain text box value
+
+// - Speech interims
+// - Maintain text box value
+// - Multiple <SendBoxComposer> in a single Web Chat instance
+//    - Web devs should be able to put an individual send box instance into an activity
+//    - The send box instance in the activity, should be separated from the bottommost send box
+//    - The valued typed inside the activity, should be separated from the value typed into the bottommost send box
 
 // In the old days, we use Redux to keep the send box state.
 // However, when web devs put 2 send box on their page, it makes things complex because both send boxes will interact with each other.
@@ -88,8 +93,8 @@ const SendBoxComposer = ({ children }: PropsWithChildren<{}>) => {
 
   const submit = useCallback<ContextType['submit']>(
     ({ setFocus } = {}) => {
-      (setFocus === 'sendBox' || setFocus === 'sendBoxWithoutKeyboard') &&
-        focusRef.current?.(setFocus === 'sendBox' ? 'sendBox' : 'sendBoxWithoutKeyboard');
+      (setFocus === 'main' || setFocus === 'sendBox' || setFocus === 'sendBoxWithoutKeyboard') &&
+        focusRef.current?.(setFocus === 'main' || setFocus === 'sendBox' ? setFocus : 'sendBoxWithoutKeyboard');
 
       const { current: submitError } = submitErrorRef;
 

packages/component/src/providers/internal/SendBox/private/types.ts

@@ -1,5 +1,5 @@
 export type ContextType = {
-  submit: (options?: { setFocus?: 'sendBox' | 'sendBoxWithoutKeyboard' }) => void;
+  submit: (options?: { setFocus?: 'main' | 'sendBox' | 'sendBoxWithoutKeyboard' }) => void;
   submitErrorMessageIdState: readonly [string];
 };
 

packages/component/src/providers/internal/SendBox/useSubmit.ts

@@ -1,7 +1,7 @@
 import useSendBoxContext from './private/useContext';
 
 type SubmitOptions = {
-  setFocus?: 'sendBox' | 'sendBoxWithoutKeyboard';
+  setFocus?: 'main' | 'sendBox' | 'sendBoxWithoutKeyboard';
 };
 
 /**