diff --git a/lib/utils/entity-text.js b/lib/utils/entity-text.js
index 43520e315..278d1bc0c 100644
--- a/lib/utils/entity-text.js
+++ b/lib/utils/entity-text.js
@@ -1,581 +1,589 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import t, { type TInterface, type TUnion } from 'tcomb';
 
 import type { GetENSNames } from './ens-helpers.js';
 import { tID, tShape, tString } from './validation-utils.js';
 import { useENSNames } from '../hooks/ens-cache.js';
 import { threadNoun } from '../shared/thread-utils.js';
 import { stringForUser } from '../shared/user-utils.js';
 import {
   type ThreadType,
   threadTypes,
   threadTypeValidator,
 } from '../types/thread-types-enum.js';
 import { type RawThreadInfo, type ThreadInfo } from '../types/thread-types.js';
 import { basePluralize } from '../utils/text-utils.js';
 
 type UserEntity = {
   +type: 'user',
   +id: string,
   +username?: ?string,
   +isViewer?: ?boolean,
   +possessive?: ?boolean, // eg. `user's` instead of `user`
 };
 export const userEntityValidator: TInterface<UserEntity> = tShape<UserEntity>({
   type: tString('user'),
   id: t.String,
   username: t.maybe(t.String),
   isViewer: t.maybe(t.Boolean),
   possessive: t.maybe(t.Boolean),
 });
 
 // Comments explain how thread name will appear from user4's perspective
 export type ThreadEntity =
   | {
       +type: 'thread',
       +id: string,
       +name?: ?string,
       // displays threadInfo.name if set, or 'user1, user2, and user3'
       +display: 'uiName',
       // If uiName is EntityText, then at render time ThreadEntity will be
       // replaced with a pluralized list of uiName's UserEntities
       +uiName: $ReadOnlyArray<UserEntity> | string,
       // If name isn't set and uiName is an array with only the viewer, then
       // just_you_string displays "just you" but viewer_username displays the
       // viewer's ENS-resolved username. Defaults to just_you_string
       +ifJustViewer?: 'just_you_string' | 'viewer_username',
     }
   | {
       +type: 'thread',
       +id: string,
       +name?: ?string,
       // displays threadInfo.name if set, or eg. 'this thread' or 'this chat'
       +display: 'shortName',
       +threadType?: ?ThreadType,
       +parentThreadID?: ?string,
       +alwaysDisplayShortName?: ?boolean, // don't default to name
       +subchannel?: ?boolean, // short name should be "subchannel"
       +possessive?: ?boolean, // eg. `this thread's` instead of `this thread`
     };
 
 export const threadEntityValidator: TUnion<ThreadEntity> = t.union([
   tShape({
     type: tString('thread'),
     id: tID,
     name: t.maybe(t.String),
     display: tString('uiName'),
     uiName: t.union([t.list(userEntityValidator), t.String]),
     ifJustViewer: t.maybe(t.enums.of(['just_you_string', 'viewer_username'])),
   }),
   tShape({
     type: tString('thread'),
     id: tID,
     name: t.maybe(t.String),
     display: tString('shortName'),
     threadType: t.maybe(threadTypeValidator),
     parentThreadID: t.maybe(tID),
     alwaysDisplayShortName: t.maybe(t.Boolean),
     subchannel: t.maybe(t.Boolean),
     possessive: t.maybe(t.Boolean),
   }),
 ]);
 
 type ColorEntity = {
   +type: 'color',
   +hex: string,
 };
 
 type EntityTextComponent = UserEntity | ThreadEntity | ColorEntity | string;
 
 export type EntityText = $ReadOnlyArray<EntityTextComponent>;
 
 const entityTextFunction = (
   strings: $ReadOnlyArray<string>,
   ...entities: $ReadOnlyArray<EntityTextComponent | EntityText>
 ) => {
   const result = [];
   for (let i = 0; i < strings.length; i++) {
     const str = strings[i];
     if (str) {
       result.push(str);
     }
     const entity = entities[i];
     if (!entity) {
       continue;
     }
 
     if (typeof entity === 'string') {
       const lastResult = result.length > 0 && result[result.length - 1];
       if (typeof lastResult === 'string') {
         result[result.length - 1] = lastResult + entity;
       } else {
         result.push(entity);
       }
     } else if (Array.isArray(entity)) {
       const [firstEntity, ...restOfEntity] = entity;
       const lastResult = result.length > 0 && result[result.length - 1];
       if (typeof lastResult === 'string' && typeof firstEntity === 'string') {
         result[result.length - 1] = lastResult + firstEntity;
       } else if (firstEntity) {
         result.push(firstEntity);
       }
       result.push(...restOfEntity);
     } else {
       result.push(entity);
     }
   }
   return result;
 };
 
 // defaults to shortName
 type EntityTextThreadInput =
   | {
       +display: 'uiName',
       +threadInfo: ThreadInfo,
     }
   | {
       +display?: 'shortName',
       +threadInfo: ThreadInfo | RawThreadInfo,
       +subchannel?: ?boolean,
       +possessive?: ?boolean,
     }
   | {
       +display: 'alwaysDisplayShortName',
       +threadInfo: ThreadInfo | RawThreadInfo,
       +possessive?: ?boolean,
     }
   | {
       +display: 'alwaysDisplayShortName',
       +threadID: string,
       +parentThreadID?: ?string,
       +threadType?: ?ThreadType,
       +possessive?: ?boolean,
     };
 // ESLint doesn't recognize that invariant always throws
 // eslint-disable-next-line consistent-return
 entityTextFunction.thread = (input: EntityTextThreadInput) => {
   if (input.display === 'uiName') {
     const { threadInfo } = input;
     if (typeof threadInfo.uiName !== 'string') {
       return threadInfo.uiName;
     }
     return {
       type: 'thread',
       id: threadInfo.id,
       name: threadInfo.name,
       display: 'uiName',
       uiName: threadInfo.uiName,
     };
   }
   if (input.display === 'alwaysDisplayShortName' && input.threadID) {
     const { threadID, threadType, parentThreadID, possessive } = input;
     return {
       type: 'thread',
       id: threadID,
       name: undefined,
       display: 'shortName',
       threadType,
       parentThreadID,
       alwaysDisplayShortName: true,
       possessive,
     };
   } else if (input.display === 'alwaysDisplayShortName' && input.threadInfo) {
     const { threadInfo, possessive } = input;
     return {
       type: 'thread',
       id: threadInfo.id,
       name: threadInfo.name,
       display: 'shortName',
       threadType: threadInfo.type,
       parentThreadID: threadInfo.parentThreadID,
       alwaysDisplayShortName: true,
       possessive,
     };
   } else if (input.display === 'shortName' || !input.display) {
     const { threadInfo, subchannel, possessive } = input;
     return {
       type: 'thread',
       id: threadInfo.id,
       name: threadInfo.name,
       display: 'shortName',
       threadType: threadInfo.type,
       parentThreadID: threadInfo.parentThreadID,
       subchannel,
       possessive,
     };
   }
   invariant(
     false,
     `ET.thread passed unexpected display type: ${input.display}`,
   );
 };
 
 type EntityTextUserInput = {
   +userInfo: {
     +id: string,
     +username?: ?string,
     +isViewer?: ?boolean,
     ...
   },
   +possessive?: ?boolean,
 };
 entityTextFunction.user = (input: EntityTextUserInput) => ({
   type: 'user',
   id: input.userInfo.id,
   username: input.userInfo.username,
   isViewer: input.userInfo.isViewer,
   possessive: input.possessive,
 });
 
 type EntityTextColorInput = { +hex: string };
 entityTextFunction.color = (input: EntityTextColorInput) => ({
   type: 'color',
   hex: input.hex,
 });
 
 // ET is a JS tag function used in template literals, eg. ET`something`
 // It allows you to compose raw text and "entities" together
 type EntityTextFunction = ((
   strings: $ReadOnlyArray<string>,
   ...entities: $ReadOnlyArray<EntityTextComponent | EntityText>
 ) => EntityText) & {
   +thread: EntityTextThreadInput => ThreadEntity,
   +user: EntityTextUserInput => UserEntity,
   +color: EntityTextColorInput => ColorEntity,
   ...
 };
 const ET: EntityTextFunction = entityTextFunction;
 
 type MakePossessiveInput = { +str: string, +isViewer?: ?boolean };
 function makePossessive(input: MakePossessiveInput) {
   if (input.isViewer) {
     return 'your';
   }
   return `${input.str}’s`;
 }
 
 function getNameForThreadEntity(
   entity: ThreadEntity,
   params?: ?EntityTextToRawStringParams,
 ): string {
   const { name: userGeneratedName, display } = entity;
   if (entity.display === 'uiName') {
     if (userGeneratedName) {
       return userGeneratedName;
     }
     const { uiName } = entity;
     if (typeof uiName === 'string') {
       return uiName;
     }
 
     let userEntities = uiName;
     if (!params?.ignoreViewer) {
       const viewerFilteredUserEntities = userEntities.filter(
         innerEntity => !innerEntity.isViewer,
       );
       if (viewerFilteredUserEntities.length > 0) {
         userEntities = viewerFilteredUserEntities;
       } else if (entity.ifJustViewer === 'viewer_username') {
         // We pass ignoreViewer to entityTextToRawString in order
         // to prevent it from rendering the viewer as "you"
         params = { ...params, ignoreViewer: true };
       } else {
         return 'just you';
       }
     }
 
     const pluralized = pluralizeEntityText(
       userEntities.map(innerEntity => [innerEntity]),
     );
     return entityTextToRawString(pluralized, params);
   }
 
   invariant(
     entity.display === 'shortName',
     `getNameForThreadEntity can't handle thread entity display ${display}`,
   );
 
   let { name } = entity;
   if (!name || entity.alwaysDisplayShortName) {
     const threadType = entity.threadType ?? threadTypes.PERSONAL;
     const { parentThreadID } = entity;
     const noun = entity.subchannel
       ? 'subchannel'
       : threadNoun(threadType, parentThreadID);
     if (entity.id === params?.threadID) {
       const prefixThisThreadNounWith =
         params?.prefixThisThreadNounWith === 'your' ? 'your' : 'this';
       name = `${prefixThisThreadNounWith} ${noun}`;
     } else {
       name = `a ${noun}`;
     }
   }
   if (entity.possessive) {
     name = makePossessive({ str: name });
   }
   return name;
 }
 
 function getNameForUserEntity(
   entity: UserEntity,
   ignoreViewer: ?boolean,
 ): string {
   const isViewer = entity.isViewer && !ignoreViewer;
   const entityWithIsViewerIgnored = { ...entity, isViewer };
   const str = stringForUser(entityWithIsViewerIgnored);
   if (!entityWithIsViewerIgnored.possessive) {
     return str;
   }
   return makePossessive({ str, isViewer });
 }
 
 type EntityTextToRawStringParams = {
   +threadID?: ?string,
   +ignoreViewer?: ?boolean,
   +prefixThisThreadNounWith?: ?('this' | 'your'),
 };
 function entityTextToRawString(
   entityText: EntityText,
   params?: ?EntityTextToRawStringParams,
 ): string {
   // ESLint doesn't recognize that invariant always throws
   // eslint-disable-next-line consistent-return
   const textParts = entityText.map(entity => {
     if (typeof entity === 'string') {
       return entity;
     } else if (entity.type === 'thread') {
       return getNameForThreadEntity(entity, params);
     } else if (entity.type === 'color') {
       return entity.hex;
     } else if (entity.type === 'user') {
       return getNameForUserEntity(entity, params?.ignoreViewer);
     } else {
       invariant(
         false,
         `entityTextToRawString can't handle entity type ${entity.type}`,
       );
     }
   });
   return textParts.join('');
 }
 
 type RenderFunctions = {
   +renderText: ({ +text: string }) => React.Node,
   +renderThread: ({ +id: string, +name: string }) => React.Node,
+  +renderUser: ({ +userID: string, usernameText: string }) => React.Node,
   +renderColor: ({ +hex: string }) => React.Node,
 };
 function entityTextToReact(
   entityText: EntityText,
   threadID: string,
   renderFuncs: RenderFunctions,
 ): React.Node {
-  const { renderText, renderThread, renderColor } = renderFuncs;
+  const { renderText, renderThread, renderUser, renderColor } = renderFuncs;
   // ESLint doesn't recognize that invariant always throws
   // eslint-disable-next-line consistent-return
   return entityText.map((entity, i) => {
     const key = `text${i}`;
     if (typeof entity === 'string') {
       return (
         <React.Fragment key={key}>
           {renderText({ text: entity })}
         </React.Fragment>
       );
     } else if (entity.type === 'thread') {
       const { id } = entity;
       const name = getNameForThreadEntity(entity, { threadID });
       if (id === threadID) {
         return name;
       } else {
         return (
           <React.Fragment key={key}>
             {renderThread({ id, name })}
           </React.Fragment>
         );
       }
     } else if (entity.type === 'color') {
       return (
         <React.Fragment key={key}>
           {renderColor({ hex: entity.hex })}
         </React.Fragment>
       );
     } else if (entity.type === 'user') {
-      return getNameForUserEntity(entity);
+      const userID = entity.id;
+      const usernameText = getNameForUserEntity(entity);
+
+      return (
+        <React.Fragment key={key}>
+          {renderUser({ userID, usernameText })}
+        </React.Fragment>
+      );
     } else {
       invariant(
         false,
         `entityTextToReact can't handle entity type ${entity.type}`,
       );
     }
   });
 }
 
 function pluralizeEntityText(
   nouns: $ReadOnlyArray<EntityText>,
   maxNumberOfNouns: number = 3,
 ): EntityText {
   return basePluralize<EntityText>(
     nouns,
     maxNumberOfNouns,
     (a: EntityText | string, b: ?EntityText | string) =>
       b ? ET`${a}${b}` : ET`${a}`,
   );
 }
 
 type TextEntity = { +type: 'text', +text: string };
 type ShadowUserEntity = {
   +type: 'shadowUser',
   +username: string,
   +originalUsername: string,
 };
 type EntityTextComponentAsObject =
   | UserEntity
   | ThreadEntity
   | ColorEntity
   | TextEntity
   | ShadowUserEntity;
 function entityTextToObjects(
   entityText: EntityText,
 ): EntityTextComponentAsObject[] {
   const objs = [];
   for (const entity of entityText) {
     if (typeof entity === 'string') {
       objs.push({ type: 'text', text: entity });
       continue;
     }
     objs.push(entity);
     if (
       entity.type === 'thread' &&
       entity.display === 'uiName' &&
       typeof entity.uiName !== 'string'
     ) {
       for (const innerEntity of entity.uiName) {
         if (typeof innerEntity === 'string' || innerEntity.type !== 'user') {
           continue;
         }
         const { username } = innerEntity;
         if (username) {
           objs.push({
             type: 'shadowUser',
             originalUsername: username,
             username,
           });
         }
       }
     }
   }
   return objs;
 }
 function entityTextFromObjects(
   objects: $ReadOnlyArray<EntityTextComponentAsObject>,
 ): EntityText {
   const shadowUserMap = new Map<string, string>();
   for (const obj of objects) {
     if (obj.type === 'shadowUser' && obj.username !== obj.originalUsername) {
       shadowUserMap.set(obj.originalUsername, obj.username);
     }
   }
   return objects
     .map(entity => {
       if (entity.type === 'text') {
         return entity.text;
       } else if (entity.type === 'shadowUser') {
         return null;
       } else if (
         entity.type === 'thread' &&
         entity.display === 'uiName' &&
         typeof entity.uiName !== 'string'
       ) {
         const uiName = [];
         let changeOccurred = false;
         for (const innerEntity of entity.uiName) {
           if (typeof innerEntity === 'string' || innerEntity.type !== 'user') {
             uiName.push(innerEntity);
             continue;
           }
           const { username } = innerEntity;
           if (!username) {
             uiName.push(innerEntity);
             continue;
           }
           const ensName = shadowUserMap.get(username);
           if (!ensName) {
             uiName.push(innerEntity);
             continue;
           }
           changeOccurred = true;
           uiName.push({
             ...innerEntity,
             username: ensName,
           });
         }
         if (!changeOccurred) {
           return entity;
         }
         return {
           ...entity,
           uiName,
         };
       } else {
         return entity;
       }
     })
     .filter(Boolean);
 }
 
 function useENSNamesForEntityText(entityText: ?EntityText): ?EntityText {
   const allObjects = React.useMemo(
     () => (entityText ? entityTextToObjects(entityText) : []),
     [entityText],
   );
   const objectsWithENSNames = useENSNames(allObjects);
   return React.useMemo(
     () =>
       entityText ? entityTextFromObjects(objectsWithENSNames) : entityText,
     [entityText, objectsWithENSNames],
   );
 }
 
 function useEntityTextAsString(
   entityText: ?EntityText,
   params?: EntityTextToRawStringParams,
 ): ?string {
   const withENSNames = useENSNamesForEntityText(entityText);
   return React.useMemo(() => {
     if (!withENSNames) {
       return withENSNames;
     }
     return entityTextToRawString(withENSNames, params);
   }, [withENSNames, params]);
 }
 
 async function getEntityTextAsString(
   entityText: ?EntityText,
   getENSNames: ?GetENSNames,
   params?: EntityTextToRawStringParams,
 ): Promise<?string> {
   if (!entityText) {
     return entityText;
   }
 
   let resolvedEntityText = entityText;
   if (getENSNames) {
     const allObjects = entityTextToObjects(entityText);
     const objectsWithENSNames = await getENSNames(allObjects);
     resolvedEntityText = entityTextFromObjects(objectsWithENSNames);
   }
 
   return entityTextToRawString(resolvedEntityText, params);
 }
 
 export {
   ET,
   entityTextToRawString,
   entityTextToReact,
   pluralizeEntityText,
   useENSNamesForEntityText,
   useEntityTextAsString,
   getEntityTextAsString,
 };
diff --git a/native/chat/inner-robotext-message.react.js b/native/chat/inner-robotext-message.react.js
index e981f79aa..ba0b05c3e 100644
--- a/native/chat/inner-robotext-message.react.js
+++ b/native/chat/inner-robotext-message.react.js
@@ -1,150 +1,179 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import { Text, TouchableWithoutFeedback, View } from 'react-native';
 
 import type { ReactionInfo } from 'lib/selectors/chat-selectors.js';
 import { threadInfoSelector } from 'lib/selectors/thread-selectors.js';
 import type { ThreadInfo } from 'lib/types/thread-types.js';
 import {
   entityTextToReact,
   entityTextToRawString,
   useENSNamesForEntityText,
   type EntityText,
 } from 'lib/utils/entity-text.js';
 
 import { DummyInlineEngagementNode } from './inline-engagement.react.js';
 import { useNavigateToThread } from './message-list-types.js';
 import Markdown from '../markdown/markdown.react.js';
 import { inlineMarkdownRules } from '../markdown/rules.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { useOverlayStyles } from '../themes/colors.js';
 import type { ChatRobotextMessageInfoItemWithHeight } from '../types/chat-types.js';
+import { useNavigateToUserProfileBottomSheet } from '../user-profile/user-profile-utils.js';
 
 function dummyNodeForRobotextMessageHeightMeasurement(
   robotext: EntityText,
   threadID: string,
   sidebarInfo: ?ThreadInfo,
   reactions: ReactionInfo,
 ): React.Element<typeof View> {
   return (
     <View>
       <View style={unboundStyles.robotextContainer}>
         <Text style={unboundStyles.dummyRobotext}>
           {entityTextToRawString(robotext, { threadID })}
         </Text>
       </View>
       <DummyInlineEngagementNode
         sidebarInfo={sidebarInfo}
         reactions={reactions}
       />
     </View>
   );
 }
 
 type InnerRobotextMessageProps = {
   +item: ChatRobotextMessageInfoItemWithHeight,
   +onPress: () => void,
   +onLongPress?: () => void,
 };
 function InnerRobotextMessage(props: InnerRobotextMessageProps): React.Node {
   const { item, onLongPress, onPress } = props;
   const activeTheme = useSelector(state => state.globalThemeInfo.activeTheme);
   const styles = useOverlayStyles(unboundStyles);
 
   const { messageInfo, robotext } = item;
   const { threadID } = messageInfo;
   const robotextWithENSNames = useENSNamesForEntityText(robotext);
   invariant(
     robotextWithENSNames,
     'useENSNamesForEntityText only returns falsey when passed falsey',
   );
   const textParts = React.useMemo(() => {
     const darkColor = activeTheme === 'dark';
     return entityTextToReact(robotextWithENSNames, threadID, {
       // eslint-disable-next-line react/display-name
       renderText: ({ text }) => (
         <Markdown
           style={styles.robotext}
           rules={inlineMarkdownRules(darkColor)}
         >
           {text}
         </Markdown>
       ),
       // eslint-disable-next-line react/display-name
       renderThread: ({ id, name }) => <ThreadEntity id={id} name={name} />,
       // eslint-disable-next-line react/display-name
+      renderUser: ({ userID, usernameText }) => (
+        <UserEntity userID={userID} usernameText={usernameText} />
+      ),
+      // eslint-disable-next-line react/display-name
       renderColor: ({ hex }) => <ColorEntity color={hex} />,
     });
   }, [robotextWithENSNames, activeTheme, threadID, styles.robotext]);
 
   return (
     <TouchableWithoutFeedback onPress={onPress} onLongPress={onLongPress}>
       <View style={styles.robotextContainer}>
         <Text style={styles.robotext}>{textParts}</Text>
       </View>
     </TouchableWithoutFeedback>
   );
 }
 
 type ThreadEntityProps = {
   +id: string,
   +name: string,
 };
 function ThreadEntity(props: ThreadEntityProps) {
   const threadID = props.id;
   const threadInfo = useSelector(state => threadInfoSelector(state)[threadID]);
 
   const styles = useOverlayStyles(unboundStyles);
 
   const navigateToThread = useNavigateToThread();
   const onPressThread = React.useCallback(() => {
     invariant(threadInfo, 'onPressThread should have threadInfo');
     navigateToThread({ threadInfo });
   }, [threadInfo, navigateToThread]);
 
   if (!threadInfo) {
     return <Text>{props.name}</Text>;
   }
   return (
     <Text style={styles.link} onPress={onPressThread}>
       {props.name}
     </Text>
   );
 }
 
+type UserEntityProps = {
+  userID: string,
+  usernameText: string,
+};
+function UserEntity(props: UserEntityProps) {
+  const { userID, usernameText } = props;
+
+  const styles = useOverlayStyles(unboundStyles);
+
+  const navigateToUserProfileBottomSheet =
+    useNavigateToUserProfileBottomSheet();
+
+  const onPressUser = React.useCallback(
+    () => navigateToUserProfileBottomSheet(userID),
+    [navigateToUserProfileBottomSheet, userID],
+  );
+
+  return (
+    <Text style={styles.link} onPress={onPressUser}>
+      {usernameText}
+    </Text>
+  );
+}
+
 function ColorEntity(props: { +color: string }) {
   const colorStyle = { color: props.color };
   return <Text style={colorStyle}>{props.color}</Text>;
 }
 
 const unboundStyles = {
   link: {
     color: 'link',
   },
   robotextContainer: {
     paddingTop: 6,
     paddingBottom: 11,
     paddingHorizontal: 24,
   },
   robotext: {
     color: 'listForegroundSecondaryLabel',
     fontFamily: 'Arial',
     fontSize: 15,
     textAlign: 'center',
   },
   dummyRobotext: {
     fontFamily: 'Arial',
     fontSize: 15,
     textAlign: 'center',
   },
 };
 
 const MemoizedInnerRobotextMessage: React.ComponentType<InnerRobotextMessageProps> =
   React.memo<InnerRobotextMessageProps>(InnerRobotextMessage);
 
 export {
   dummyNodeForRobotextMessageHeightMeasurement,
   MemoizedInnerRobotextMessage as InnerRobotextMessage,
 };
diff --git a/web/chat/robotext-message.react.js b/web/chat/robotext-message.react.js
index f842faeda..b35a999d9 100644
--- a/web/chat/robotext-message.react.js
+++ b/web/chat/robotext-message.react.js
@@ -1,145 +1,162 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import { useDispatch } from 'react-redux';
 
 import { type RobotextChatMessageInfoItem } from 'lib/selectors/chat-selectors.js';
 import { threadInfoSelector } from 'lib/selectors/thread-selectors.js';
 import type { Dispatch } from 'lib/types/redux-types.js';
 import { type ThreadInfo } from 'lib/types/thread-types.js';
 import {
   entityTextToReact,
   useENSNamesForEntityText,
 } from 'lib/utils/entity-text.js';
 
 import InlineEngagement from './inline-engagement.react.js';
 import css from './robotext-message.css';
 import Markdown from '../markdown/markdown.react.js';
 import { linkRules } from '../markdown/rules.react.js';
 import { updateNavInfoActionType } from '../redux/action-types.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { useMessageTooltip } from '../utils/tooltip-action-utils.js';
 import { tooltipPositions } from '../utils/tooltip-utils.js';
 
 const availableTooltipPositionsForRobotext = [
   tooltipPositions.LEFT,
   tooltipPositions.LEFT_TOP,
   tooltipPositions.LEFT_BOTTOM,
   tooltipPositions.RIGHT,
   tooltipPositions.RIGHT_TOP,
   tooltipPositions.RIGHT_BOTTOM,
 ];
 
 type Props = {
   +item: RobotextChatMessageInfoItem,
   +threadInfo: ThreadInfo,
 };
 function RobotextMessage(props: Props): React.Node {
   let inlineEngagement;
   const { item, threadInfo } = props;
   const { threadCreatedFromMessage, reactions } = item;
   if (threadCreatedFromMessage || Object.keys(reactions).length > 0) {
     inlineEngagement = (
       <div className={css.sidebarMarginTop}>
         <InlineEngagement
           messageInfo={item.messageInfo}
           threadInfo={threadInfo}
           sidebarThreadInfo={threadCreatedFromMessage}
           reactions={reactions}
           positioning="center"
         />
       </div>
     );
   }
 
   const { messageInfo, robotext } = item;
   const { threadID } = messageInfo;
   const robotextWithENSNames = useENSNamesForEntityText(robotext);
   invariant(
     robotextWithENSNames,
     'useENSNamesForEntityText only returns falsey when passed falsey',
   );
   const textParts = React.useMemo(() => {
     return entityTextToReact(robotextWithENSNames, threadID, {
       // eslint-disable-next-line react/display-name
       renderText: ({ text }) => (
         <Markdown rules={linkRules(false)}>{text}</Markdown>
       ),
       // eslint-disable-next-line react/display-name
       renderThread: ({ id, name }) => <ThreadEntity id={id} name={name} />,
       // eslint-disable-next-line react/display-name
+      renderUser: ({ userID, usernameText }) => (
+        <UserEntity userID={userID} usernameText={usernameText} />
+      ),
+      // eslint-disable-next-line react/display-name
       renderColor: ({ hex }) => <ColorEntity color={hex} />,
     });
   }, [robotextWithENSNames, threadID]);
 
   const { onMouseEnter, onMouseLeave } = useMessageTooltip({
     item,
     threadInfo,
     availablePositions: availableTooltipPositionsForRobotext,
   });
 
   return (
     <div className={css.robotextContainer}>
       <div
         className={css.innerRobotextContainer}
         onMouseEnter={onMouseEnter}
         onMouseLeave={onMouseLeave}
       >
         <span>{textParts}</span>
       </div>
       {inlineEngagement}
     </div>
   );
 }
 
 type BaseInnerThreadEntityProps = {
   +id: string,
   +name: string,
 };
 type InnerThreadEntityProps = {
   ...BaseInnerThreadEntityProps,
   +threadInfo: ThreadInfo,
   +dispatch: Dispatch,
 };
 class InnerThreadEntity extends React.PureComponent<InnerThreadEntityProps> {
   render() {
     return <a onClick={this.onClickThread}>{this.props.name}</a>;
   }
 
   onClickThread = (event: SyntheticEvent<HTMLAnchorElement>) => {
     event.preventDefault();
     const id = this.props.id;
     this.props.dispatch({
       type: updateNavInfoActionType,
       payload: {
         activeChatThreadID: id,
       },
     });
   };
 }
 const ThreadEntity = React.memo<BaseInnerThreadEntityProps>(
   function ConnectedInnerThreadEntity(props: BaseInnerThreadEntityProps) {
     const { id } = props;
     const threadInfo = useSelector(state => threadInfoSelector(state)[id]);
     const dispatch = useDispatch();
 
     return (
       <InnerThreadEntity
         {...props}
         threadInfo={threadInfo}
         dispatch={dispatch}
       />
     );
   },
 );
 
+type UserEntityProps = {
+  userID: string,
+  usernameText: string,
+};
+// Since entityTextToReact lives in lib I created this dummy UserEntity
+// component for web that will be used temporarily to appease flow
+// https://phab.comm.dev/D9389
+function UserEntity(props: UserEntityProps) {
+  const { usernameText } = props;
+
+  return usernameText;
+}
+
 function ColorEntity(props: { color: string }) {
   const colorStyle = { color: props.color };
   return <span style={colorStyle}>{props.color}</span>;
 }
 
 const MemoizedRobotextMessage: React.ComponentType<Props> =
   React.memo<Props>(RobotextMessage);
 
 export default MemoizedRobotextMessage;