diff --git a/lib/hooks/inline-sidebar-text.react.js b/lib/hooks/inline-engagement-text.react.js
similarity index 68%
rename from lib/hooks/inline-sidebar-text.react.js
rename to lib/hooks/inline-engagement-text.react.js
index d7a6d2a65..744f8ef22 100644
--- a/lib/hooks/inline-sidebar-text.react.js
+++ b/lib/hooks/inline-engagement-text.react.js
@@ -1,13 +1,13 @@
 // @flow
 
 import type { ThreadInfo } from '../types/thread-types';
 
-function useInlineSidebarText(threadInfo: ?ThreadInfo): string {
+function useInlineEngagementText(threadInfo: ?ThreadInfo): string {
   if (!threadInfo) {
     return '';
   }
   const repliesCount = threadInfo.repliesCount || 1;
   return `${repliesCount} ${repliesCount > 1 ? 'replies' : 'reply'}`;
 }
 
-export default useInlineSidebarText;
+export default useInlineEngagementText;
diff --git a/native/chat/chat-constants.js b/native/chat/chat-constants.js
index 132250101..49135d1da 100644
--- a/native/chat/chat-constants.js
+++ b/native/chat/chat-constants.js
@@ -1,26 +1,26 @@
 // @flow
 
 export const composedMessageStyle = {
   marginLeft: 12,
   marginRight: 7,
 };
 
-export const inlineSidebarStyle = {
+export const inlineEngagementStyle = {
   height: 38,
   marginTop: 5,
   marginBottom: 3,
 };
-export const inlineSidebarLeftStyle = {
+export const inlineEngagementLeftStyle = {
   topOffset: -10,
 };
 
-export const inlineSidebarCenterStyle = {
+export const inlineEngagementCenterStyle = {
   topOffset: -5,
 };
 
-export const inlineSidebarRightStyle = {
+export const inlineEngagementRightStyle = {
   marginRight: 22,
   topOffset: -10,
 };
 
 export const clusterEndHeight = 7;
diff --git a/native/chat/composed-message.react.js b/native/chat/composed-message.react.js
index 23aa9f1dc..e651a9fd4 100644
--- a/native/chat/composed-message.react.js
+++ b/native/chat/composed-message.react.js
@@ -1,247 +1,247 @@
 // @flow
 
 import Icon from '@expo/vector-icons/Feather';
 import invariant from 'invariant';
 import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
 import Animated from 'react-native-reanimated';
 
 import { createMessageReply } from 'lib/shared/message-utils';
 import { assertComposableMessageType } from 'lib/types/message-types';
 
 import { type InputState, InputStateContext } from '../input/input-state';
 import { type Colors, useColors } from '../themes/colors';
 import type { ChatMessageInfoItemWithHeight } from '../types/chat-types';
 import { type AnimatedStyleObj, AnimatedView } from '../types/styles';
 import {
   clusterEndHeight,
-  inlineSidebarStyle,
-  inlineSidebarLeftStyle,
-  inlineSidebarRightStyle,
+  inlineEngagementStyle,
+  inlineEngagementLeftStyle,
+  inlineEngagementRightStyle,
   composedMessageStyle,
 } from './chat-constants';
 import { useComposedMessageMaxWidth } from './composed-message-width';
 import { FailedSend } from './failed-send.react';
-import { InlineSidebar } from './inline-sidebar.react';
+import { InlineEngagement } from './inline-engagement.react';
 import { MessageHeader } from './message-header.react';
 import { useNavigateToSidebar } from './sidebar-navigation';
 import SwipeableMessage from './swipeable-message.react';
 import { useContentAndHeaderOpacity, useDeliveryIconOpacity } from './utils';
 
 /* eslint-disable import/no-named-as-default-member */
 const { Node } = Animated;
 /* eslint-enable import/no-named-as-default-member */
 
 type SwipeOptions = 'reply' | 'sidebar' | 'both' | 'none';
 type BaseProps = {
   ...React.ElementConfig<typeof View>,
   +item: ChatMessageInfoItemWithHeight,
   +sendFailed: boolean,
   +focused: boolean,
   +swipeOptions: SwipeOptions,
   +children: React.Node,
 };
 type Props = {
   ...BaseProps,
   // Redux state
   +composedMessageMaxWidth: number,
   +colors: Colors,
   +contentAndHeaderOpacity: number | Node,
   +deliveryIconOpacity: number | Node,
   // withInputState
   +inputState: ?InputState,
   +navigateToSidebar: () => void,
 };
 class ComposedMessage extends React.PureComponent<Props> {
   render() {
     assertComposableMessageType(this.props.item.messageInfo.type);
     const {
       item,
       sendFailed,
       focused,
       swipeOptions,
       children,
       composedMessageMaxWidth,
       colors,
       inputState,
       navigateToSidebar,
       contentAndHeaderOpacity,
       deliveryIconOpacity,
       ...viewProps
     } = this.props;
     const { id, creator } = item.messageInfo;
 
     const { isViewer } = creator;
     const alignStyle = isViewer
       ? styles.rightChatBubble
       : styles.leftChatBubble;
 
     let containerMarginBottom = 5;
     if (item.endsCluster) {
       containerMarginBottom += clusterEndHeight;
     }
 
     const containerStyle = [
       styles.alignment,
       { marginBottom: containerMarginBottom },
     ];
     const messageBoxStyle = { maxWidth: composedMessageMaxWidth };
 
     let deliveryIcon = null;
     let failedSendInfo = null;
     if (isViewer) {
       let deliveryIconName;
       let deliveryIconColor = `#${item.threadInfo.color}`;
       if (id !== null && id !== undefined) {
         deliveryIconName = 'check-circle';
       } else if (sendFailed) {
         deliveryIconName = 'x-circle';
         deliveryIconColor = colors.redText;
         failedSendInfo = <FailedSend item={item} />;
       } else {
         deliveryIconName = 'circle';
       }
 
       const animatedStyle: AnimatedStyleObj = { opacity: deliveryIconOpacity };
       deliveryIcon = (
         <AnimatedView style={[styles.iconContainer, animatedStyle]}>
           <Icon
             name={deliveryIconName}
             style={[styles.icon, { color: deliveryIconColor }]}
           />
         </AnimatedView>
       );
     }
 
     const triggerReply =
       swipeOptions === 'reply' || swipeOptions === 'both'
         ? this.reply
         : undefined;
     const triggerSidebar =
       swipeOptions === 'sidebar' || swipeOptions === 'both'
         ? navigateToSidebar
         : undefined;
     const messageBox = (
       <View style={styles.messageBox}>
         <SwipeableMessage
           triggerReply={triggerReply}
           triggerSidebar={triggerSidebar}
           isViewer={isViewer}
           messageBoxStyle={messageBoxStyle}
           threadColor={item.threadInfo.color}
         >
           <AnimatedView style={{ opacity: contentAndHeaderOpacity }}>
             {children}
           </AnimatedView>
         </SwipeableMessage>
       </View>
     );
 
-    let inlineSidebar = null;
+    let inlineEngagement = null;
     if (item.threadCreatedFromMessage || item.reactions.size > 0) {
       const positioning = isViewer ? 'right' : 'left';
-      const inlineSidebarPositionStyle =
+      const inlineEngagementPositionStyle =
         positioning === 'left'
-          ? styles.leftInlineSidebar
-          : styles.rightInlineSidebar;
-      inlineSidebar = (
-        <View style={[styles.inlineSidebar, inlineSidebarPositionStyle]}>
-          <InlineSidebar
+          ? styles.leftInlineEngagement
+          : styles.rightInlineEngagement;
+      inlineEngagement = (
+        <View style={[styles.inlineEngagement, inlineEngagementPositionStyle]}>
+          <InlineEngagement
             threadInfo={item.threadCreatedFromMessage}
             reactions={item.reactions}
           />
         </View>
       );
     }
 
     return (
       <View {...viewProps}>
         <AnimatedView style={{ opacity: contentAndHeaderOpacity }}>
           <MessageHeader item={item} focused={focused} display="lowContrast" />
         </AnimatedView>
         <View style={containerStyle}>
           <View style={[styles.content, alignStyle]}>
             {deliveryIcon}
             {messageBox}
           </View>
           {failedSendInfo}
-          {inlineSidebar}
+          {inlineEngagement}
         </View>
       </View>
     );
   }
 
   reply = () => {
     const { inputState, item } = this.props;
     invariant(inputState, 'inputState should be set in reply');
     invariant(item.messageInfo.text, 'text should be set in reply');
     inputState.addReply(createMessageReply(item.messageInfo.text));
   };
 }
 
 const styles = StyleSheet.create({
   alignment: {
     marginLeft: composedMessageStyle.marginLeft,
     marginRight: composedMessageStyle.marginRight,
   },
   content: {
     alignItems: 'center',
     flexDirection: 'row-reverse',
   },
   icon: {
     fontSize: 16,
     textAlign: 'center',
   },
   iconContainer: {
     marginLeft: 2,
     width: 16,
   },
-  inlineSidebar: {
-    marginBottom: inlineSidebarStyle.marginBottom,
-    marginTop: inlineSidebarStyle.marginTop,
+  inlineEngagement: {
+    marginBottom: inlineEngagementStyle.marginBottom,
+    marginTop: inlineEngagementStyle.marginTop,
   },
   leftChatBubble: {
     justifyContent: 'flex-end',
   },
-  leftInlineSidebar: {
+  leftInlineEngagement: {
     justifyContent: 'flex-start',
     position: 'relative',
-    top: inlineSidebarLeftStyle.topOffset,
+    top: inlineEngagementLeftStyle.topOffset,
   },
   messageBox: {
     marginRight: 5,
   },
   rightChatBubble: {
     justifyContent: 'flex-start',
   },
-  rightInlineSidebar: {
+  rightInlineEngagement: {
     alignSelf: 'flex-end',
     position: 'relative',
-    right: inlineSidebarRightStyle.marginRight,
-    top: inlineSidebarRightStyle.topOffset,
+    right: inlineEngagementRightStyle.marginRight,
+    top: inlineEngagementRightStyle.topOffset,
   },
 });
 
 const ConnectedComposedMessage: React.ComponentType<BaseProps> = React.memo<BaseProps>(
   function ConnectedComposedMessage(props: BaseProps) {
     const composedMessageMaxWidth = useComposedMessageMaxWidth();
     const colors = useColors();
     const inputState = React.useContext(InputStateContext);
     const navigateToSidebar = useNavigateToSidebar(props.item);
     const contentAndHeaderOpacity = useContentAndHeaderOpacity(props.item);
     const deliveryIconOpacity = useDeliveryIconOpacity(props.item);
     return (
       <ComposedMessage
         {...props}
         composedMessageMaxWidth={composedMessageMaxWidth}
         colors={colors}
         inputState={inputState}
         navigateToSidebar={navigateToSidebar}
         contentAndHeaderOpacity={contentAndHeaderOpacity}
         deliveryIconOpacity={deliveryIconOpacity}
       />
     );
   },
 );
 
 export default ConnectedComposedMessage;
diff --git a/native/chat/inline-sidebar.react.js b/native/chat/inline-engagement.react.js
similarity index 77%
rename from native/chat/inline-sidebar.react.js
rename to native/chat/inline-engagement.react.js
index 17faf3a15..461298b20 100644
--- a/native/chat/inline-sidebar.react.js
+++ b/native/chat/inline-engagement.react.js
@@ -1,208 +1,214 @@
 // @flow
 
 import * as React from 'react';
 import { Text, View } from 'react-native';
 import Animated, {
   Extrapolate,
   interpolateNode,
 } from 'react-native-reanimated';
 
-import useInlineSidebarText from 'lib/hooks/inline-sidebar-text.react';
+import useInlineEngagementText from 'lib/hooks/inline-engagement-text.react';
 import type { MessageReactionInfo } from 'lib/selectors/chat-selectors';
 import { stringForReactionList } from 'lib/shared/reaction-utils';
 import type { ThreadInfo } from 'lib/types/thread-types';
 
 import CommIcon from '../components/comm-icon.react';
 import GestureTouchableOpacity from '../components/gesture-touchable-opacity.react';
 import { useStyles } from '../themes/colors';
 import type { ChatMessageInfoItemWithHeight } from '../types/chat-types';
 import {
-  inlineSidebarStyle,
-  inlineSidebarCenterStyle,
-  inlineSidebarRightStyle,
+  inlineEngagementStyle,
+  inlineEngagementCenterStyle,
+  inlineEngagementRightStyle,
   composedMessageStyle,
 } from './chat-constants';
 import { useNavigateToThread } from './message-list-types';
 
 type Props = {
   +threadInfo: ?ThreadInfo,
   +reactions?: $ReadOnlyMap<string, MessageReactionInfo>,
   +disabled?: boolean,
 };
-function InlineSidebar(props: Props): React.Node {
+function InlineEngagement(props: Props): React.Node {
   const { disabled = false, reactions, threadInfo } = props;
-  const repliesText = useInlineSidebarText(threadInfo);
+  const repliesText = useInlineEngagementText(threadInfo);
 
   const navigateToThread = useNavigateToThread();
   const onPress = React.useCallback(() => {
     if (threadInfo && !disabled) {
       navigateToThread({ threadInfo });
     }
   }, [disabled, navigateToThread, threadInfo]);
 
   const styles = useStyles(unboundStyles);
 
   const reactionList = React.useMemo(() => {
     if (!reactions || reactions.size === 0) {
       return null;
     }
 
     const reactionText = stringForReactionList(reactions);
     const reactionItems = <Text style={styles.reaction}>{reactionText}</Text>;
 
     return <View style={styles.reactionsContainer}>{reactionItems}</View>;
   }, [reactions, styles.reaction, styles.reactionsContainer]);
 
   const unreadStyle = threadInfo?.currentUser.unread ? styles.unread : null;
   const marginRight = reactionList ? styles.repliesMarginRight : null;
   const repliesStyles = React.useMemo(
     () => [marginRight, styles.repliesText, unreadStyle],
     [marginRight, styles.repliesText, unreadStyle],
   );
   const noThreadInfo = !threadInfo;
   const sidebarInfo = React.useMemo(() => {
     if (noThreadInfo) {
       return null;
     }
     return (
       <>
         <CommIcon style={styles.icon} size={14} name="sidebar-filled" />
         <Text style={repliesStyles}>{repliesText}</Text>
       </>
     );
   }, [noThreadInfo, styles.icon, repliesStyles, repliesText]);
   return (
     <View style={styles.container}>
       <GestureTouchableOpacity
         onPress={onPress}
         activeOpacity={0.7}
         style={styles.sidebar}
       >
         {sidebarInfo}
         {reactionList}
       </GestureTouchableOpacity>
     </View>
   );
 }
 
 const unboundStyles = {
   container: {
     flexDirection: 'row',
-    height: inlineSidebarStyle.height,
+    height: inlineEngagementStyle.height,
     display: 'flex',
     borderRadius: 16,
   },
   unread: {
     color: 'listForegroundLabel',
     fontWeight: 'bold',
   },
   sidebar: {
     flexDirection: 'row',
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    backgroundColor: 'inlineSidebarBackground',
+    backgroundColor: 'inlineEngagementBackground',
     padding: 8,
     borderRadius: 16,
-    height: inlineSidebarStyle.height,
+    height: inlineEngagementStyle.height,
   },
   icon: {
-    color: 'inlineSidebarLabel',
+    color: 'inlineEngagementLabel',
     marginRight: 4,
   },
   repliesText: {
-    color: 'inlineSidebarLabel',
+    color: 'inlineEngagementLabel',
     fontSize: 14,
     lineHeight: 22,
   },
   repliesMarginRight: {
     marginRight: 12,
   },
   reaction: {
     marginLeft: 4,
-    color: 'inlineSidebarLabel',
+    color: 'inlineEngagementLabel',
   },
   reactionsContainer: {
     display: 'flex',
     flexDirection: 'row',
     marginLeft: -4,
   },
 };
 
-type TooltipInlineSidebarProps = {
+type TooltipInlineEngagementProps = {
   +item: ChatMessageInfoItemWithHeight,
   +isOpeningSidebar: boolean,
   +progress: Animated.Node,
   +windowWidth: number,
   +positioning: 'left' | 'right' | 'center',
   +initialCoordinates: {
     +x: number,
     +y: number,
     +width: number,
     +height: number,
   },
 };
 
-function TooltipInlineSidebar(props: TooltipInlineSidebarProps): React.Node {
+function TooltipInlineEngagement(
+  props: TooltipInlineEngagementProps,
+): React.Node {
   const {
     item,
     isOpeningSidebar,
     progress,
     windowWidth,
     initialCoordinates,
     positioning,
   } = props;
-  const inlineSidebarStyles = React.useMemo(() => {
+  const inlineEngagementStyles = React.useMemo(() => {
     if (positioning === 'left') {
       return {
         position: 'absolute',
-        top: inlineSidebarStyle.marginTop + inlineSidebarRightStyle.topOffset,
+        top:
+          inlineEngagementStyle.marginTop +
+          inlineEngagementRightStyle.topOffset,
         left: composedMessageStyle.marginLeft,
       };
     } else if (positioning === 'right') {
       return {
         position: 'absolute',
         right:
-          inlineSidebarRightStyle.marginRight +
+          inlineEngagementRightStyle.marginRight +
           composedMessageStyle.marginRight,
-        top: inlineSidebarStyle.marginTop + inlineSidebarRightStyle.topOffset,
+        top:
+          inlineEngagementStyle.marginTop +
+          inlineEngagementRightStyle.topOffset,
       };
     } else if (positioning === 'center') {
       return {
         alignSelf: 'center',
-        top: inlineSidebarCenterStyle.topOffset,
+        top: inlineEngagementCenterStyle.topOffset,
       };
     }
   }, [positioning]);
-  const inlineSidebarContainer = React.useMemo(() => {
+  const inlineEngagementContainer = React.useMemo(() => {
     const opacity = isOpeningSidebar
       ? 0
       : interpolateNode(progress, {
           inputRange: [0, 1],
           outputRange: [1, 0],
           extrapolate: Extrapolate.CLAMP,
         });
     return {
       position: 'absolute',
       width: windowWidth,
       top: initialCoordinates.height,
       left: -initialCoordinates.x,
       opacity,
     };
   }, [
     initialCoordinates.height,
     initialCoordinates.x,
     isOpeningSidebar,
     progress,
     windowWidth,
   ]);
   return (
-    <Animated.View style={inlineSidebarContainer}>
-      <Animated.View style={inlineSidebarStyles}>
-        <InlineSidebar threadInfo={item.threadCreatedFromMessage} disabled />
+    <Animated.View style={inlineEngagementContainer}>
+      <Animated.View style={inlineEngagementStyles}>
+        <InlineEngagement threadInfo={item.threadCreatedFromMessage} disabled />
       </Animated.View>
     </Animated.View>
   );
 }
 
-export { InlineSidebar, TooltipInlineSidebar };
+export { InlineEngagement, TooltipInlineEngagement };
diff --git a/native/chat/multimedia-message-tooltip-button.react.js b/native/chat/multimedia-message-tooltip-button.react.js
index db296c2da..4e7071d0c 100644
--- a/native/chat/multimedia-message-tooltip-button.react.js
+++ b/native/chat/multimedia-message-tooltip-button.react.js
@@ -1,108 +1,108 @@
 // @flow
 
 import * as React from 'react';
 import Animated from 'react-native-reanimated';
 
 import type { AppNavigationProp } from '../navigation/app-navigator.react';
 import type { TooltipRoute } from '../navigation/tooltip.react';
 import { useSelector } from '../redux/redux-utils';
-import { TooltipInlineSidebar } from './inline-sidebar.react';
+import { TooltipInlineEngagement } from './inline-engagement.react';
 import { InnerMultimediaMessage } from './inner-multimedia-message.react';
 import { MessageHeader } from './message-header.react';
 import SidebarInputBarHeightMeasurer from './sidebar-input-bar-height-measurer.react';
 import { useAnimatedMessageTooltipButton } from './utils';
 
 /* eslint-disable import/no-named-as-default-member */
 const { Node, Extrapolate, interpolateNode } = Animated;
 /* eslint-enable import/no-named-as-default-member */
 
 function noop() {}
 
 type Props = {
   +navigation: AppNavigationProp<'MultimediaMessageTooltipModal'>,
   +route: TooltipRoute<'MultimediaMessageTooltipModal'>,
   +progress: Node,
   +isOpeningSidebar: boolean,
 };
 function MultimediaMessageTooltipButton(props: Props): React.Node {
   const windowWidth = useSelector(state => state.dimensions.width);
   const { progress } = props;
 
   const [
     sidebarInputBarHeight,
     setSidebarInputBarHeight,
   ] = React.useState<?number>(null);
   const onInputBarMeasured = React.useCallback((height: number) => {
     setSidebarInputBarHeight(height);
   }, []);
 
   const { item, verticalBounds, initialCoordinates } = props.route.params;
   const { style: messageContainerStyle } = useAnimatedMessageTooltipButton({
     sourceMessage: item,
     initialCoordinates,
     messageListVerticalBounds: verticalBounds,
     progress,
     targetInputBarHeight: sidebarInputBarHeight,
   });
 
   const headerStyle = React.useMemo(() => {
     const bottom = initialCoordinates.height;
     const opacity = interpolateNode(progress, {
       inputRange: [0, 0.05],
       outputRange: [0, 1],
       extrapolate: Extrapolate.CLAMP,
     });
     return {
       opacity,
       position: 'absolute',
       left: -initialCoordinates.x,
       width: windowWidth,
       bottom,
     };
   }, [initialCoordinates.height, initialCoordinates.x, progress, windowWidth]);
 
   const { navigation, isOpeningSidebar } = props;
 
-  const inlineSidebar = React.useMemo(() => {
+  const inlineEngagement = React.useMemo(() => {
     if (!item.threadCreatedFromMessage) {
       return null;
     }
     return (
-      <TooltipInlineSidebar
+      <TooltipInlineEngagement
         item={item}
         positioning={item.messageInfo.creator.isViewer ? 'right' : 'left'}
         isOpeningSidebar={isOpeningSidebar}
         progress={progress}
         windowWidth={windowWidth}
         initialCoordinates={initialCoordinates}
       />
     );
   }, [initialCoordinates, isOpeningSidebar, item, progress, windowWidth]);
 
   return (
     <Animated.View style={messageContainerStyle}>
       <SidebarInputBarHeightMeasurer
         sourceMessage={item}
         onInputBarMeasured={onInputBarMeasured}
       />
       <Animated.View style={headerStyle}>
         <MessageHeader item={item} focused={true} display="modal" />
       </Animated.View>
       <InnerMultimediaMessage
         item={item}
         verticalBounds={verticalBounds}
         clickable={false}
         setClickable={noop}
         onPress={navigation.goBackOnce}
         onLongPress={navigation.goBackOnce}
       />
-      {inlineSidebar}
+      {inlineEngagement}
     </Animated.View>
   );
 }
 
 const ConnectedMultimediaMessageTooltipButton: React.ComponentType<Props> = React.memo<Props>(
   MultimediaMessageTooltipButton,
 );
 
 export default ConnectedMultimediaMessageTooltipButton;
diff --git a/native/chat/multimedia-message-utils.js b/native/chat/multimedia-message-utils.js
index 3b0fcea36..4c247cd1b 100644
--- a/native/chat/multimedia-message-utils.js
+++ b/native/chat/multimedia-message-utils.js
@@ -1,143 +1,143 @@
 // @flow
 
 import invariant from 'invariant';
 
 import { messageKey } from 'lib/shared/message-utils';
 import type { MediaInfo } from 'lib/types/media-types';
 import type { MultimediaMessageInfo } from 'lib/types/message-types';
 
 import type {
   ChatMultimediaMessageInfoItem,
   MultimediaContentSizes,
 } from '../types/chat-types';
-import { inlineSidebarStyle, clusterEndHeight } from './chat-constants';
+import { inlineEngagementStyle, clusterEndHeight } from './chat-constants';
 import { failedSendHeight } from './failed-send.react';
 import { authorNameHeight } from './message-header.react';
 
 const spaceBetweenImages = 4;
 
 function getMediaPerRow(mediaCount: number): number {
   if (mediaCount === 0) {
     return 0; // ???
   } else if (mediaCount === 1) {
     return 1;
   } else if (mediaCount === 2) {
     return 2;
   } else if (mediaCount === 3) {
     return 3;
   } else if (mediaCount === 4) {
     return 2;
   } else {
     return 3;
   }
 }
 
 function multimediaMessageSendFailed(
   item: ChatMultimediaMessageInfoItem,
 ): boolean {
   const { messageInfo, localMessageInfo, pendingUploads } = item;
   const { id: serverID } = messageInfo;
   if (serverID !== null && serverID !== undefined) {
     return false;
   }
 
   const { isViewer } = messageInfo.creator;
   if (!isViewer) {
     return false;
   }
 
   if (localMessageInfo && localMessageInfo.sendFailed) {
     return true;
   }
 
   for (const media of messageInfo.media) {
     const pendingUpload = pendingUploads && pendingUploads[media.id];
     if (pendingUpload && pendingUpload.failed) {
       return true;
     }
   }
 
   return !pendingUploads;
 }
 
 // The results are merged into ChatMultimediaMessageInfoItem
 function multimediaMessageContentSizes(
   messageInfo: MultimediaMessageInfo,
   composedMessageMaxWidth: number,
 ): MultimediaContentSizes {
   invariant(messageInfo.media.length > 0, 'should have media');
 
   if (messageInfo.media.length === 1) {
     const [media] = messageInfo.media;
     const { height, width } = media.dimensions;
 
     let imageHeight = height;
     if (width > composedMessageMaxWidth) {
       imageHeight = (height * composedMessageMaxWidth) / width;
     }
     if (imageHeight < 50) {
       imageHeight = 50;
     }
 
     let contentWidth = height ? (width * imageHeight) / height : 0;
     if (contentWidth > composedMessageMaxWidth) {
       contentWidth = composedMessageMaxWidth;
     }
 
     return { imageHeight, contentHeight: imageHeight, contentWidth };
   }
 
   const contentWidth = composedMessageMaxWidth;
 
   const mediaPerRow = getMediaPerRow(messageInfo.media.length);
   const marginSpace = spaceBetweenImages * (mediaPerRow - 1);
   const imageHeight = (contentWidth - marginSpace) / mediaPerRow;
 
   const numRows = Math.ceil(messageInfo.media.length / mediaPerRow);
   const contentHeight =
     numRows * imageHeight + (numRows - 1) * spaceBetweenImages;
 
   return { imageHeight, contentHeight, contentWidth };
 }
 
 // Given a ChatMultimediaMessageInfoItem, determines exact height of row
 function multimediaMessageItemHeight(
   item: ChatMultimediaMessageInfoItem,
 ): number {
   const { messageInfo, contentHeight, startsCluster, endsCluster } = item;
   const { creator } = messageInfo;
   const { isViewer } = creator;
   let height = 5 + contentHeight; // 5 from marginBottom in ComposedMessage
   if (!isViewer && startsCluster) {
     height += authorNameHeight;
   }
   if (endsCluster) {
     height += clusterEndHeight;
   }
   if (multimediaMessageSendFailed(item)) {
     height += failedSendHeight;
   }
   if (item.threadCreatedFromMessage || item.reactions.size > 0) {
     height +=
-      inlineSidebarStyle.height +
-      inlineSidebarStyle.marginTop +
-      inlineSidebarStyle.marginBottom;
+      inlineEngagementStyle.height +
+      inlineEngagementStyle.marginTop +
+      inlineEngagementStyle.marginBottom;
   }
   return height;
 }
 
 function getMediaKey(
   item: ChatMultimediaMessageInfoItem,
   mediaInfo: MediaInfo,
 ): string {
   return `multimedia|${messageKey(item.messageInfo)}|${mediaInfo.index}`;
 }
 
 export {
   multimediaMessageContentSizes,
   multimediaMessageItemHeight,
   multimediaMessageSendFailed,
   getMediaPerRow,
   spaceBetweenImages,
   getMediaKey,
 };
diff --git a/native/chat/robotext-message-tooltip-button.react.js b/native/chat/robotext-message-tooltip-button.react.js
index 65ce2d23b..72b78e733 100644
--- a/native/chat/robotext-message-tooltip-button.react.js
+++ b/native/chat/robotext-message-tooltip-button.react.js
@@ -1,95 +1,95 @@
 // @flow
 
 import * as React from 'react';
 import Animated from 'react-native-reanimated';
 
 import type { AppNavigationProp } from '../navigation/app-navigator.react';
 import type { TooltipRoute } from '../navigation/tooltip.react';
 import { useSelector } from '../redux/redux-utils';
-import { TooltipInlineSidebar } from './inline-sidebar.react';
+import { TooltipInlineEngagement } from './inline-engagement.react';
 import { InnerRobotextMessage } from './inner-robotext-message.react';
 import SidebarInputBarHeightMeasurer from './sidebar-input-bar-height-measurer.react';
 import { Timestamp } from './timestamp.react';
 import { useAnimatedMessageTooltipButton } from './utils';
 
 /* eslint-disable import/no-named-as-default-member */
 const { Node, interpolateNode, Extrapolate } = Animated;
 /* eslint-enable import/no-named-as-default-member */
 
 type Props = {
   +navigation: AppNavigationProp<'RobotextMessageTooltipModal'>,
   +route: TooltipRoute<'RobotextMessageTooltipModal'>,
   +progress: Node,
   +isOpeningSidebar: boolean,
 };
 function RobotextMessageTooltipButton(props: Props): React.Node {
   const { progress } = props;
   const windowWidth = useSelector(state => state.dimensions.width);
 
   const [
     sidebarInputBarHeight,
     setSidebarInputBarHeight,
   ] = React.useState<?number>(null);
   const onInputBarMeasured = React.useCallback((height: number) => {
     setSidebarInputBarHeight(height);
   }, []);
 
   const { item, verticalBounds, initialCoordinates } = props.route.params;
   const { style: messageContainerStyle } = useAnimatedMessageTooltipButton({
     sourceMessage: item,
     initialCoordinates,
     messageListVerticalBounds: verticalBounds,
     progress,
     targetInputBarHeight: sidebarInputBarHeight,
   });
 
   const headerStyle = React.useMemo(() => {
     const bottom = initialCoordinates.height;
     const opacity = interpolateNode(progress, {
       inputRange: [0, 0.05],
       outputRange: [0, 1],
       extrapolate: Extrapolate.CLAMP,
     });
     return {
       opacity,
       position: 'absolute',
       left: -initialCoordinates.x,
       width: windowWidth,
       bottom,
     };
   }, [initialCoordinates.height, initialCoordinates.x, progress, windowWidth]);
 
   const { navigation, isOpeningSidebar } = props;
 
-  const inlineSidebar = React.useMemo(() => {
+  const inlineEngagement = React.useMemo(() => {
     if (!item.threadCreatedFromMessage) {
       return null;
     }
     return (
-      <TooltipInlineSidebar
+      <TooltipInlineEngagement
         item={item}
         positioning="center"
         isOpeningSidebar={isOpeningSidebar}
         progress={progress}
         windowWidth={windowWidth}
         initialCoordinates={initialCoordinates}
       />
     );
   }, [initialCoordinates, isOpeningSidebar, item, progress, windowWidth]);
 
   return (
     <Animated.View style={messageContainerStyle}>
       <SidebarInputBarHeightMeasurer
         sourceMessage={item}
         onInputBarMeasured={onInputBarMeasured}
       />
       <Animated.View style={headerStyle}>
         <Timestamp time={item.messageInfo.time} display="modal" />
       </Animated.View>
       <InnerRobotextMessage item={item} onPress={navigation.goBackOnce} />
-      {inlineSidebar}
+      {inlineEngagement}
     </Animated.View>
   );
 }
 
 export default RobotextMessageTooltipButton;
diff --git a/native/chat/robotext-message.react.js b/native/chat/robotext-message.react.js
index 9c06322d1..89b47a235 100644
--- a/native/chat/robotext-message.react.js
+++ b/native/chat/robotext-message.react.js
@@ -1,228 +1,228 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import { View } from 'react-native';
 
 import { messageKey } from 'lib/shared/message-utils';
 import { useCanCreateReactionFromMessage } from 'lib/shared/reaction-utils';
 import { useCanCreateSidebarFromMessage } from 'lib/shared/thread-utils';
 
 import { ChatContext } from '../chat/chat-context';
 import { KeyboardContext } from '../keyboard/keyboard-state';
 import { OverlayContext } from '../navigation/overlay-context';
 import { RobotextMessageTooltipModalRouteName } from '../navigation/route-names';
 import type { NavigationRoute } from '../navigation/route-names';
 import { fixedTooltipHeight } from '../navigation/tooltip.react';
 import { useStyles } from '../themes/colors';
 import type { ChatRobotextMessageInfoItemWithHeight } from '../types/chat-types';
 import type { VerticalBounds } from '../types/layout-types';
 import { AnimatedView } from '../types/styles';
-import { inlineSidebarCenterStyle } from './chat-constants';
+import { inlineEngagementCenterStyle } from './chat-constants';
 import type { ChatNavigationProp } from './chat.react';
-import { InlineSidebar } from './inline-sidebar.react';
+import { InlineEngagement } from './inline-engagement.react';
 import { InnerRobotextMessage } from './inner-robotext-message.react';
 import { Timestamp } from './timestamp.react';
 import { getMessageTooltipKey, useContentAndHeaderOpacity } from './utils';
 
 type Props = {
   ...React.ElementConfig<typeof View>,
   +item: ChatRobotextMessageInfoItemWithHeight,
   +navigation: ChatNavigationProp<'MessageList'>,
   +route: NavigationRoute<'MessageList'>,
   +focused: boolean,
   +toggleFocus: (messageKey: string) => void,
   +verticalBounds: ?VerticalBounds,
 };
 function RobotextMessage(props: Props): React.Node {
   const {
     item,
     navigation,
     route,
     focused,
     toggleFocus,
     verticalBounds,
     ...viewProps
   } = props;
 
   let timestamp = null;
   if (focused || item.startsConversation) {
     timestamp = (
       <Timestamp time={item.messageInfo.time} display="lowContrast" />
     );
   }
 
   const styles = useStyles(unboundStyles);
-  let inlineSidebar = null;
+  let inlineEngagement = null;
   if (item.threadCreatedFromMessage || item.reactions.size > 0) {
-    inlineSidebar = (
+    inlineEngagement = (
       <View style={styles.sidebar}>
-        <InlineSidebar
+        <InlineEngagement
           threadInfo={item.threadCreatedFromMessage}
           reactions={item.reactions}
         />
       </View>
     );
   }
 
   const chatContext = React.useContext(ChatContext);
   const keyboardState = React.useContext(KeyboardContext);
   const key = messageKey(item.messageInfo);
   const onPress = React.useCallback(() => {
     const didDismiss =
       keyboardState && keyboardState.dismissKeyboardIfShowing();
     if (!didDismiss) {
       toggleFocus(key);
     }
   }, [keyboardState, toggleFocus, key]);
 
   const overlayContext = React.useContext(OverlayContext);
   const viewRef = React.useRef<?React.ElementRef<typeof View>>();
 
   const canCreateSidebarFromMessage = useCanCreateSidebarFromMessage(
     item.threadInfo,
     item.messageInfo,
   );
 
   const canCreateReactionFromMessage = useCanCreateReactionFromMessage(
     item.threadInfo,
     item.messageInfo,
   );
 
   const visibleEntryIDs = React.useMemo(() => {
     const result = [];
 
     if (item.threadCreatedFromMessage || canCreateSidebarFromMessage) {
       result.push('sidebar');
     }
 
     if (canCreateReactionFromMessage) {
       result.push('react');
     }
 
     return result;
   }, [
     item.threadCreatedFromMessage,
     canCreateSidebarFromMessage,
     canCreateReactionFromMessage,
   ]);
 
   const openRobotextTooltipModal = React.useCallback(
     (x, y, width, height, pageX, pageY) => {
       invariant(
         verticalBounds,
         'verticalBounds should be present in openRobotextTooltipModal',
       );
       const coordinates = { x: pageX, y: pageY, width, height };
 
       const messageTop = pageY;
       const messageBottom = pageY + height;
       const boundsTop = verticalBounds.y;
       const boundsBottom = verticalBounds.y + verticalBounds.height;
 
       const belowMargin = 20;
       const belowSpace = fixedTooltipHeight + belowMargin;
       const { isViewer } = item.messageInfo.creator;
       const aboveMargin = isViewer ? 30 : 50;
       const aboveSpace = fixedTooltipHeight + aboveMargin;
 
       let margin = 0;
       if (
         messageBottom + belowSpace > boundsBottom &&
         messageTop - aboveSpace > boundsTop
       ) {
         margin = aboveMargin;
       }
 
       const currentInputBarHeight =
         chatContext?.chatInputBarHeights.get(item.threadInfo.id) ?? 0;
 
       props.navigation.navigate<'RobotextMessageTooltipModal'>({
         name: RobotextMessageTooltipModalRouteName,
         params: {
           presentedFrom: props.route.key,
           initialCoordinates: coordinates,
           verticalBounds,
           visibleEntryIDs,
           location: 'fixed',
           margin,
           item,
           chatInputBarHeight: currentInputBarHeight,
         },
         key: getMessageTooltipKey(item),
       });
     },
     [
       item,
       props.navigation,
       props.route.key,
       verticalBounds,
       visibleEntryIDs,
       chatContext,
     ],
   );
 
   const onLongPress = React.useCallback(() => {
     if (keyboardState && keyboardState.dismissKeyboardIfShowing()) {
       return;
     }
 
     if (visibleEntryIDs.length === 0) {
       return;
     }
 
     if (!viewRef.current || !verticalBounds) {
       return;
     }
 
     if (!focused) {
       toggleFocus(messageKey(item.messageInfo));
     }
 
     invariant(overlayContext, 'RobotextMessage should have OverlayContext');
     overlayContext.setScrollBlockingModalStatus('open');
     viewRef.current?.measure(openRobotextTooltipModal);
   }, [
     focused,
     item,
     keyboardState,
     overlayContext,
     toggleFocus,
     verticalBounds,
     viewRef,
     visibleEntryIDs,
     openRobotextTooltipModal,
   ]);
 
   const onLayout = React.useCallback(() => {}, []);
 
   const contentAndHeaderOpacity = useContentAndHeaderOpacity(item);
 
   return (
     <View {...viewProps}>
       <AnimatedView style={{ opacity: contentAndHeaderOpacity }}>
         {timestamp}
       </AnimatedView>
       <View onLayout={onLayout} ref={viewRef}>
         <AnimatedView style={{ opacity: contentAndHeaderOpacity }}>
           <InnerRobotextMessage
             item={item}
             onPress={onPress}
             onLongPress={onLongPress}
           />
         </AnimatedView>
       </View>
-      {inlineSidebar}
+      {inlineEngagement}
     </View>
   );
 }
 
 const unboundStyles = {
   sidebar: {
-    marginTop: inlineSidebarCenterStyle.topOffset,
-    marginBottom: -inlineSidebarCenterStyle.topOffset,
+    marginTop: inlineEngagementCenterStyle.topOffset,
+    marginBottom: -inlineEngagementCenterStyle.topOffset,
     alignSelf: 'center',
   },
 };
 
 export { RobotextMessage };
diff --git a/native/chat/text-message-tooltip-button.react.js b/native/chat/text-message-tooltip-button.react.js
index 00dced8ba..3e91f24c4 100644
--- a/native/chat/text-message-tooltip-button.react.js
+++ b/native/chat/text-message-tooltip-button.react.js
@@ -1,119 +1,119 @@
 // @flow
 
 import * as React from 'react';
 import Animated from 'react-native-reanimated';
 
 import type { AppNavigationProp } from '../navigation/app-navigator.react';
 import type { TooltipRoute } from '../navigation/tooltip.react';
 import { useSelector } from '../redux/redux-utils';
-import { TooltipInlineSidebar } from './inline-sidebar.react';
+import { TooltipInlineEngagement } from './inline-engagement.react';
 import { InnerTextMessage } from './inner-text-message.react';
 import { MessageHeader } from './message-header.react';
 import { MessageListContextProvider } from './message-list-types';
 import { MessagePressResponderContext } from './message-press-responder-context';
 import SidebarInputBarHeightMeasurer from './sidebar-input-bar-height-measurer.react';
 import { useAnimatedMessageTooltipButton } from './utils';
 
 /* eslint-disable import/no-named-as-default-member */
 const { Node, interpolateNode, Extrapolate } = Animated;
 /* eslint-enable import/no-named-as-default-member */
 
 type Props = {
   +navigation: AppNavigationProp<'TextMessageTooltipModal'>,
   +route: TooltipRoute<'TextMessageTooltipModal'>,
   +progress: Node,
   +isOpeningSidebar: boolean,
 };
 function TextMessageTooltipButton(props: Props): React.Node {
   const { progress } = props;
   const windowWidth = useSelector(state => state.dimensions.width);
 
   const [
     sidebarInputBarHeight,
     setSidebarInputBarHeight,
   ] = React.useState<?number>(null);
   const onInputBarMeasured = React.useCallback((height: number) => {
     setSidebarInputBarHeight(height);
   }, []);
 
   const { item, verticalBounds, initialCoordinates } = props.route.params;
   const {
     style: messageContainerStyle,
     threadColorOverride,
     isThreadColorDarkOverride,
   } = useAnimatedMessageTooltipButton({
     sourceMessage: item,
     initialCoordinates,
     messageListVerticalBounds: verticalBounds,
     progress,
     targetInputBarHeight: sidebarInputBarHeight,
   });
 
   const headerStyle = React.useMemo(() => {
     const bottom = initialCoordinates.height;
     const opacity = interpolateNode(progress, {
       inputRange: [0, 0.05],
       outputRange: [0, 1],
       extrapolate: Extrapolate.CLAMP,
     });
     return {
       opacity,
       position: 'absolute',
       left: -initialCoordinates.x,
       width: windowWidth,
       bottom,
     };
   }, [initialCoordinates.height, initialCoordinates.x, progress, windowWidth]);
 
   const threadID = item.threadInfo.id;
   const { navigation, isOpeningSidebar } = props;
 
   const messagePressResponderContext = React.useMemo(
     () => ({
       onPressMessage: navigation.goBackOnce,
     }),
     [navigation.goBackOnce],
   );
 
-  const inlineSidebar = React.useMemo(() => {
+  const inlineEngagement = React.useMemo(() => {
     if (!item.threadCreatedFromMessage) {
       return null;
     }
     return (
-      <TooltipInlineSidebar
+      <TooltipInlineEngagement
         item={item}
         positioning={item.messageInfo.creator.isViewer ? 'right' : 'left'}
         isOpeningSidebar={isOpeningSidebar}
         progress={progress}
         windowWidth={windowWidth}
         initialCoordinates={initialCoordinates}
       />
     );
   }, [initialCoordinates, isOpeningSidebar, item, progress, windowWidth]);
   return (
     <MessageListContextProvider threadID={threadID}>
       <SidebarInputBarHeightMeasurer
         sourceMessage={item}
         onInputBarMeasured={onInputBarMeasured}
       />
       <Animated.View style={messageContainerStyle}>
         <Animated.View style={headerStyle}>
           <MessageHeader item={item} focused={true} display="modal" />
         </Animated.View>
         <MessagePressResponderContext.Provider
           value={messagePressResponderContext}
         >
           <InnerTextMessage
             item={item}
             onPress={navigation.goBackOnce}
             threadColorOverride={threadColorOverride}
             isThreadColorDarkOverride={isThreadColorDarkOverride}
           />
         </MessagePressResponderContext.Provider>
-        {inlineSidebar}
+        {inlineEngagement}
       </Animated.View>
     </MessageListContextProvider>
   );
 }
 
 export default TextMessageTooltipButton;
diff --git a/native/chat/utils.js b/native/chat/utils.js
index ed14e626d..5a5564158 100644
--- a/native/chat/utils.js
+++ b/native/chat/utils.js
@@ -1,420 +1,420 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import Animated from 'react-native-reanimated';
 
 import { useMessageListData } from 'lib/selectors/chat-selectors';
 import type { ChatMessageItem } from 'lib/selectors/chat-selectors';
 import { messageKey } from 'lib/shared/message-utils';
 import { colorIsDark, viewerIsMember } from 'lib/shared/thread-utils';
 import type { ThreadInfo } from 'lib/types/thread-types';
 
 import { KeyboardContext } from '../keyboard/keyboard-state';
 import { OverlayContext } from '../navigation/overlay-context';
 import {
   MultimediaMessageTooltipModalRouteName,
   RobotextMessageTooltipModalRouteName,
   TextMessageTooltipModalRouteName,
 } from '../navigation/route-names';
 import { useSelector } from '../redux/redux-utils';
 import type {
   ChatMessageInfoItemWithHeight,
   ChatMessageItemWithHeight,
   ChatRobotextMessageInfoItemWithHeight,
   ChatTextMessageInfoItemWithHeight,
 } from '../types/chat-types';
 import type { LayoutCoordinates, VerticalBounds } from '../types/layout-types';
 import type { AnimatedViewStyle } from '../types/styles';
-import { clusterEndHeight, inlineSidebarStyle } from './chat-constants';
+import { clusterEndHeight, inlineEngagementStyle } from './chat-constants';
 import { ChatContext, useHeightMeasurer } from './chat-context';
 import { failedSendHeight } from './failed-send.react';
 import { authorNameHeight } from './message-header.react';
 import { multimediaMessageItemHeight } from './multimedia-message-utils';
 import { getSidebarThreadInfo } from './sidebar-navigation';
 import textMessageSendFailed from './text-message-send-failed';
 import { timestampHeight } from './timestamp.react';
 
 /* eslint-disable import/no-named-as-default-member */
 const {
   Node,
   Extrapolate,
   interpolateNode,
   interpolateColors,
   block,
   call,
   eq,
   cond,
   sub,
 } = Animated;
 /* eslint-enable import/no-named-as-default-member */
 
 function textMessageItemHeight(
   item: ChatTextMessageInfoItemWithHeight,
 ): number {
   const { messageInfo, contentHeight, startsCluster, endsCluster } = item;
   const { isViewer } = messageInfo.creator;
   let height = 5 + contentHeight; // 5 from marginBottom in ComposedMessage
   if (!isViewer && startsCluster) {
     height += authorNameHeight;
   }
   if (endsCluster) {
     height += clusterEndHeight;
   }
   if (textMessageSendFailed(item)) {
     height += failedSendHeight;
   }
   if (item.threadCreatedFromMessage || item.reactions.size > 0) {
     height +=
-      inlineSidebarStyle.height +
-      inlineSidebarStyle.marginTop +
-      inlineSidebarStyle.marginBottom;
+      inlineEngagementStyle.height +
+      inlineEngagementStyle.marginTop +
+      inlineEngagementStyle.marginBottom;
   }
   return height;
 }
 
 function robotextMessageItemHeight(
   item: ChatRobotextMessageInfoItemWithHeight,
 ): number {
   if (item.threadCreatedFromMessage || item.reactions.size > 0) {
-    return item.contentHeight + inlineSidebarStyle.height;
+    return item.contentHeight + inlineEngagementStyle.height;
   }
   return item.contentHeight;
 }
 
 function messageItemHeight(item: ChatMessageInfoItemWithHeight): number {
   let height = 0;
   if (item.messageShapeType === 'text') {
     height += textMessageItemHeight(item);
   } else if (item.messageShapeType === 'multimedia') {
     height += multimediaMessageItemHeight(item);
   } else {
     height += robotextMessageItemHeight(item);
   }
   if (item.startsConversation) {
     height += timestampHeight;
   }
   return height;
 }
 
 function chatMessageItemHeight(item: ChatMessageItemWithHeight): number {
   if (item.itemType === 'loader') {
     return 56;
   }
   return messageItemHeight(item);
 }
 
 function useMessageTargetParameters(
   sourceMessage: ChatMessageInfoItemWithHeight,
   initialCoordinates: LayoutCoordinates,
   messageListVerticalBounds: VerticalBounds,
   currentInputBarHeight: number,
   targetInputBarHeight: number,
   sidebarThreadInfo: ?ThreadInfo,
 ): {
   +position: number,
   +color: string,
 } {
   const messageListData = useMessageListData({
     searching: false,
     userInfoInputArray: [],
     threadInfo: sidebarThreadInfo,
   });
 
   const [
     messagesWithHeight,
     setMessagesWithHeight,
   ] = React.useState<?$ReadOnlyArray<ChatMessageItemWithHeight>>(null);
   const measureMessages = useHeightMeasurer();
 
   React.useEffect(() => {
     if (messageListData) {
       measureMessages(
         messageListData,
         sidebarThreadInfo,
         setMessagesWithHeight,
       );
     }
   }, [measureMessages, messageListData, sidebarThreadInfo]);
 
   const sourceMessageID = sourceMessage.messageInfo?.id;
   const targetDistanceFromBottom = React.useMemo(() => {
     if (!messagesWithHeight) {
       return 0;
     }
 
     let offset = 0;
     for (const message of messagesWithHeight) {
       offset += chatMessageItemHeight(message);
       if (message.messageInfo && message.messageInfo.id === sourceMessageID) {
         return offset;
       }
     }
 
     return (
       messageListVerticalBounds.height + chatMessageItemHeight(sourceMessage)
     );
   }, [
     messageListVerticalBounds.height,
     messagesWithHeight,
     sourceMessage,
     sourceMessageID,
   ]);
 
   if (!sidebarThreadInfo) {
     return {
       position: 0,
       color: sourceMessage.threadInfo.color,
     };
   }
 
   const authorNameComponentHeight = sourceMessage.messageInfo.creator.isViewer
     ? 0
     : authorNameHeight;
   const currentDistanceFromBottom =
     messageListVerticalBounds.height +
     messageListVerticalBounds.y -
     initialCoordinates.y +
     timestampHeight +
     authorNameComponentHeight +
     currentInputBarHeight;
   return {
     position:
       targetDistanceFromBottom +
       targetInputBarHeight -
       currentDistanceFromBottom,
     color: sidebarThreadInfo.color,
   };
 }
 
 type AnimatedMessageArgs = {
   +sourceMessage: ChatMessageInfoItemWithHeight,
   +initialCoordinates: LayoutCoordinates,
   +messageListVerticalBounds: VerticalBounds,
   +progress: Node,
   +targetInputBarHeight: ?number,
 };
 
 function useAnimatedMessageTooltipButton({
   sourceMessage,
   initialCoordinates,
   messageListVerticalBounds,
   progress,
   targetInputBarHeight,
 }: AnimatedMessageArgs): {
   +style: AnimatedViewStyle,
   +threadColorOverride: ?Node,
   +isThreadColorDarkOverride: ?boolean,
 } {
   const chatContext = React.useContext(ChatContext);
   invariant(chatContext, 'chatContext should be set');
   const {
     currentTransitionSidebarSourceID,
     setCurrentTransitionSidebarSourceID,
     chatInputBarHeights,
     sidebarAnimationType,
     setSidebarAnimationType,
   } = chatContext;
 
   const viewerID = useSelector(
     state => state.currentUserInfo && state.currentUserInfo.id,
   );
   const sidebarThreadInfo = React.useMemo(() => {
     return getSidebarThreadInfo(sourceMessage, viewerID);
   }, [sourceMessage, viewerID]);
 
   const currentInputBarHeight =
     chatInputBarHeights.get(sourceMessage.threadInfo.id) ?? 0;
   const keyboardState = React.useContext(KeyboardContext);
   const viewerIsSidebarMember = viewerIsMember(sidebarThreadInfo);
   React.useEffect(() => {
     const newSidebarAnimationType =
       !currentInputBarHeight ||
       !targetInputBarHeight ||
       keyboardState?.keyboardShowing ||
       !viewerIsSidebarMember
         ? 'fade_source_message'
         : 'move_source_message';
     setSidebarAnimationType(newSidebarAnimationType);
   }, [
     currentInputBarHeight,
     keyboardState?.keyboardShowing,
     setSidebarAnimationType,
     sidebarThreadInfo,
     targetInputBarHeight,
     viewerIsSidebarMember,
   ]);
 
   const {
     position: targetPosition,
     color: targetColor,
   } = useMessageTargetParameters(
     sourceMessage,
     initialCoordinates,
     messageListVerticalBounds,
     currentInputBarHeight,
     targetInputBarHeight ?? currentInputBarHeight,
     sidebarThreadInfo,
   );
 
   React.useEffect(() => {
     return () => setCurrentTransitionSidebarSourceID(null);
   }, [setCurrentTransitionSidebarSourceID]);
 
   const bottom = React.useMemo(
     () =>
       interpolateNode(progress, {
         inputRange: [0.3, 1],
         outputRange: [targetPosition, 0],
         extrapolate: Extrapolate.CLAMP,
       }),
     [progress, targetPosition],
   );
 
   const [
     isThreadColorDarkOverride,
     setThreadColorDarkOverride,
   ] = React.useState<?boolean>(null);
   const setThreadColorBrightness = React.useCallback(() => {
     const isSourceThreadDark = colorIsDark(sourceMessage.threadInfo.color);
     const isTargetThreadDark = colorIsDark(targetColor);
     if (isSourceThreadDark !== isTargetThreadDark) {
       setThreadColorDarkOverride(isTargetThreadDark);
     }
   }, [sourceMessage.threadInfo.color, targetColor]);
 
   const threadColorOverride = React.useMemo(() => {
     if (
       sourceMessage.messageShapeType !== 'text' ||
       !currentTransitionSidebarSourceID
     ) {
       return null;
     }
     return block([
       cond(eq(progress, 1), call([], setThreadColorBrightness)),
       interpolateColors(progress, {
         inputRange: [0, 1],
         outputColorRange: [
           `#${targetColor}`,
           `#${sourceMessage.threadInfo.color}`,
         ],
       }),
     ]);
   }, [
     currentTransitionSidebarSourceID,
     progress,
     setThreadColorBrightness,
     sourceMessage.messageShapeType,
     sourceMessage.threadInfo.color,
     targetColor,
   ]);
 
   const messageContainerStyle = React.useMemo(() => {
     return {
       bottom: currentTransitionSidebarSourceID ? bottom : 0,
       opacity:
         currentTransitionSidebarSourceID &&
         sidebarAnimationType === 'fade_source_message'
           ? 0
           : 1,
     };
   }, [bottom, currentTransitionSidebarSourceID, sidebarAnimationType]);
 
   return {
     style: messageContainerStyle,
     threadColorOverride,
     isThreadColorDarkOverride,
   };
 }
 
 function getMessageTooltipKey(item: ChatMessageInfoItemWithHeight): string {
   return `tooltip|${messageKey(item.messageInfo)}`;
 }
 
 function isMessageTooltipKey(key: string): boolean {
   return key.startsWith('tooltip|');
 }
 
 function useOverlayPosition(item: ChatMessageInfoItemWithHeight) {
   const overlayContext = React.useContext(OverlayContext);
   invariant(overlayContext, 'should be set');
 
   for (const overlay of overlayContext.visibleOverlays) {
     if (
       (overlay.routeName === MultimediaMessageTooltipModalRouteName ||
         overlay.routeName === TextMessageTooltipModalRouteName ||
         overlay.routeName === RobotextMessageTooltipModalRouteName) &&
       overlay.routeKey === getMessageTooltipKey(item)
     ) {
       return overlay.position;
     }
   }
   return undefined;
 }
 
 function useContentAndHeaderOpacity(
   item: ChatMessageInfoItemWithHeight,
 ): number | Node {
   const overlayPosition = useOverlayPosition(item);
   const chatContext = React.useContext(ChatContext);
   return React.useMemo(
     () =>
       overlayPosition &&
       chatContext?.sidebarAnimationType === 'move_source_message'
         ? sub(
             1,
             interpolateNode(overlayPosition, {
               inputRange: [0.05, 0.06],
               outputRange: [0, 1],
               extrapolate: Extrapolate.CLAMP,
             }),
           )
         : 1,
     [chatContext?.sidebarAnimationType, overlayPosition],
   );
 }
 
 function useDeliveryIconOpacity(
   item: ChatMessageInfoItemWithHeight,
 ): number | Node {
   const overlayPosition = useOverlayPosition(item);
   const chatContext = React.useContext(ChatContext);
   return React.useMemo(() => {
     if (
       !overlayPosition ||
       !chatContext?.currentTransitionSidebarSourceID ||
       chatContext?.sidebarAnimationType === 'fade_source_message'
     ) {
       return 1;
     }
     return interpolateNode(overlayPosition, {
       inputRange: [0.05, 0.06, 1],
       outputRange: [1, 0, 0],
       extrapolate: Extrapolate.CLAMP,
     });
   }, [
     chatContext?.currentTransitionSidebarSourceID,
     chatContext?.sidebarAnimationType,
     overlayPosition,
   ]);
 }
 
 function chatMessageItemKey(
   item: ChatMessageItemWithHeight | ChatMessageItem,
 ): string {
   if (item.itemType === 'loader') {
     return 'loader';
   }
   return messageKey(item.messageInfo);
 }
 
 export {
   chatMessageItemKey,
   chatMessageItemHeight,
   useAnimatedMessageTooltipButton,
   messageItemHeight,
   getMessageTooltipKey,
   isMessageTooltipKey,
   useContentAndHeaderOpacity,
   useDeliveryIconOpacity,
 };
diff --git a/native/themes/colors.js b/native/themes/colors.js
index 9f5b61fd1..5b5563b69 100644
--- a/native/themes/colors.js
+++ b/native/themes/colors.js
@@ -1,326 +1,326 @@
 // @flow
 
 import * as React from 'react';
 import { StyleSheet } from 'react-native';
 import { createSelector } from 'reselect';
 
 import { selectBackgroundIsDark } from '../navigation/nav-selectors';
 import { NavContext } from '../navigation/navigation-context';
 import { useSelector } from '../redux/redux-utils';
 import type { AppState } from '../redux/state-types';
 import type { GlobalTheme } from '../types/themes';
 
 const light = Object.freeze({
   blockQuoteBackground: '#D3D3D3',
   blockQuoteBorder: '#C0C0C0',
   codeBackground: '#DCDCDC',
   disabledButton: '#D3D3D3',
   disconnectedBarBackground: '#F5F5F5',
   editButton: '#A4A4A2',
   floatingButtonBackground: '#999999',
   floatingButtonLabel: '#EEEEEE',
   greenButton: '#6EC472',
   greenText: 'green',
   headerChevron: '#0A0A0A',
-  inlineSidebarBackground: '#E0E0E0',
-  inlineSidebarLabel: '#000000',
+  inlineEngagementBackground: '#E0E0E0',
+  inlineEngagementLabel: '#000000',
   link: '#036AFF',
   listBackground: 'white',
   listBackgroundLabel: 'black',
   listBackgroundSecondaryLabel: '#444444',
   listBackgroundTernaryLabel: '#999999',
   listChatBubble: '#F1F0F5',
   listForegroundLabel: 'black',
   listForegroundQuaternaryLabel: '#AAAAAA',
   listForegroundSecondaryLabel: '#333333',
   listForegroundTertiaryLabel: '#666666',
   listInputBackground: '#F5F5F5',
   listInputBar: '#E2E2E2',
   listInputBorder: '#AAAAAAAA',
   listInputButton: '#8E8D92',
   listIosHighlightUnderlay: '#DDDDDDDD',
   listSearchBackground: '#F5F5F5',
   listSearchIcon: '#8E8D92',
   listSeparator: '#EEEEEE',
   listSeparatorLabel: '#555555',
   mintButton: '#44CC99',
   modalBackground: '#EEEEEE',
   modalBackgroundLabel: '#333333',
   modalBackgroundSecondaryLabel: '#AAAAAA',
   modalButton: '#BBBBBB',
   modalButtonLabel: 'black',
   modalContrastBackground: 'black',
   modalContrastForegroundLabel: 'white',
   modalContrastOpacity: 0.7,
   modalForeground: 'white',
   modalForegroundBorder: '#CCCCCC',
   modalForegroundLabel: 'black',
   modalForegroundSecondaryLabel: '#888888',
   modalForegroundTertiaryLabel: '#AAAAAA',
   modalIosHighlightUnderlay: '#CCCCCCDD',
   modalSubtext: '#CCCCCC',
   modalSubtextLabel: '#555555',
   navigationCard: '#FFFFFF',
   navigationChevron: '#BAB9BE',
   panelBackground: '#F5F5F5',
   panelBackgroundLabel: '#888888',
   panelForeground: 'white',
   panelForegroundBorder: '#CCCCCC',
   panelForegroundLabel: 'black',
   panelForegroundSecondaryLabel: '#333333',
   panelForegroundTertiaryLabel: '#888888',
   panelIosHighlightUnderlay: '#EEEEEEDD',
   panelSecondaryForeground: '#F5F5F5',
   panelSecondaryForegroundBorder: '#D1D1D6',
   purpleLink: '#7E57C2',
   purpleButton: '#7E57C2',
   redButton: '#BB8888',
   redText: '#FF4444',
   spoiler: '#33332C',
   tabBarAccent: '#7E57C2',
   tabBarBackground: '#F5F5F5',
   tabBarActiveTintColor: '#7E57C2',
   vibrantGreenButton: '#00C853',
   vibrantRedButton: '#F53100',
   tooltipBackground: '#E0E0E0',
   logInSpacer: '#FFFFFF33',
   logInText: 'white',
   siweButton: 'white',
   siweButtonText: '#1F1F1F',
   drawerExpandButton: '#808080',
   drawerExpandButtonDisabled: '#CCCCCC',
   drawerItemLabelLevel0: '#0A0A0A',
   drawerItemLabelLevel1: '#0A0A0A',
   drawerItemLabelLevel2: '#1F1F1F',
   drawerOpenCommunityBackground: '#F5F5F5',
   drawerBackgroud: '#FFFFFF',
   subthreadsModalClose: '#808080',
   subthreadsModalBackgroud: '#EEEEEE',
   subthreadsModalSearch: 'rgba(0, 0, 0, 0.08)',
 });
 export type Colors = $Exact<typeof light>;
 
 const dark: Colors = Object.freeze({
   blockQuoteBackground: '#A9A9A9',
   blockQuoteBorder: '#808080',
   codeBackground: '#0A0A0A',
   disabledButton: '#444444',
   disconnectedBarBackground: '#1D1D1D',
   editButton: '#5B5B5D',
   floatingButtonBackground: '#666666',
   floatingButtonLabel: 'white',
   greenButton: '#43A047',
   greenText: '#44FF44',
   headerChevron: '#FFFFFF',
-  inlineSidebarBackground: '#666666',
-  inlineSidebarLabel: '#FFFFFF',
+  inlineEngagementBackground: '#666666',
+  inlineEngagementLabel: '#FFFFFF',
   link: '#129AFF',
   listBackground: '#0A0A0A',
   listBackgroundLabel: '#C7C7CC',
   listBackgroundSecondaryLabel: '#BBBBBB',
   listBackgroundTernaryLabel: '#888888',
   listChatBubble: '#26252A',
   listForegroundLabel: 'white',
   listForegroundQuaternaryLabel: '#555555',
   listForegroundSecondaryLabel: '#CCCCCC',
   listForegroundTertiaryLabel: '#999999',
   listInputBackground: '#1D1D1D',
   listInputBar: '#555555',
   listInputBorder: '#333333',
   listInputButton: '#AAAAAA',
   listIosHighlightUnderlay: '#BBBBBB88',
   listSearchBackground: '#1D1D1D',
   listSearchIcon: '#AAAAAA',
   listSeparator: '#3A3A3C',
   listSeparatorLabel: '#EEEEEE',
   mintButton: '#44CC99',
   modalBackground: '#0A0A0A',
   modalBackgroundLabel: '#CCCCCC',
   modalBackgroundSecondaryLabel: '#555555',
   modalButton: '#666666',
   modalButtonLabel: 'white',
   modalContrastBackground: 'white',
   modalContrastForegroundLabel: 'black',
   modalContrastOpacity: 0.85,
   modalForeground: '#1C1C1E',
   modalForegroundBorder: '#1C1C1E',
   modalForegroundLabel: 'white',
   modalForegroundSecondaryLabel: '#AAAAAA',
   modalForegroundTertiaryLabel: '#666666',
   modalIosHighlightUnderlay: '#AAAAAA88',
   modalSubtext: '#444444',
   modalSubtextLabel: '#AAAAAA',
   navigationCard: '#2A2A2A',
   navigationChevron: '#5B5B5D',
   panelBackground: '#0A0A0A',
   panelBackgroundLabel: '#C7C7CC',
   panelForeground: '#1D1D1D',
   panelForegroundBorder: '#2C2C2E',
   panelForegroundLabel: 'white',
   panelForegroundSecondaryLabel: '#CCCCCC',
   panelForegroundTertiaryLabel: '#AAAAAA',
   panelIosHighlightUnderlay: '#313035',
   panelSecondaryForeground: '#333333',
   panelSecondaryForegroundBorder: '#666666',
   purpleLink: '#AE94DB',
   purpleButton: '#7E57C2',
   redButton: '#FF4444',
   redText: '#FF4444',
   spoiler: '#33332C',
   tabBarAccent: '#AE94DB',
   tabBarBackground: '#0A0A0A',
   tabBarActiveTintColor: '#AE94DB',
   vibrantGreenButton: '#00C853',
   vibrantRedButton: '#F53100',
   tooltipBackground: '#1F1F1F',
   logInSpacer: '#FFFFFF33',
   logInText: 'white',
   siweButton: 'white',
   siweButtonText: '#1F1F1F',
   drawerExpandButton: '#808080',
   drawerExpandButtonDisabled: '#404040',
   drawerItemLabelLevel0: '#CCCCCC',
   drawerItemLabelLevel1: '#CCCCCC',
   drawerItemLabelLevel2: '#F5F5F5',
   drawerOpenCommunityBackground: '#191919',
   drawerBackgroud: '#1F1F1F',
   subthreadsModalClose: '#808080',
   subthreadsModalBackgroud: '#1F1F1F',
   subthreadsModalSearch: 'rgba(255, 255, 255, 0.04)',
 });
 const colors = { light, dark };
 
 const colorsSelector: (state: AppState) => Colors = createSelector(
   (state: AppState) => state.globalThemeInfo.activeTheme,
   (theme: ?GlobalTheme) => {
     const explicitTheme = theme ? theme : 'light';
     return colors[explicitTheme];
   },
 );
 
 const magicStrings = new Set();
 for (const theme in colors) {
   for (const magicString in colors[theme]) {
     magicStrings.add(magicString);
   }
 }
 
 type Styles = { [name: string]: { [field: string]: mixed } };
 
 type ReplaceField = (input: any) => any;
 export type StyleSheetOf<S: Styles> = $ObjMap<S, ReplaceField>;
 
 function stylesFromColors<IS: Styles>(
   obj: IS,
   themeColors: Colors,
 ): StyleSheetOf<IS> {
   const result = {};
   for (const key in obj) {
     const style = obj[key];
     const filledInStyle = { ...style };
     for (const styleKey in style) {
       const styleValue = style[styleKey];
       if (typeof styleValue !== 'string') {
         continue;
       }
       if (magicStrings.has(styleValue)) {
         const mapped = themeColors[styleValue];
         if (mapped) {
           filledInStyle[styleKey] = mapped;
         }
       }
     }
     result[key] = filledInStyle;
   }
   return StyleSheet.create(result);
 }
 
 function styleSelector<IS: Styles>(
   obj: IS,
 ): (state: AppState) => StyleSheetOf<IS> {
   return createSelector(colorsSelector, (themeColors: Colors) =>
     stylesFromColors(obj, themeColors),
   );
 }
 
 function useStyles<IS: Styles>(obj: IS): StyleSheetOf<IS> {
   const ourColors = useColors();
   return React.useMemo(() => stylesFromColors(obj, ourColors), [
     obj,
     ourColors,
   ]);
 }
 
 function useOverlayStyles<IS: Styles>(obj: IS): StyleSheetOf<IS> {
   const navContext = React.useContext(NavContext);
   const navigationState = navContext && navContext.state;
 
   const theme = useSelector(
     (state: AppState) => state.globalThemeInfo.activeTheme,
   );
 
   const backgroundIsDark = React.useMemo(
     () => selectBackgroundIsDark(navigationState, theme),
     [navigationState, theme],
   );
   const syntheticTheme = backgroundIsDark ? 'dark' : 'light';
 
   return React.useMemo(() => stylesFromColors(obj, colors[syntheticTheme]), [
     obj,
     syntheticTheme,
   ]);
 }
 
 function useColors(): Colors {
   return useSelector(colorsSelector);
 }
 
 function getStylesForTheme<IS: Styles>(
   obj: IS,
   theme: GlobalTheme,
 ): StyleSheetOf<IS> {
   return stylesFromColors(obj, colors[theme]);
 }
 
 export type IndicatorStyle = 'white' | 'black';
 function useIndicatorStyle(): IndicatorStyle {
   const theme = useSelector(
     (state: AppState) => state.globalThemeInfo.activeTheme,
   );
   return theme && theme === 'dark' ? 'white' : 'black';
 }
 const indicatorStyleSelector: (
   state: AppState,
 ) => IndicatorStyle = createSelector(
   (state: AppState) => state.globalThemeInfo.activeTheme,
   (theme: ?GlobalTheme) => {
     return theme && theme === 'dark' ? 'white' : 'black';
   },
 );
 
 export type KeyboardAppearance = 'default' | 'light' | 'dark';
 const keyboardAppearanceSelector: (
   state: AppState,
 ) => KeyboardAppearance = createSelector(
   (state: AppState) => state.globalThemeInfo.activeTheme,
   (theme: ?GlobalTheme) => {
     return theme && theme === 'dark' ? 'dark' : 'light';
   },
 );
 
 function useKeyboardAppearance(): KeyboardAppearance {
   return useSelector(keyboardAppearanceSelector);
 }
 
 export {
   colors,
   colorsSelector,
   styleSelector,
   useStyles,
   useOverlayStyles,
   useColors,
   getStylesForTheme,
   useIndicatorStyle,
   indicatorStyleSelector,
   useKeyboardAppearance,
 };
diff --git a/web/chat/chat-message-list.css b/web/chat/chat-message-list.css
index 55393707e..5c453e423 100644
--- a/web/chat/chat-message-list.css
+++ b/web/chat/chat-message-list.css
@@ -1,215 +1,215 @@
 div.outerMessageContainer {
   position: relative;
   height: calc(100vh - 128px);
   min-height: 0;
   display: flex;
   flex-direction: column;
 }
 div.messageContainer {
   height: 100%;
   overflow-y: auto;
   display: flex;
   flex-direction: column-reverse;
 }
 div.mirroredMessageContainer {
   flex-direction: column !important;
   transform: scaleY(-1);
 }
 div.mirroredMessageContainer > div {
   transform: scaleY(-1);
 }
 
 div.message {
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
 }
 
 div.loading {
   text-align: center;
   padding: 12px;
 }
 
 div.conversationHeader {
   color: var(--chat-timestamp-color);
   font-size: var(--xs-font-12);
   padding: 6px 0;
   line-height: var(--line-height-text);
   text-align: center;
 }
 div.conversationHeader:last-child {
   padding-top: 6px;
 }
 
 div.messageTooltipActiveArea {
   position: absolute;
   display: flex;
   top: 0;
   bottom: 0;
   align-items: center;
   padding: 0 12px;
 }
 
 div.viewerMessageTooltipActiveArea {
   right: 100%;
 }
 div.nonViewerMessageActiveArea {
   left: 100%;
 }
 div.messageTooltipActiveArea > div + div {
   margin-left: 4px;
 }
 
 div.messageTooltipLinkIcon:hover {
   cursor: pointer;
 }
 
 div.textMessage {
   padding: 6px 12px;
   white-space: pre-wrap;
   word-wrap: break-word;
   width: 100%;
   box-sizing: border-box;
 }
 div.textMessageDefaultBackground {
   background-color: var(--text-message-default-background);
 }
 div.normalTextMessage {
   font-size: 16px;
 }
 div.emojiOnlyTextMessage {
   font-size: 32px;
   font-family: emoji;
 }
 span.authorName {
   color: #777777;
   font-size: 14px;
   padding: 4px 24px;
 }
 div.darkTextMessage {
   color: white;
 }
 div.lightTextMessage {
   color: black;
 }
 
 div.content {
   display: flex;
   flex-shrink: 0;
   align-items: center;
   margin-bottom: 5px;
   box-sizing: border-box;
   width: 100%;
 }
 div.nonViewerContent {
   align-self: flex-start;
   justify-content: flex-start;
   padding-right: 8px;
 }
 div.viewerContent {
   align-self: flex-end;
   justify-content: flex-end;
   padding-right: 4px;
 }
 div.iconContainer {
   margin-right: 1px;
 }
 div.iconContainer > svg {
   height: 16px;
 }
 
 div.messageBoxContainer {
   position: relative;
   display: flex;
   max-width: calc(min(68%, 1000px));
   margin: 0 4px 0 12px;
 }
 div.fixedWidthMessageBoxContainer {
   width: 68%;
 }
 
 div.messageBox {
   overflow: hidden;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   flex-shrink: 0;
   max-width: 100%;
 }
 div.fixedWidthMessageBox {
   width: 100%;
 }
 
 div.failedSend {
   display: flex;
   justify-content: flex-end;
   flex-shrink: 0;
   margin-right: 30px;
   padding-bottom: 6px;
 }
 
 .deliveryFailed {
   text-transform: uppercase;
   font-size: 14px;
   padding: 0 3px;
   color: var(--fg);
 }
 
 .retryButtonText {
   text-transform: uppercase;
   font-size: 14px;
 }
 
 div.messageBox > div.imageGrid {
   display: grid;
   width: 100%;
   grid-template-columns: repeat(6, 1fr);
   grid-gap: 5px;
 }
 div.messageBox span.multimedia > span.multimediaImage {
   min-height: initial;
   min-width: initial;
 }
 div.messageBox span.multimedia > span.multimediaImage > img {
   max-height: 600px;
 }
 
 div.imageGrid > span.multimedia {
   grid-column-end: span 3;
 }
 div.imageGrid > span.multimedia:first-child {
   margin-top: 0;
 }
 div.imageGrid > span.multimedia > span.multimediaImage {
   flex: 1;
 }
 div.imageGrid > span.multimedia > span.multimediaImage:after {
   content: '';
   display: block;
   padding-bottom: calc(min(600px, 100%));
 }
 div.imageGrid > span.multimedia > span.multimediaImage > img {
   position: absolute;
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
 
 div.imageGrid > span.multimedia:nth-last-child(n + 3):first-child,
 div.imageGrid > span.multimedia:nth-last-child(n + 3):first-child ~ * {
   grid-column-end: span 2;
 }
 div.imageGrid > span.multimedia:nth-last-child(n + 4):first-child,
 div.imageGrid > span.multimedia:nth-last-child(n + 4):first-child ~ * {
   grid-column-end: span 3;
 }
 div.imageGrid > span.multimedia:nth-last-child(n + 5):first-child,
 div.imageGrid > span.multimedia:nth-last-child(n + 5):first-child ~ * {
   grid-column-end: span 2;
 }
 div.sidebarMarginBottom {
   margin-bottom: 2px;
 }
-svg.inlineSidebarIcon {
+svg.inlineEngagementIcon {
   color: #666666;
 }
diff --git a/web/chat/composed-message.react.js b/web/chat/composed-message.react.js
index f61afca1b..0bd0f4e78 100644
--- a/web/chat/composed-message.react.js
+++ b/web/chat/composed-message.react.js
@@ -1,194 +1,194 @@
 // @flow
 
 import classNames from 'classnames';
 import * as React from 'react';
 import {
   Circle as CircleIcon,
   CheckCircle as CheckCircleIcon,
   XCircle as XCircleIcon,
 } from 'react-feather';
 
 import { type ChatMessageInfoItem } from 'lib/selectors/chat-selectors';
 import { stringForUser } from 'lib/shared/user-utils';
 import { assertComposableMessageType } from 'lib/types/message-types';
 import { type ThreadInfo } from 'lib/types/thread-types';
 
 import { type InputState, InputStateContext } from '../input/input-state';
 import { tooltipPositions, useMessageTooltip } from '../utils/tooltip-utils';
 import css from './chat-message-list.css';
 import FailedSend from './failed-send.react';
-import InlineSidebar from './inline-sidebar.react';
+import InlineEngagement from './inline-engagement.react';
 
 const availableTooltipPositionsForViewerMessage = [
   tooltipPositions.LEFT,
   tooltipPositions.LEFT_BOTTOM,
   tooltipPositions.LEFT_TOP,
   tooltipPositions.RIGHT,
   tooltipPositions.RIGHT_BOTTOM,
   tooltipPositions.RIGHT_TOP,
   tooltipPositions.BOTTOM,
   tooltipPositions.TOP,
 ];
 const availableTooltipPositionsForNonViewerMessage = [
   tooltipPositions.RIGHT,
   tooltipPositions.RIGHT_BOTTOM,
   tooltipPositions.RIGHT_TOP,
   tooltipPositions.LEFT,
   tooltipPositions.LEFT_BOTTOM,
   tooltipPositions.LEFT_TOP,
   tooltipPositions.BOTTOM,
   tooltipPositions.TOP,
 ];
 
 type BaseProps = {
   +item: ChatMessageInfoItem,
   +threadInfo: ThreadInfo,
   +sendFailed: boolean,
   +children: React.Node,
   +fixedWidth?: boolean,
   +borderRadius: number,
 };
 type BaseConfig = React.Config<BaseProps, typeof ComposedMessage.defaultProps>;
 type Props = {
   ...BaseProps,
   // withInputState
   +inputState: ?InputState,
   +onMouseLeave: ?() => mixed,
   +onMouseEnter: (event: SyntheticEvent<HTMLDivElement>) => mixed,
-  +containsInlineSidebar: boolean,
+  +containsInlineEngagement: boolean,
 };
 class ComposedMessage extends React.PureComponent<Props> {
   static defaultProps: { +borderRadius: number } = {
     borderRadius: 8,
   };
 
   render(): React.Node {
     assertComposableMessageType(this.props.item.messageInfo.type);
     const { borderRadius, item, threadInfo } = this.props;
     const { id, creator } = item.messageInfo;
     const threadColor = threadInfo.color;
 
     const { isViewer } = creator;
     const contentClassName = classNames({
       [css.content]: true,
       [css.viewerContent]: isViewer,
       [css.nonViewerContent]: !isViewer,
     });
     const messageBoxContainerClassName = classNames({
       [css.messageBoxContainer]: true,
       [css.fixedWidthMessageBoxContainer]: this.props.fixedWidth,
     });
     const messageBoxClassName = classNames({
       [css.messageBox]: true,
       [css.fixedWidthMessageBox]: this.props.fixedWidth,
     });
     const messageBoxStyle = {
       borderTopRightRadius: isViewer && !item.startsCluster ? 0 : borderRadius,
       borderBottomRightRadius: isViewer && !item.endsCluster ? 0 : borderRadius,
       borderTopLeftRadius: !isViewer && !item.startsCluster ? 0 : borderRadius,
       borderBottomLeftRadius: !isViewer && !item.endsCluster ? 0 : borderRadius,
     };
 
     let authorName = null;
     if (!isViewer && item.startsCluster) {
       authorName = (
         <span className={css.authorName}>{stringForUser(creator)}</span>
       );
     }
 
     let deliveryIcon = null;
     let failedSendInfo = null;
     if (isViewer) {
       let deliveryIconSpan;
       let deliveryIconColor = threadColor;
       if (id !== null && id !== undefined) {
         deliveryIconSpan = <CheckCircleIcon />;
       } else if (this.props.sendFailed) {
         deliveryIconSpan = <XCircleIcon />;
         deliveryIconColor = 'FF0000';
         failedSendInfo = <FailedSend item={item} threadInfo={threadInfo} />;
       } else {
         deliveryIconSpan = <CircleIcon />;
       }
       deliveryIcon = (
         <div
           className={css.iconContainer}
           style={{ color: `#${deliveryIconColor}` }}
         >
           {deliveryIconSpan}
         </div>
       );
     }
 
-    let inlineSidebar = null;
+    let inlineEngagement = null;
     if (
-      (this.props.containsInlineSidebar && item.threadCreatedFromMessage) ||
+      (this.props.containsInlineEngagement && item.threadCreatedFromMessage) ||
       item.reactions.size > 0
     ) {
       const positioning = isViewer ? 'right' : 'left';
-      inlineSidebar = (
+      inlineEngagement = (
         <div className={css.sidebarMarginBottom}>
-          <InlineSidebar
+          <InlineEngagement
             threadInfo={item.threadCreatedFromMessage}
             reactions={item.reactions}
             positioning={positioning}
           />
         </div>
       );
     }
 
     return (
       <React.Fragment>
         {authorName}
         <div className={contentClassName}>
           <div
             className={messageBoxContainerClassName}
             onMouseEnter={this.props.onMouseEnter}
             onMouseLeave={this.props.onMouseLeave}
           >
             <div className={messageBoxClassName} style={messageBoxStyle}>
               {this.props.children}
             </div>
           </div>
           {deliveryIcon}
         </div>
         {failedSendInfo}
-        {inlineSidebar}
+        {inlineEngagement}
       </React.Fragment>
     );
   }
 }
 
 type ConnectedConfig = React.Config<
   BaseProps,
   typeof ComposedMessage.defaultProps,
 >;
 const ConnectedComposedMessage: React.ComponentType<ConnectedConfig> = React.memo<BaseConfig>(
   function ConnectedComposedMessage(props) {
     const { item, threadInfo } = props;
     const inputState = React.useContext(InputStateContext);
     const isViewer = props.item.messageInfo.creator.isViewer;
     const availablePositions = isViewer
       ? availableTooltipPositionsForViewerMessage
       : availableTooltipPositionsForNonViewerMessage;
-    const containsInlineSidebar = !!item.threadCreatedFromMessage;
+    const containsInlineEngagement = !!item.threadCreatedFromMessage;
 
     const { onMouseLeave, onMouseEnter } = useMessageTooltip({
       item,
       threadInfo,
       availablePositions,
     });
 
     return (
       <ComposedMessage
         {...props}
         inputState={inputState}
         onMouseLeave={onMouseLeave}
         onMouseEnter={onMouseEnter}
-        containsInlineSidebar={containsInlineSidebar}
+        containsInlineEngagement={containsInlineEngagement}
       />
     );
   },
 );
 
 export default ConnectedComposedMessage;
diff --git a/web/chat/inline-sidebar.css b/web/chat/inline-engagement.css
similarity index 76%
rename from web/chat/inline-sidebar.css
rename to web/chat/inline-engagement.css
index 2c7d04195..310e283f0 100644
--- a/web/chat/inline-sidebar.css
+++ b/web/chat/inline-engagement.css
@@ -1,57 +1,57 @@
-div.inlineSidebarContainer {
+div.inlineEngagementContainer {
   display: flex;
 }
 div.centerContainer {
   justify-content: center;
 }
 div.leftContainer {
   justify-content: flex-start;
   position: relative;
   top: -10px;
   left: 12px;
   margin-right: 12px;
 }
 div.rightContainer {
   justify-content: flex-end;
   position: relative;
   top: -10px;
   right: 31px;
   margin-left: 31px;
 }
-.inlineSidebarContent {
-  background: var(--inline-sidebar-bg);
-  color: var(--inline-sidebar-color);
+.inlineEngagementContent {
+  background: var(--inline-engagement-bg);
+  color: var(--inline-engagement-color);
   font-size: var(--s-font-14);
   line-height: var(--line-height-text);
   flex-direction: row;
   display: flex;
   border-radius: 16px;
   padding: 8px;
   cursor: pointer;
   gap: 12px;
   align-items: center;
   transition: background 0.2s ease-in-out;
 }
 
-.inlineSidebarContent:hover {
-  background: var(--inline-sidebar-bg-hover);
+.inlineEngagementContent:hover {
+  background: var(--inline-engagement-bg-hover);
 }
 
 div.reactionsContainer {
   flex-direction: row;
   display: flex;
   gap: 4px;
 }
 div.replies {
   flex-direction: row;
   display: flex;
   align-items: center;
   gap: 4px;
 }
 div.unread {
   font-weight: bold;
 }
 
-svg.inlineSidebarIcon {
+svg.inlineEngagementIcon {
   color: #666666;
 }
diff --git a/web/chat/inline-sidebar.react.js b/web/chat/inline-engagement.react.js
similarity index 82%
rename from web/chat/inline-sidebar.react.js
rename to web/chat/inline-engagement.react.js
index ebe8013c3..7ba4a6eaf 100644
--- a/web/chat/inline-sidebar.react.js
+++ b/web/chat/inline-engagement.react.js
@@ -1,73 +1,73 @@
 // @flow
 
 import classNames from 'classnames';
 import * as React from 'react';
 
-import useInlineSidebarText from 'lib/hooks/inline-sidebar-text.react';
+import useInlineEngagementText from 'lib/hooks/inline-engagement-text.react';
 import type { MessageReactionInfo } from 'lib/selectors/chat-selectors';
 import { stringForReactionList } from 'lib/shared/reaction-utils';
 import type { ThreadInfo } from 'lib/types/thread-types';
 
 import CommIcon from '../CommIcon.react';
 import { useOnClickThread } from '../selectors/thread-selectors';
-import css from './inline-sidebar.css';
+import css from './inline-engagement.css';
 
 type Props = {
   +threadInfo: ?ThreadInfo,
   +reactions?: $ReadOnlyMap<string, MessageReactionInfo>,
   +positioning: 'left' | 'center' | 'right',
 };
-function InlineSidebar(props: Props): React.Node {
+function InlineEngagement(props: Props): React.Node {
   const { threadInfo, positioning, reactions } = props;
-  const repliesText = useInlineSidebarText(threadInfo);
+  const repliesText = useInlineEngagementText(threadInfo);
 
   const containerClasses = classNames([
-    css.inlineSidebarContainer,
+    css.inlineEngagementContainer,
     {
       [css.leftContainer]: positioning === 'left',
       [css.centerContainer]: positioning === 'center',
       [css.rightContainer]: positioning === 'right',
     },
   ]);
 
   const reactionsList = React.useMemo(() => {
     if (!reactions || reactions.size === 0) {
       return null;
     }
 
     const reactionText = stringForReactionList(reactions);
 
     return <div className={css.reactionsContainer}>{reactionText}</div>;
   }, [reactions]);
 
   const onClick = useOnClickThread(threadInfo);
 
   const threadInfoExists = !!threadInfo;
 
   const sidebarItem = React.useMemo(() => {
     if (!threadInfoExists || !repliesText) {
       return null;
     }
 
     return (
       <div className={css.replies}>
         <CommIcon size={14} icon="sidebar-filled" />
         {repliesText}
       </div>
     );
   }, [threadInfoExists, repliesText]);
 
   return (
     <div className={containerClasses}>
       <a
-        className={css.inlineSidebarContent}
+        className={css.inlineEngagementContent}
         onClick={threadInfoExists ? onClick : null}
       >
         {sidebarItem}
         {reactionsList}
       </a>
     </div>
   );
 }
 
-export default InlineSidebar;
+export default InlineEngagement;
diff --git a/web/chat/robotext-message.react.js b/web/chat/robotext-message.react.js
index b8a12f95d..1be3dd898 100644
--- a/web/chat/robotext-message.react.js
+++ b/web/chat/robotext-message.react.js
@@ -1,170 +1,170 @@
 // @flow
 
 import * as React from 'react';
 import { useDispatch } from 'react-redux';
 
 import { type RobotextChatMessageInfoItem } from 'lib/selectors/chat-selectors';
 import { threadInfoSelector } from 'lib/selectors/thread-selectors';
 import { splitRobotext, parseRobotextEntity } from 'lib/shared/message-utils';
 import type { Dispatch } from 'lib/types/redux-types';
 import { type ThreadInfo } from 'lib/types/thread-types';
 
 import Markdown from '../markdown/markdown.react';
 import { linkRules } from '../markdown/rules.react';
 import { updateNavInfoActionType } from '../redux/action-types';
 import { useSelector } from '../redux/redux-utils';
 import { tooltipPositions, useMessageTooltip } from '../utils/tooltip-utils';
-import InlineSidebar from './inline-sidebar.react';
+import InlineEngagement from './inline-engagement.react';
 import css from './robotext-message.css';
 
 const availableTooltipPositionsForRobotext = [
   tooltipPositions.LEFT,
   tooltipPositions.LEFT_TOP,
   tooltipPositions.LEFT_BOTTOM,
   tooltipPositions.RIGHT,
   tooltipPositions.RIGHT_TOP,
   tooltipPositions.RIGHT_BOTTOM,
 ];
 
 type BaseProps = {
   +item: RobotextChatMessageInfoItem,
   +threadInfo: ThreadInfo,
 };
 type Props = {
   ...BaseProps,
   +onMouseLeave: ?() => mixed,
   +onMouseEnter: (event: SyntheticEvent<HTMLDivElement>) => mixed,
 };
 class RobotextMessage extends React.PureComponent<Props> {
   render() {
-    let inlineSidebar;
+    let inlineEngagement;
     if (
       this.props.item.threadCreatedFromMessage ||
       this.props.item.reactions.size > 0
     ) {
-      inlineSidebar = (
+      inlineEngagement = (
         <div className={css.sidebarMarginTop}>
-          <InlineSidebar
+          <InlineEngagement
             threadInfo={this.props.item.threadCreatedFromMessage}
             reactions={this.props.item.reactions}
             positioning="center"
           />
         </div>
       );
     }
 
     return (
       <div className={css.robotextContainer}>
         <div
           className={css.innerRobotextContainer}
           onMouseEnter={this.props.onMouseEnter}
           onMouseLeave={this.props.onMouseLeave}
         >
           <span>{this.linkedRobotext()}</span>
         </div>
-        {inlineSidebar}
+        {inlineEngagement}
       </div>
     );
   }
 
   linkedRobotext() {
     const { item } = this.props;
     const { robotext } = item;
     const robotextParts = splitRobotext(robotext);
     const textParts = [];
     let keyIndex = 0;
     for (const splitPart of robotextParts) {
       if (splitPart === '') {
         continue;
       }
       if (splitPart.charAt(0) !== '<') {
         const key = `text${keyIndex++}`;
         textParts.push(
           <Markdown key={key} rules={linkRules(false)}>
             {decodeURI(splitPart)}
           </Markdown>,
         );
         continue;
       }
 
       const { rawText, entityType, id } = parseRobotextEntity(splitPart);
 
       if (entityType === 't' && id !== item.messageInfo.threadID) {
         textParts.push(<ThreadEntity key={id} id={id} name={rawText} />);
       } else if (entityType === 'c') {
         textParts.push(<ColorEntity key={id} color={rawText} />);
       } else {
         textParts.push(rawText);
       }
     }
 
     return textParts;
   }
 }
 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}
       />
     );
   },
 );
 
 function ColorEntity(props: { color: string }) {
   const colorStyle = { color: props.color };
   return <span style={colorStyle}>{props.color}</span>;
 }
 
 const ConnectedRobotextMessage: React.ComponentType<BaseProps> = React.memo<BaseProps>(
   function ConnectedRobotextMessage(props) {
     const { item, threadInfo } = props;
 
     const { onMouseLeave, onMouseEnter } = useMessageTooltip({
       item,
       threadInfo,
       availablePositions: availableTooltipPositionsForRobotext,
     });
 
     return (
       <RobotextMessage
         {...props}
         onMouseLeave={onMouseLeave}
         onMouseEnter={onMouseEnter}
       />
     );
   },
 );
 
 export default ConnectedRobotextMessage;
diff --git a/web/theme.css b/web/theme.css
index e76ba9072..44fb35a95 100644
--- a/web/theme.css
+++ b/web/theme.css
@@ -1,197 +1,197 @@
 :root {
   /* Never use color values defined here directly in CSS. Add color variables to "Color Theme" below
 
      The reason we never use color values defined here directly in CSS is
 
       1. It makes changing themes from light / dark / user generated impossible.
       2. Gives the programmer context into the color being used.
       3. If our color system changes it's much easier to change color values in one place.
 
      Add a color value to the theme below, and then use it in your CSS.
      naming convention:
      - bg: background.
      - fg: foreground.
      - color: text-color
    */
   --shades-white-100: #ffffff;
   --shades-white-90: #f5f5f5;
   --shades-white-80: #ebebeb;
   --shades-white-70: #e0e0e0;
   --shades-white-60: #cccccc;
 
   --shades-black-100: #0a0a0a;
   --shades-black-90: #1f1f1f;
   --shades-black-80: #404040;
   --shades-black-70: #666666;
   --shades-black-60: #808080;
 
   --violet-dark-100: #7e57c2;
   --violet-dark-80: #6d49ab;
   --violet-dark-60: #563894;
   --violet-dark-40: #44297a;
   --violet-dark-20: #331f5c;
 
   --violet-light-100: #ae94db;
   --violet-light-80: #b9a4df;
   --violet-light-60: #d3c6ec;
   --violet-light-40: #e8e0f5;
   --violet-light-20: #f3f0fa;
 
   --success-light-10: #d5f6e3;
   --success-light-50: #6cdf9c;
   --success-primary: #00c853;
   --success-dark-50: #029841;
   --success-dark-90: #034920;
 
   --error-light-10: #feebe6;
   --error-light-50: #f9947b;
   --error-primary: #f53100;
   --error-dark-50: #b62602;
   --error-dark-90: #4f1203;
 
   --logo-bg: #111827;
   --spoiler-color: #33332c;
   --loading-foreground: #1b0e38;
 
   --bg: var(--shades-black-100);
   --fg: var(--shades-white-100);
   --color-disabled: var(--shades-black-60);
   --text-input-bg: var(--shades-black-80);
   --text-input-color: var(--shades-white-60);
   --text-input-placeholder: var(--shades-white-60);
   --border: var(--shades-black-80);
   --error: var(--error-primary);
   --success: var(--success-dark-50);
 
   /* Color Theme */
   --btn-bg-filled: var(--violet-dark-100);
   --btn-bg-outline: var(--shades-black-90);
   --btn-bg-success: var(--success-dark-50);
   --btn-bg-danger: var(--error-primary);
   --btn-bg-disabled: var(--shades-black-80);
   --btn-disabled-color: var(--shades-black-60);
   --chat-bg: var(--violet-dark-80);
   --chat-confirmation-icon: var(--violet-dark-100);
   --keyserver-selection: var(--violet-dark-60);
   --thread-selection: var(--violet-light-80);
   --thread-hover-bg: var(--shades-black-80);
   --thread-active-bg: var(--shades-black-80);
   --chat-timestamp-color: var(--shades-black-60);
   --tool-tip-bg: var(--shades-black-80);
   --tool-tip-color: var(--shades-white-60);
   --border-color: var(--shades-black-80);
   --calendar-chevron: var(--shades-black-60);
   --calendar-day-bg: var(--shades-black-60);
   --calendar-day-selected-color: var(--violet-dark-80);
   --community-bg: var(--shades-black-90);
   --community-settings-selected: var(--violet-dark-60);
   --unread-bg: var(--error-primary);
   --settings-btn-bg: var(--violet-dark-100);
   --modal-bg: var(--shades-black-90);
   --modal-fg: var(--shades-white-60);
   --join-bg: var(--shades-black-90);
   --help-color: var(--shades-black-60);
   --breadcrumb-color: var(--shades-white-60);
   --breadcrumb-color-unread: var(--shades-white-60);
   --btn-outline-border: var(--shades-black-60);
   --thread-color-read: var(--shades-black-60);
   --thread-from-color-read: var(--shades-black-80);
   --thread-last-message-color-read: var(--shades-black-60);
   --relationship-button-green: var(--success-dark-50);
   --relationship-button-red: var(--error-primary);
   --relationship-button-text: var(--fg);
   --disconnected-bar-alert-bg: var(--error-dark-50);
   --disconnected-bar-alert-color: var(--shades-white-100);
   --disconnected-bar-connecting-bg: var(--shades-white-70);
   --disconnected-bar-connecting-color: var(--shades-black-100);
   --permission-color: var(--shades-white-60);
   --thread-top-bar-color: var(--shades-white-100);
   --thread-top-bar-menu-color: var(--shades-white-70);
   --thread-ancestor-keyserver-border: var(--shades-black-70);
   --thread-ancestor-color-light: var(--shades-white-70);
   --thread-ancestor-color-dark: var(--shades-black-100);
   --thread-ancestor-separator-color: var(--shades-white-60);
   --text-message-default-background: var(--shades-black-80);
   --message-action-tooltip-bg: var(--shades-black-90);
   --message-action-tooltip-bg-light: var(--shades-black-80);
   --menu-bg: var(--shades-black-90);
   --menu-bg-light: var(--shades-black-80);
   --menu-separator-color: var(--shades-black-80);
   --menu-color: var(--shades-black-60);
   --menu-color-light: var(--shades-white-60);
   --menu-color-hover: var(--shades-white-100);
   --menu-color-dangerous: var(--error-primary);
   --menu-color-dangerous-hover: var(--error-light-50);
   --app-list-icon-read-only-color: var(--shades-black-60);
   --app-list-icon-enabled-color: var(--success-primary);
   --app-list-icon-disabled-color: var(--shades-white-80);
   --account-settings-label: var(--shades-black-60);
   --account-button-color: var(--violet-dark-100);
   --chat-thread-list-color-active: var(--shades-white-60);
   --chat-thread-list-menu-color: var(--shades-white-60);
   --chat-thread-list-menu-bg: var(--shades-black-80);
   --chat-thread-list-menu-active-color: var(--shades-white-60);
   --chat-thread-list-menu-active-bg: var(--shades-black-90);
   --search-clear-color: var(--shades-white-100);
   --search-clear-bg: var(--shades-black-70);
   --search-input-color: var(--shades-white-100);
   --search-input-placeholder: var(--shades-black-60);
   --search-icon-color: var(--shades-black-60);
   --tabs-header-active-color: var(--shades-white-100);
   --tabs-header-active-border: var(--violet-light-100);
   --tabs-header-background-color: var(--shades-black-60);
   --tabs-header-background-border: var(--shades-black-80);
   --tabs-header-background-color-hover: var(--shades-white-80);
   --tabs-header-background-border-hover: var(--shades-black-70);
   --members-modal-member-text: var(--shades-black-60);
   --members-modal-member-text-hover: var(--shades-white-100);
   --label-default-bg: var(--violet-dark-80);
   --label-default-color: var(--shades-white-80);
   --subchannels-modal-color: var(--shades-black-60);
   --subchannels-modal-color-hover: var(--shades-white-100);
   --color-selector-active-bg: var(--shades-black-80);
   --relationship-modal-color: var(--shades-black-60);
   --arrow-extension-color: var(--shades-black-60);
   --modal-close-color: var(--shades-black-60);
   --modal-close-color-hover: var(--shades-white-100);
   --add-members-group-header-color: var(--shades-black-60);
   --add-members-item-color: var(--shades-black-60);
   --add-members-item-color-hover: var(--shades-white-100);
   --add-members-item-disabled-color: var(--shades-black-80);
   --add-members-item-disabled-color-hover: var(--shades-black-60);
   --add-members-remove-pending-color: var(--error-primary);
   --add-members-remove-pending-color-hover: var(--error-light-50);
   --radio-border: var(--shades-black-70);
   --radio-color: var(--shades-white-60);
   --notification-settings-option-selected-bg: var(--shades-black-80);
   --notification-settings-option-title-color: var(--shades-white-90);
   --notification-settings-option-color: var(--shades-white-60);
   --notification-settings-option-invalid-color: var(--shades-black-80);
   --notification-settings-option-invalid-selected-color: var(--shades-black-60);
   --danger-zone-subheading-color: var(--shades-white-60);
   --danger-zone-explanation-color: var(--shades-black-60);
   --thread-creation-search-container-bg: var(--shades-black-90);
   --thread-creation-close-search-color: var(--shades-black-60);
   --thread-creation-search-item-bg-hover: var(--shades-black-80);
   --thread-creation-search-item-info-color: var(--shades-black-60);
   --chat-message-list-active-border: #5989d6;
   --sidebars-modal-color: var(--shades-black-60);
   --sidebars-modal-color-hover: var(--shades-white-100);
-  --inline-sidebar-bg: var(--shades-black-70);
-  --inline-sidebar-bg-hover: var(--shades-black-80);
-  --inline-sidebar-color: var(--fg);
+  --inline-engagement-bg: var(--shades-black-70);
+  --inline-engagement-bg-hover: var(--shades-black-80);
+  --inline-engagement-color: var(--fg);
   --compose-subchannel-header-fg: var(--shades-black-60);
   --compose-subchannel-header-bg: var(--shades-black-80);
   --compose-subchannel-label-color: var(--shades-black-60);
   --compose-subchannel-mark-color: var(--violet-light-100);
   --enum-option-icon-color: var(--violet-dark-100);
   --show-password-bg-hover: var(--shades-black-70);
   --typeahead-overlay-light: var(--shades-black-80);
   --typeahead-overlay-dark: var(--shades-black-90);
   --typeahead-overlay-text: var(--shades-white-100);
   --typeahead-overlay-shadow-primary: rgba(0, 0, 0, 0.25);
   --typeahead-overlay-shadow-secondary: rgba(0, 0, 0, 0.4);
   --spoiler-text-color: var(--spoiler-color);
   --spoiler-background-color: var(--spoiler-color);
   --purple-link: var(--violet-light-100);
 }
diff --git a/web/utils/tooltip-utils.js b/web/utils/tooltip-utils.js
index 018a2d97c..996986392 100644
--- a/web/utils/tooltip-utils.js
+++ b/web/utils/tooltip-utils.js
@@ -1,694 +1,694 @@
 // @flow
 
 import invariant from 'invariant';
 import _debounce from 'lodash/debounce';
 import * as React from 'react';
 
 import type { ChatMessageInfoItem } from 'lib/selectors/chat-selectors';
 import { localIDPrefix, createMessageReply } from 'lib/shared/message-utils';
 import { useCanCreateReactionFromMessage } from 'lib/shared/reaction-utils';
 import {
   threadHasPermission,
   useSidebarExistsOrCanBeCreated,
 } from 'lib/shared/thread-utils';
 import { isComposableMessageType, messageTypes } from 'lib/types/message-types';
 import type { ThreadInfo } from 'lib/types/thread-types';
 import { threadPermissions } from 'lib/types/thread-types';
 import { longAbsoluteDate } from 'lib/utils/date-utils';
 
 import {
   tooltipButtonStyle,
   tooltipLabelStyle,
   tooltipStyle,
 } from '../chat/chat-constants';
 import MessageLikeTooltipButton from '../chat/message-like-tooltip-button.react';
 import MessageTooltip from '../chat/message-tooltip.react';
 import type { PositionInfo } from '../chat/position-types';
 import { useOnClickReact } from '../chat/reaction-message-utils';
 import { useTooltipContext } from '../chat/tooltip-provider';
 import CommIcon from '../CommIcon.react';
 import { InputStateContext } from '../input/input-state';
 import { useSelector } from '../redux/redux-utils';
 import {
   useOnClickPendingSidebar,
   useOnClickThread,
 } from '../selectors/thread-selectors';
 import { calculateMaxTextWidth } from '../utils/text-utils';
 
 export const tooltipPositions = Object.freeze({
   LEFT: 'left',
   RIGHT: 'right',
   LEFT_BOTTOM: 'left-bottom',
   RIGHT_BOTTOM: 'right-bottom',
   LEFT_TOP: 'left-top',
   RIGHT_TOP: 'right-top',
   TOP: 'top',
   BOTTOM: 'bottom',
 });
 
 type TooltipSize = {
   +height: number,
   +width: number,
 };
 
 export type TooltipPositionStyle = {
   +anchorPoint: {
     +x: number,
     +y: number,
   },
   +verticalPosition: 'top' | 'bottom',
   +horizontalPosition: 'left' | 'right',
   +alignment: 'left' | 'center' | 'right',
 };
 
 export type TooltipPosition = $Values<typeof tooltipPositions>;
 
 export type MessageTooltipAction = {
   +label: string,
   +onClick: (SyntheticEvent<HTMLDivElement>) => mixed,
   +actionButtonContent: React.Node,
 };
 
 const appTopBarHeight = 65;
 
 const font =
   '14px "Inter", -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", ' +
   '"Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", ui-sans-serif';
 
 type FindTooltipPositionArgs = {
   +sourcePositionInfo: PositionInfo,
   +tooltipSize: TooltipSize,
   +availablePositions: $ReadOnlyArray<TooltipPosition>,
   +defaultPosition: TooltipPosition,
   +preventDisplayingBelowSource?: boolean,
 };
 
 function findTooltipPosition({
   sourcePositionInfo,
   tooltipSize,
   availablePositions,
   defaultPosition,
   preventDisplayingBelowSource,
 }: FindTooltipPositionArgs): TooltipPosition {
   if (!window) {
     return defaultPosition;
   }
   const appContainerPositionInfo: PositionInfo = {
     height: window.innerHeight - appTopBarHeight,
     width: window.innerWidth,
     top: appTopBarHeight,
     bottom: window.innerHeight,
     left: 0,
     right: window.innerWidth,
   };
 
   const pointingTo = sourcePositionInfo;
   const {
     top: containerTop,
     left: containerLeft,
     right: containerRight,
     bottom: containerBottom,
   } = appContainerPositionInfo;
 
   const tooltipWidth = tooltipSize.width;
   const tooltipHeight = tooltipSize.height;
 
   const canBeDisplayedOnLeft = containerLeft + tooltipWidth <= pointingTo.left;
   const canBeDisplayedOnRight =
     tooltipWidth + pointingTo.right <= containerRight;
 
   const willCoverSidebarOnTopSideways =
     preventDisplayingBelowSource &&
     pointingTo.top + tooltipHeight > pointingTo.bottom;
 
   const canBeDisplayedOnTopSideways =
     pointingTo.top >= containerTop &&
     pointingTo.top + tooltipHeight <= containerBottom &&
     !willCoverSidebarOnTopSideways;
 
   const canBeDisplayedOnBottomSideways =
     pointingTo.bottom <= containerBottom &&
     pointingTo.bottom - tooltipHeight >= containerTop;
 
   const verticalCenterOfPointingTo = pointingTo.top + pointingTo.height / 2;
   const horizontalCenterOfPointingTo = pointingTo.left + pointingTo.width / 2;
 
   const willCoverSidebarInTheMiddleSideways =
     preventDisplayingBelowSource &&
     verticalCenterOfPointingTo + tooltipHeight / 2 > pointingTo.bottom;
 
   const canBeDisplayedInTheMiddleSideways =
     verticalCenterOfPointingTo - tooltipHeight / 2 >= containerTop &&
     verticalCenterOfPointingTo + tooltipHeight / 2 <= containerBottom &&
     !willCoverSidebarInTheMiddleSideways;
 
   const canBeDisplayedOnTop =
     pointingTo.top - tooltipHeight >= containerTop &&
     horizontalCenterOfPointingTo - tooltipWidth / 2 >= containerLeft &&
     horizontalCenterOfPointingTo + tooltipWidth / 2 <= containerRight;
 
   const canBeDisplayedOnBottom =
     pointingTo.bottom + tooltipHeight <= containerBottom &&
     horizontalCenterOfPointingTo - tooltipWidth / 2 >= containerLeft &&
     horizontalCenterOfPointingTo + tooltipWidth / 2 <= containerRight &&
     !preventDisplayingBelowSource;
 
   for (const tooltipPosition of availablePositions) {
     if (
       tooltipPosition === tooltipPositions.RIGHT &&
       canBeDisplayedOnRight &&
       canBeDisplayedInTheMiddleSideways
     ) {
       return tooltipPosition;
     } else if (
       tooltipPosition === tooltipPositions.RIGHT_BOTTOM &&
       canBeDisplayedOnRight &&
       canBeDisplayedOnBottomSideways
     ) {
       return tooltipPosition;
     } else if (
       tooltipPosition === tooltipPositions.LEFT &&
       canBeDisplayedOnLeft &&
       canBeDisplayedInTheMiddleSideways
     ) {
       return tooltipPosition;
     } else if (
       tooltipPosition === tooltipPositions.LEFT_BOTTOM &&
       canBeDisplayedOnLeft &&
       canBeDisplayedOnBottomSideways
     ) {
       return tooltipPosition;
     } else if (
       tooltipPosition === tooltipPositions.LEFT_TOP &&
       canBeDisplayedOnLeft &&
       canBeDisplayedOnTopSideways
     ) {
       return tooltipPosition;
     } else if (
       tooltipPosition === tooltipPositions.RIGHT_TOP &&
       canBeDisplayedOnRight &&
       canBeDisplayedOnTopSideways
     ) {
       return tooltipPosition;
     } else if (
       tooltipPosition === tooltipPositions.TOP &&
       canBeDisplayedOnTop
     ) {
       return tooltipPosition;
     } else if (
       tooltipPosition === tooltipPositions.BOTTOM &&
       canBeDisplayedOnBottom
     ) {
       return tooltipPosition;
     }
   }
   return defaultPosition;
 }
 
 type GetMessageActionTooltipStyleParams = {
   +sourcePositionInfo: PositionInfo,
   +tooltipSize: TooltipSize,
   +tooltipPosition: TooltipPosition,
 };
 
 function getMessageActionTooltipStyle({
   sourcePositionInfo,
   tooltipSize,
   tooltipPosition,
 }: GetMessageActionTooltipStyleParams): TooltipPositionStyle {
   if (tooltipPosition === tooltipPositions.RIGHT_TOP) {
     return {
       anchorPoint: {
         x: sourcePositionInfo.right,
         y: sourcePositionInfo.top,
       },
       horizontalPosition: 'right',
       verticalPosition: 'bottom',
       alignment: 'left',
     };
   } else if (tooltipPosition === tooltipPositions.LEFT_TOP) {
     return {
       anchorPoint: {
         x: sourcePositionInfo.left,
         y: sourcePositionInfo.top,
       },
       horizontalPosition: 'left',
       verticalPosition: 'bottom',
       alignment: 'right',
     };
   } else if (tooltipPosition === tooltipPositions.RIGHT_BOTTOM) {
     return {
       anchorPoint: {
         x: sourcePositionInfo.right,
         y: sourcePositionInfo.bottom,
       },
       horizontalPosition: 'right',
       verticalPosition: 'top',
       alignment: 'left',
     };
   } else if (tooltipPosition === tooltipPositions.LEFT_BOTTOM) {
     return {
       anchorPoint: {
         x: sourcePositionInfo.left,
         y: sourcePositionInfo.bottom,
       },
       horizontalPosition: 'left',
       verticalPosition: 'top',
       alignment: 'right',
     };
   } else if (tooltipPosition === tooltipPositions.LEFT) {
     return {
       anchorPoint: {
         x: sourcePositionInfo.left,
         y:
           sourcePositionInfo.top +
           sourcePositionInfo.height / 2 -
           tooltipSize.height / 2,
       },
       horizontalPosition: 'left',
       verticalPosition: 'bottom',
       alignment: 'right',
     };
   } else if (tooltipPosition === tooltipPositions.RIGHT) {
     return {
       anchorPoint: {
         x: sourcePositionInfo.right,
         y:
           sourcePositionInfo.top +
           sourcePositionInfo.height / 2 -
           tooltipSize.height / 2,
       },
       horizontalPosition: 'right',
       verticalPosition: 'bottom',
       alignment: 'left',
     };
   } else if (tooltipPosition === tooltipPositions.TOP) {
     return {
       anchorPoint: {
         x:
           sourcePositionInfo.left +
           sourcePositionInfo.width / 2 -
           tooltipSize.width / 2,
         y: sourcePositionInfo.top,
       },
       horizontalPosition: 'right',
       verticalPosition: 'top',
       alignment: 'center',
     };
   } else if (tooltipPosition === tooltipPositions.BOTTOM) {
     return {
       anchorPoint: {
         x:
           sourcePositionInfo.left +
           sourcePositionInfo.width / 2 -
           tooltipSize.width / 2,
         y: sourcePositionInfo.bottom,
       },
       horizontalPosition: 'right',
       verticalPosition: 'bottom',
       alignment: 'center',
     };
   }
   invariant(false, `Unexpected tooltip position value: ${tooltipPosition}`);
 }
 
 type CalculateTooltipSizeArgs = {
   +tooltipLabels: $ReadOnlyArray<string>,
   +timestamp: string,
 };
 
 function calculateTooltipSize({
   tooltipLabels,
   timestamp,
 }: CalculateTooltipSizeArgs): {
   +width: number,
   +height: number,
 } {
   const textWidth =
     calculateMaxTextWidth([...tooltipLabels, timestamp], font) +
     2 * tooltipLabelStyle.padding;
   const buttonsWidth =
     tooltipLabels.length *
     (tooltipButtonStyle.width +
       tooltipButtonStyle.paddingLeft +
       tooltipButtonStyle.paddingRight);
   const width =
     Math.max(textWidth, buttonsWidth) +
     tooltipStyle.paddingLeft +
     tooltipStyle.paddingRight;
   const height =
     (tooltipLabelStyle.height + 2 * tooltipLabelStyle.padding) * 2 +
     tooltipStyle.rowGap * 2 +
     tooltipButtonStyle.height;
   return {
     width,
     height,
   };
 }
 
 function useMessageTooltipSidebarAction(
   item: ChatMessageInfoItem,
   threadInfo: ThreadInfo,
 ): ?MessageTooltipAction {
   const { threadCreatedFromMessage, messageInfo } = item;
   const sidebarExists = !!threadCreatedFromMessage;
   const sidebarExistsOrCanBeCreated = useSidebarExistsOrCanBeCreated(
     threadInfo,
     item,
   );
   const openThread = useOnClickThread(threadCreatedFromMessage);
   const openPendingSidebar = useOnClickPendingSidebar(messageInfo, threadInfo);
   return React.useMemo(() => {
     if (!sidebarExistsOrCanBeCreated) {
       return null;
     }
     const buttonContent = <CommIcon icon="sidebar-filled" size={16} />;
     const onClick = (event: SyntheticEvent<HTMLElement>) => {
       if (threadCreatedFromMessage) {
         openThread(event);
       } else {
         openPendingSidebar(event);
       }
     };
     return {
       actionButtonContent: buttonContent,
       onClick,
       label: sidebarExists ? 'Go to thread' : 'Create thread',
     };
   }, [
     openPendingSidebar,
     openThread,
     sidebarExists,
     sidebarExistsOrCanBeCreated,
     threadCreatedFromMessage,
   ]);
 }
 
 function useMessageTooltipReplyAction(
   item: ChatMessageInfoItem,
   threadInfo: ThreadInfo,
 ): ?MessageTooltipAction {
   const { messageInfo } = item;
   const inputState = React.useContext(InputStateContext);
   invariant(inputState, 'inputState is required');
   const { addReply } = inputState;
   return React.useMemo(() => {
     if (
       !isComposableMessageType(item.messageInfo.type) ||
       !threadHasPermission(threadInfo, threadPermissions.VOICED)
     ) {
       return null;
     }
     const buttonContent = <CommIcon icon="reply-filled" size={18} />;
     const onClick = () => {
       if (!messageInfo.text) {
         return;
       }
       addReply(createMessageReply(messageInfo.text));
     };
     return {
       actionButtonContent: buttonContent,
       onClick,
       label: 'Reply',
     };
   }, [addReply, item.messageInfo.type, messageInfo, threadInfo]);
 }
 
 const copiedMessageDurationMs = 2000;
 function useMessageCopyAction(
   item: ChatMessageInfoItem,
 ): ?MessageTooltipAction {
   const { messageInfo } = item;
 
   const [successful, setSuccessful] = React.useState(false);
   const resetStatusAfterTimeout = React.useRef(
     _debounce(() => setSuccessful(false), copiedMessageDurationMs),
   );
 
   const onSuccess = React.useCallback(() => {
     setSuccessful(true);
     resetStatusAfterTimeout.current();
   }, []);
 
   React.useEffect(() => resetStatusAfterTimeout.current.cancel, []);
 
   return React.useMemo(() => {
     if (messageInfo.type !== messageTypes.TEXT) {
       return null;
     }
     const buttonContent = <CommIcon icon="copy-filled" size={18} />;
     const onClick = async () => {
       try {
         await navigator.clipboard.writeText(messageInfo.text);
         onSuccess();
       } catch (e) {
         setSuccessful(false);
       }
     };
     return {
       actionButtonContent: buttonContent,
       onClick,
       label: successful ? 'Copied!' : 'Copy',
     };
   }, [messageInfo.text, messageInfo.type, onSuccess, successful]);
 }
 
 function useMessageReactAction(
   item: ChatMessageInfoItem,
   threadInfo: ThreadInfo,
 ): ?MessageTooltipAction {
   const { messageInfo, reactions } = item;
 
   const nextLocalID = useSelector(state => state.nextLocalID);
   const localID = `${localIDPrefix}${nextLocalID}`;
 
   const reactionInput = '👍';
   const viewerReacted = !!reactions.get(reactionInput)?.viewerReacted;
   const action = viewerReacted ? 'remove_reaction' : 'add_reaction';
 
   const onClickReact = useOnClickReact(
     messageInfo.id,
     localID,
     threadInfo.id,
     reactionInput,
     action,
   );
 
   const canCreateReactionFromMessage = useCanCreateReactionFromMessage(
     threadInfo,
     messageInfo,
   );
 
   return React.useMemo(() => {
     if (!canCreateReactionFromMessage) {
       return null;
     }
 
     const buttonContent = (
       <MessageLikeTooltipButton viewerReacted={viewerReacted} />
     );
 
     return {
       actionButtonContent: buttonContent,
       onClick: onClickReact,
       label: viewerReacted ? 'Unlike' : 'Like',
     };
   }, [canCreateReactionFromMessage, onClickReact, viewerReacted]);
 }
 
 function useMessageTooltipActions(
   item: ChatMessageInfoItem,
   threadInfo: ThreadInfo,
 ): $ReadOnlyArray<MessageTooltipAction> {
   const sidebarAction = useMessageTooltipSidebarAction(item, threadInfo);
   const replyAction = useMessageTooltipReplyAction(item, threadInfo);
   const copyAction = useMessageCopyAction(item);
   const reactAction = useMessageReactAction(item, threadInfo);
   return React.useMemo(
     () => [replyAction, sidebarAction, copyAction, reactAction].filter(Boolean),
     [replyAction, sidebarAction, copyAction, reactAction],
   );
 }
 
 type UseMessageTooltipArgs = {
   +availablePositions: $ReadOnlyArray<TooltipPosition>,
   +item: ChatMessageInfoItem,
   +threadInfo: ThreadInfo,
 };
 
 type UseMessageTooltipResult = {
   onMouseEnter: (event: SyntheticEvent<HTMLElement>) => void,
   onMouseLeave: ?() => mixed,
 };
 
 type CreateTooltipParams = {
   +tooltipMessagePosition: ?PositionInfo,
   +tooltipSize: TooltipSize,
   +availablePositions: $ReadOnlyArray<TooltipPosition>,
-  +containsInlineSidebar: boolean,
+  +containsInlineEngagement: boolean,
   +tooltipActions: $ReadOnlyArray<MessageTooltipAction>,
   +messageTimestamp: string,
 };
 
 function createTooltip(params: CreateTooltipParams) {
   const {
     tooltipMessagePosition,
     tooltipSize,
     availablePositions,
-    containsInlineSidebar,
+    containsInlineEngagement,
     tooltipActions,
     messageTimestamp,
   } = params;
   if (!tooltipMessagePosition) {
     return;
   }
   const tooltipPosition = findTooltipPosition({
     sourcePositionInfo: tooltipMessagePosition,
     tooltipSize,
     availablePositions,
     defaultPosition: availablePositions[0],
-    preventDisplayingBelowSource: containsInlineSidebar,
+    preventDisplayingBelowSource: containsInlineEngagement,
   });
   if (!tooltipPosition) {
     return;
   }
 
   const tooltipPositionStyle = getMessageActionTooltipStyle({
     tooltipPosition,
     sourcePositionInfo: tooltipMessagePosition,
     tooltipSize,
   });
 
   const { alignment } = tooltipPositionStyle;
 
   const tooltip = (
     <MessageTooltip
       actions={tooltipActions}
       messageTimestamp={messageTimestamp}
       alignment={alignment}
     />
   );
   return { tooltip, tooltipPositionStyle };
 }
 
 function useMessageTooltip({
   availablePositions,
   item,
   threadInfo,
 }: UseMessageTooltipArgs): UseMessageTooltipResult {
   const [onMouseLeave, setOnMouseLeave] = React.useState<?() => mixed>(null);
 
   const { renderTooltip } = useTooltipContext();
   const tooltipActions = useMessageTooltipActions(item, threadInfo);
 
-  const containsInlineSidebar = !!item.threadCreatedFromMessage;
+  const containsInlineEngagement = !!item.threadCreatedFromMessage;
 
   const messageTimestamp = React.useMemo(() => {
     const time = item.messageInfo.time;
     return longAbsoluteDate(time);
   }, [item.messageInfo.time]);
 
   const tooltipSize = React.useMemo(() => {
     if (typeof document === 'undefined') {
       return {
         width: 0,
         height: 0,
       };
     }
     const tooltipLabels = tooltipActions.map(action => action.label);
     return calculateTooltipSize({
       tooltipLabels,
       timestamp: messageTimestamp,
     });
   }, [messageTimestamp, tooltipActions]);
 
   const updateTooltip = React.useRef();
   const [tooltipMessagePosition, setTooltipMessagePosition] = React.useState();
 
   const onMouseEnter = React.useCallback(
     (event: SyntheticEvent<HTMLElement>) => {
       if (!renderTooltip) {
         return;
       }
       const rect = event.currentTarget.getBoundingClientRect();
       const { top, bottom, left, right, height, width } = rect;
       const messagePosition = { top, bottom, left, right, height, width };
       setTooltipMessagePosition(messagePosition);
 
       const tooltipResult = createTooltip({
         tooltipMessagePosition,
         tooltipSize,
         availablePositions,
-        containsInlineSidebar,
+        containsInlineEngagement,
         tooltipActions,
         messageTimestamp,
       });
       if (!tooltipResult) {
         return;
       }
 
       const { tooltip, tooltipPositionStyle } = tooltipResult;
       const renderTooltipResult = renderTooltip({
         newNode: tooltip,
         tooltipPositionStyle,
       });
       if (renderTooltipResult) {
         const { onMouseLeaveCallback: callback } = renderTooltipResult;
         setOnMouseLeave((() => callback: () => () => mixed));
         updateTooltip.current = renderTooltipResult.updateTooltip;
       }
     },
     [
       availablePositions,
-      containsInlineSidebar,
+      containsInlineEngagement,
       messageTimestamp,
       renderTooltip,
       tooltipActions,
       tooltipMessagePosition,
       tooltipSize,
     ],
   );
 
   React.useEffect(() => {
     if (!updateTooltip.current) {
       return;
     }
 
     const tooltipResult = createTooltip({
       tooltipMessagePosition,
       tooltipSize,
       availablePositions,
-      containsInlineSidebar,
+      containsInlineEngagement,
       tooltipActions,
       messageTimestamp,
     });
     if (!tooltipResult) {
       return;
     }
 
     updateTooltip.current?.(tooltipResult.tooltip);
   }, [
     availablePositions,
-    containsInlineSidebar,
+    containsInlineEngagement,
     messageTimestamp,
     tooltipActions,
     tooltipMessagePosition,
     tooltipSize,
   ]);
 
   return {
     onMouseEnter,
     onMouseLeave,
   };
 }
 
 export {
   findTooltipPosition,
   calculateTooltipSize,
   getMessageActionTooltipStyle,
   useMessageTooltipSidebarAction,
   useMessageTooltipReplyAction,
   useMessageReactAction,
   useMessageTooltipActions,
   useMessageTooltip,
 };