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,
};