diff --git a/web/chat/mention-suggestion-tooltip.react.js b/web/chat/mention-suggestion-tooltip.react.js
--- a/web/chat/mention-suggestion-tooltip.react.js
+++ b/web/chat/mention-suggestion-tooltip.react.js
@@ -2,28 +2,83 @@
 
 import * as React from 'react';
 
+import SearchIndex from 'lib/shared/search-index';
+import { threadOtherMembers } from 'lib/shared/thread-utils';
+import type { RelativeMemberInfo } from 'lib/types/thread-types';
+
 import Button from '../components/button.react';
+import type { InputState } from '../input/input-state';
 import css from './mention-suggestion-tooltip.css';
+import {
+  getTypeaheadTooltipActions,
+  getTypeaheadTooltipPosition,
+  getTypeaheadUserSuggestions,
+} from './mention-utils';
 
-export type MentionSuggestionTooltipAction = {
-  +key: string,
-  +onClick: (SyntheticEvent<HTMLButtonElement>) => mixed,
-  +actionButtonContent: React.Node,
-};
-
-export type TooltipPosition = {
-  +top: number,
-  +left: number,
-};
 export type MentionSuggestionTooltipProps = {
-  +actions: $ReadOnlyArray<MentionSuggestionTooltipAction>,
-  +tooltipPosition: TooltipPosition,
+  +inputState: InputState,
+  +textarea: HTMLTextAreaElement,
+  +userSearchIndex: SearchIndex,
+  +threadMembers: $ReadOnlyArray<RelativeMemberInfo>,
+  +viewerID: ?string,
+  +matchedText: string,
+  +matchedTextBeforeAtSymbol: string,
+  +matchedUsernamePrefix: string,
 };
 
 function MentionSuggestionTooltip(
   props: MentionSuggestionTooltipProps,
 ): React.Node {
-  const { actions, tooltipPosition } = props;
+  const {
+    inputState,
+    textarea,
+    userSearchIndex,
+    threadMembers,
+    viewerID,
+    matchedText,
+    matchedTextBeforeAtSymbol,
+    matchedUsernamePrefix,
+  } = props;
+
+  const typedPrefix = matchedUsernamePrefix ?? '';
+
+  const suggestedUsers = React.useMemo(
+    () =>
+      getTypeaheadUserSuggestions(
+        userSearchIndex,
+        threadOtherMembers(threadMembers, viewerID),
+        typedPrefix,
+      ),
+    [userSearchIndex, threadMembers, viewerID, typedPrefix],
+  );
+
+  const actions = React.useMemo(
+    () =>
+      getTypeaheadTooltipActions(
+        inputState,
+        textarea,
+        suggestedUsers,
+        matchedTextBeforeAtSymbol,
+        matchedText,
+      ),
+    [
+      inputState,
+      textarea,
+      suggestedUsers,
+      matchedTextBeforeAtSymbol,
+      matchedText,
+    ],
+  );
+
+  const tooltipPosition = React.useMemo(
+    () =>
+      getTypeaheadTooltipPosition(
+        textarea,
+        actions.length,
+        matchedTextBeforeAtSymbol,
+      ),
+    [textarea, actions.length, matchedTextBeforeAtSymbol],
+  );
 
   const tooltipPositionStyle = React.useMemo(
     () => ({
diff --git a/web/chat/mention-utils.js b/web/chat/mention-utils.js
--- a/web/chat/mention-utils.js
+++ b/web/chat/mention-utils.js
@@ -92,7 +92,7 @@
   textarea: HTMLTextAreaElement,
   suggestedUsers: $ReadOnlyArray<RelativeMemberInfo>,
   matchedTextBefore: string,
-  wholeMatch: string,
+  matchedText: string,
 ): $ReadOnlyArray<MentionSuggestionTooltipAction> {
   return suggestedUsers
     .filter(
@@ -103,7 +103,7 @@
       onClick: () => {
         const newPrefixText = matchedTextBefore;
 
-        let newSuffixText = inputState.draft.slice(wholeMatch.length);
+        let newSuffixText = inputState.draft.slice(matchedText.length);
         newSuffixText = (newSuffixText[0] !== ' ' ? ' ' : '') + newSuffixText;
 
         const newText =