diff --git a/web/chat/typeahead-tooltip.react.js b/web/chat/typeahead-tooltip.react.js --- a/web/chat/typeahead-tooltip.react.js +++ b/web/chat/typeahead-tooltip.react.js @@ -5,10 +5,10 @@ import type { RelativeMemberInfo } from 'lib/types/thread-types'; -import Button from '../components/button.react'; import type { InputState } from '../input/input-state'; import { getTypeaheadTooltipActions, + getTypeaheadTooltipButtons, getTypeaheadTooltipPosition, } from '../utils/typeahead-utils'; import type { TypeaheadMatchedStrings } from './chat-input-bar.react'; @@ -70,13 +70,10 @@ [tooltipPosition], ); - const tooltipButtons = React.useMemo(() => { - return actions.map(({ key, onClick, actionButtonContent }) => ( - - )); - }, [actions]); + const tooltipButtons = React.useMemo( + () => getTypeaheadTooltipButtons(actions), + [actions], + ); if (!actions || actions.length === 0) { return null; diff --git a/web/utils/typeahead-utils.js b/web/utils/typeahead-utils.js --- a/web/utils/typeahead-utils.js +++ b/web/utils/typeahead-utils.js @@ -7,6 +7,8 @@ import type { RelativeMemberInfo } from 'lib/types/thread-types'; import { typeaheadStyle } from '../chat/chat-constants'; +import css from '../chat/typeahead-tooltip.css'; +import Button from '../components/button.react'; const webTypeaheadRegex: RegExp = new RegExp( `(?(?:^(?:.|\n)*\\s+)|^)@(?${oldValidUsernameRegexString})?$`, @@ -119,6 +121,16 @@ actionButtonContent: stringForUserExplicit(suggestedUser), })); } + +function getTypeaheadTooltipButtons( + actions: $ReadOnlyArray, +): $ReadOnlyArray { + return actions.map(({ key, onClick, actionButtonContent }) => ( + + )); +} function getTypeaheadTooltipPosition( textarea: HTMLTextAreaElement, actionsLength: number, @@ -158,6 +170,7 @@ webTypeaheadRegex, getCaretOffsets, getTypeaheadTooltipActions, + getTypeaheadTooltipButtons, getTypeaheadTooltipPosition, positiveModulo, };