diff --git a/packages/component/src/Composer.tsx b/packages/component/src/Composer.tsx index 27a9d37c05..e2023e7dd8 100644 --- a/packages/component/src/Composer.tsx +++ b/packages/component/src/Composer.tsx @@ -14,7 +14,7 @@ import { singleToArray } from 'botframework-webchat-core'; import classNames from 'classnames'; import MarkdownIt from 'markdown-it'; import PropTypes from 'prop-types'; -import React, { memo, useCallback, useMemo, useRef, useState, type ReactNode } from 'react'; +import React, { forwardRef, memo, useCallback, useImperativeHandle, useMemo, useRef, useState, type ReactNode } from 'react'; import { Composer as SayComposer } from 'react-say'; import createDefaultAttachmentMiddleware from './Attachment/createMiddleware'; @@ -27,6 +27,7 @@ import { import { StyleToEmotionObjectComposer, useStyleToEmotionObject } from './hooks/internal/styleToEmotionObject'; import UITracker from './hooks/internal/UITracker'; import useInjectStyles from './hooks/internal/useInjectStyles'; +import useFocus from './hooks/useFocus'; import WebChatUIContext from './hooks/internal/WebChatUIContext'; import { FocusSendBoxScope } from './hooks/sendBoxFocus'; import { ScrollRelativeTranscriptScope } from './hooks/transcriptScrollRelative'; @@ -60,6 +61,10 @@ import mapMap from './Utils/mapMap'; const { useGetActivityByKey, useReferenceGrammarID, useStyleOptions, useTrackException } = hooks; +export type ComposerRef = { + focusSendBoxInput: () => Promise; +}; + function styleSetToEmotionObjects(styleToEmotionObject, styleSet) { return mapMap(styleSet, (style, key) => (key === 'options' ? style : styleToEmotionObject(style))); } @@ -489,11 +494,25 @@ const InternalComposer = ({ ); }; -const Composer = (props: ComposerProps) => ( - - - -); +const Composer = forwardRef((props, ref) => { + const focus = useFocus(); + + useImperativeHandle( + ref, + () => ({ + focusSendBoxInput: () => focus('sendBox') + }), + [focus] + ); + + return ( + + + + ); +}); + +Composer.displayName = 'Composer'; Composer.defaultProps = { ...APIComposer.defaultProps,