diff --git a/native/chat/inline-engagement.react.js b/native/chat/inline-engagement.react.js
index 89773455f..dc4b3476f 100644
--- a/native/chat/inline-engagement.react.js
+++ b/native/chat/inline-engagement.react.js
@@ -1,563 +1,559 @@
 // @flow
 
 import { useNavigation } from '@react-navigation/native';
 import invariant from 'invariant';
 import * as React from 'react';
 import { Text, View } from 'react-native';
 import Animated, {
   Extrapolate,
   interpolateNode,
 } from 'react-native-reanimated';
 
 import type { ReactionInfo } from 'lib/selectors/chat-selectors.js';
 import { getInlineEngagementSidebarText } from 'lib/shared/inline-engagement-utils.js';
 import type { MessageInfo } from 'lib/types/message-types.js';
 import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 
 import {
   avatarOffset,
   composedMessageStyle,
   inlineEngagementCenterStyle,
   inlineEngagementLabelStyle,
   inlineEngagementRightStyle,
   inlineEngagementStyle,
 } from './chat-constants.js';
 import { useNavigateToThread } from './message-list-types.js';
 import { useSendReaction } from './reaction-message-utils.js';
 import CommIcon from '../components/comm-icon.react.js';
 import GestureTouchableOpacity from '../components/gesture-touchable-opacity.react.js';
 import { MessageReactionsModalRouteName } from '../navigation/route-names.js';
 import { useStyles } from '../themes/colors.js';
 import type { ChatMessageInfoItemWithHeight } from '../types/chat-types.js';
 
 function dummyNodeForInlineEngagementHeightMeasurement(
   sidebarInfo: ?ThreadInfo,
   reactions: ReactionInfo,
 ): React.Element<typeof View> {
   return (
     <View>
       <DummyInlineEngagementNode
         sidebarInfo={sidebarInfo}
         reactions={reactions}
       />
     </View>
   );
 }
 
 type DummyInlineEngagementNodeProps = {
   ...React.ElementConfig<typeof View>,
   +editedLabel?: ?string,
   +sidebarInfo: ?ThreadInfo,
   +reactions: ReactionInfo,
 };
 function DummyInlineEngagementNode(
   props: DummyInlineEngagementNodeProps,
 ): React.Node {
   const { editedLabel, sidebarInfo, reactions, ...rest } = props;
 
   const dummyEditedLabel = React.useMemo(() => {
     if (!editedLabel) {
       return null;
     }
 
     return (
       <View>
         <Text
           style={[unboundStyles.messageLabel, unboundStyles.dummyMessageLabel]}
         >
           {editedLabel}
         </Text>
       </View>
     );
   }, [editedLabel]);
 
   const dummySidebarItem = React.useMemo(() => {
     if (!sidebarInfo) {
       return null;
     }
 
     const repliesText = getInlineEngagementSidebarText(sidebarInfo);
     return (
       <View style={[unboundStyles.sidebar, unboundStyles.dummySidebar]}>
         <Text style={unboundStyles.repliesText}>{repliesText}</Text>
       </View>
     );
   }, [sidebarInfo]);
 
   const dummyReactionsList = React.useMemo(() => {
     if (Object.keys(reactions).length === 0) {
       return null;
     }
 
     return Object.keys(reactions).map(reaction => {
       const numOfReacts = reactions[reaction].users.length;
       return (
         <View
           key={reaction}
           style={[
             unboundStyles.reactionsContainer,
             unboundStyles.dummyReactionContainer,
           ]}
         >
           <Text
             style={unboundStyles.reaction}
           >{`${reaction} ${numOfReacts}`}</Text>
         </View>
       );
     });
   }, [reactions]);
 
   const dummyContainerStyle = React.useMemo(
     () => [unboundStyles.inlineEngagement, unboundStyles.dummyInlineEngagement],
     [],
   );
 
   if (!dummyEditedLabel && !dummySidebarItem && !dummyReactionsList) {
     return null;
   }
 
   return (
     <View {...rest} style={dummyContainerStyle}>
       {dummyEditedLabel}
       {dummySidebarItem}
       {dummyReactionsList}
     </View>
   );
 }
 
 type Props = {
   +messageInfo: MessageInfo,
   +threadInfo: ThreadInfo,
   +sidebarThreadInfo: ?ThreadInfo,
   +reactions: ReactionInfo,
   +disabled?: boolean,
   +positioning?: 'left' | 'right' | 'center',
   +label?: ?string,
 };
 function InlineEngagement(props: Props): React.Node {
   const {
     messageInfo,
     threadInfo,
     sidebarThreadInfo,
     reactions,
     disabled = false,
     positioning,
     label,
   } = props;
 
   const isLeft = positioning === 'left';
   const isRight = positioning === 'right';
   const isCenter = positioning === 'center';
 
   const navigateToThread = useNavigateToThread();
   const { navigate } = useNavigation();
 
   const styles = useStyles(unboundStyles);
 
   const editedLabelStyle = React.useMemo(() => {
     const stylesResult = [styles.messageLabel, styles.messageLabelColor];
     if (isLeft) {
       stylesResult.push(styles.messageLabelLeft);
     } else {
       stylesResult.push(styles.messageLabelRight);
     }
 
     return stylesResult;
   }, [
     isLeft,
     styles.messageLabel,
     styles.messageLabelColor,
     styles.messageLabelLeft,
     styles.messageLabelRight,
   ]);
 
   const editedLabel = React.useMemo(() => {
     if (!label) {
       return null;
     }
 
     return (
       <View>
         <Text style={editedLabelStyle}>{label}</Text>
       </View>
     );
   }, [editedLabelStyle, label]);
 
   const unreadStyle = sidebarThreadInfo?.currentUser.unread
     ? styles.unread
     : null;
   const repliesStyles = React.useMemo(
     () => [styles.repliesText, styles.repliesTextColor, unreadStyle],
     [styles.repliesText, styles.repliesTextColor, unreadStyle],
   );
 
   const onPressSidebar = React.useCallback(() => {
     if (sidebarThreadInfo && !disabled) {
       navigateToThread({ threadInfo: sidebarThreadInfo });
     }
   }, [disabled, navigateToThread, sidebarThreadInfo]);
 
   const repliesText = getInlineEngagementSidebarText(sidebarThreadInfo);
 
   const sidebarStyle = React.useMemo(() => {
     const stylesResult = [styles.sidebar, styles.sidebarColor];
 
     if (Object.keys(reactions).length === 0) {
       return stylesResult;
     }
 
     if (isRight) {
       stylesResult.push(styles.sidebarMarginLeft);
     } else {
       stylesResult.push(styles.sidebarMarginRight);
     }
 
     return stylesResult;
   }, [
     isRight,
     reactions,
     styles.sidebar,
     styles.sidebarColor,
     styles.sidebarMarginLeft,
     styles.sidebarMarginRight,
   ]);
 
   const sidebarItem = React.useMemo(() => {
     if (!sidebarThreadInfo) {
       return null;
     }
     return (
       <GestureTouchableOpacity
         onPress={onPressSidebar}
         activeOpacity={0.7}
         style={sidebarStyle}
       >
         <CommIcon style={styles.icon} size={14} name="sidebar-filled" />
         <Text style={repliesStyles}>{repliesText}</Text>
       </GestureTouchableOpacity>
     );
   }, [
     sidebarThreadInfo,
     onPressSidebar,
     sidebarStyle,
     styles.icon,
     repliesStyles,
     repliesText,
   ]);
 
-  const sendReaction = useSendReaction(
-    messageInfo.id,
-    threadInfo.id,
-    reactions,
-  );
+  const sendReaction = useSendReaction(messageInfo.id, threadInfo, reactions);
 
   const onPressReaction = React.useCallback(
     (reaction: string) => sendReaction(reaction),
     [sendReaction],
   );
 
   const onLongPressReaction = React.useCallback(() => {
     navigate<'MessageReactionsModal'>({
       name: MessageReactionsModalRouteName,
       params: { reactions },
     });
   }, [navigate, reactions]);
 
   const reactionStyle = React.useMemo(() => {
     const stylesResult = [
       styles.reactionsContainer,
       styles.reactionsContainerColor,
     ];
 
     if (isRight) {
       stylesResult.push(styles.reactionsContainerMarginLeft);
     } else {
       stylesResult.push(styles.reactionsContainerMarginRight);
     }
 
     return stylesResult;
   }, [
     isRight,
     styles.reactionsContainer,
     styles.reactionsContainerColor,
     styles.reactionsContainerMarginLeft,
     styles.reactionsContainerMarginRight,
   ]);
 
   const reactionList = React.useMemo(() => {
     if (Object.keys(reactions).length === 0) {
       return null;
     }
 
     return Object.keys(reactions).map(reaction => {
       const reactionInfo = reactions[reaction];
       const numOfReacts = reactionInfo.users.length;
 
       const style = reactionInfo.viewerReacted
         ? [...reactionStyle, styles.reactionsContainerSelected]
         : reactionStyle;
 
       return (
         <GestureTouchableOpacity
           style={style}
           onPress={() => onPressReaction(reaction)}
           onLongPress={onLongPressReaction}
           activeOpacity={0.7}
           key={reaction}
         >
           <Text
             style={[styles.reaction, styles.reactionColor]}
           >{`${reaction} ${numOfReacts}`}</Text>
         </GestureTouchableOpacity>
       );
     });
   }, [
     onLongPressReaction,
     onPressReaction,
     reactionStyle,
     reactions,
     styles.reaction,
     styles.reactionColor,
     styles.reactionsContainerSelected,
   ]);
 
   const inlineEngagementPositionStyle = React.useMemo(() => {
     const styleResult = [styles.inlineEngagement];
     if (isRight) {
       styleResult.push(styles.rightInlineEngagement);
     } else if (isCenter) {
       styleResult.push(styles.centerInlineEngagement);
     }
     return styleResult;
   }, [
     isCenter,
     isRight,
     styles.centerInlineEngagement,
     styles.inlineEngagement,
     styles.rightInlineEngagement,
   ]);
 
   return (
     <View style={inlineEngagementPositionStyle}>
       {editedLabel}
       {sidebarItem}
       {reactionList}
     </View>
   );
 }
 
 const unboundStyles = {
   inlineEngagement: {
     flexDirection: 'row',
     marginBottom: inlineEngagementStyle.marginBottom,
     marginLeft: avatarOffset,
     flexWrap: 'wrap',
     top: inlineEngagementStyle.topOffset,
   },
   dummyInlineEngagement: {
     marginRight: 8,
   },
   centerInlineEngagement: {
     marginLeft: 20,
     marginRight: 20,
     justifyContent: 'center',
   },
   rightInlineEngagement: {
     flexDirection: 'row-reverse',
     marginLeft: inlineEngagementRightStyle.marginLeft,
   },
   sidebar: {
     flexDirection: 'row',
     alignItems: 'center',
     paddingHorizontal: 8,
     paddingVertical: 4,
     borderRadius: 8,
     marginTop: inlineEngagementStyle.marginTop,
   },
   dummySidebar: {
     paddingRight: 8,
     // 14 (icon) + 4 (marginRight of icon) + 8 (original left padding)
     paddingLeft: 26,
     marginRight: 4,
   },
   sidebarColor: {
     backgroundColor: 'inlineEngagementBackground',
   },
   sidebarMarginLeft: {
     marginLeft: 4,
   },
   sidebarMarginRight: {
     marginRight: 4,
   },
   icon: {
     color: 'inlineEngagementLabel',
     marginRight: 4,
   },
   repliesText: {
     fontSize: 14,
     lineHeight: 22,
   },
   repliesTextColor: {
     color: 'inlineEngagementLabel',
   },
   unread: {
     color: 'listForegroundLabel',
     fontWeight: 'bold',
   },
   reactionsContainer: {
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
     paddingHorizontal: 8,
     paddingVertical: 4,
     borderRadius: 8,
     marginTop: inlineEngagementStyle.marginTop,
   },
   dummyReactionContainer: {
     marginRight: 4,
   },
   reactionsContainerColor: {
     backgroundColor: 'inlineEngagementBackground',
   },
   reactionsContainerSelected: {
     borderWidth: 1,
     borderColor: 'inlineEngagementLabel',
     paddingHorizontal: 7,
     paddingVertical: 3,
   },
   reactionsContainerMarginLeft: {
     marginLeft: 4,
   },
   reactionsContainerMarginRight: {
     marginRight: 4,
   },
   reaction: {
     fontSize: 14,
     lineHeight: 22,
   },
   reactionColor: {
     color: 'inlineEngagementLabel',
   },
   messageLabel: {
     paddingHorizontal: 3,
     fontSize: 13,
     top: inlineEngagementLabelStyle.topOffset,
     height: inlineEngagementLabelStyle.height,
     marginTop: inlineEngagementStyle.marginTop,
   },
   dummyMessageLabel: {
     marginLeft: 9,
     marginRight: 4,
   },
   messageLabelColor: {
     color: 'messageLabel',
   },
   messageLabelLeft: {
     marginLeft: 9,
     marginRight: 4,
   },
   messageLabelRight: {
     marginRight: 10,
     marginLeft: 4,
   },
   avatarOffset: {
     width: avatarOffset,
   },
 };
 
 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 TooltipInlineEngagement(
   props: TooltipInlineEngagementProps,
 ): React.Node {
   const {
     item,
     isOpeningSidebar,
     progress,
     windowWidth,
     initialCoordinates,
     positioning,
   } = props;
   // ESLint doesn't recognize that invariant always throws
   // eslint-disable-next-line consistent-return
   const inlineEngagementStyles = React.useMemo(() => {
     if (positioning === 'left') {
       return {
         position: 'absolute',
         top: inlineEngagementStyle.marginTop + inlineEngagementStyle.topOffset,
         left: composedMessageStyle.marginLeft,
       };
     } else if (positioning === 'right') {
       return {
         position: 'absolute',
         right:
           inlineEngagementRightStyle.marginLeft +
           composedMessageStyle.marginRight,
         top: inlineEngagementStyle.marginTop + inlineEngagementStyle.topOffset,
       };
     } else if (positioning === 'center') {
       return {
         alignSelf: 'center',
         top: inlineEngagementCenterStyle.topOffset,
       };
     }
     invariant(
       false,
       `${positioning} is not a valid positioning value for InlineEngagement`,
     );
   }, [positioning]);
   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={inlineEngagementContainer}>
       <Animated.View style={inlineEngagementStyles}>
         <InlineEngagement
           messageInfo={item.messageInfo}
           threadInfo={item.threadInfo}
           sidebarThreadInfo={item.threadCreatedFromMessage}
           reactions={item.reactions}
           disabled
         />
       </Animated.View>
     </Animated.View>
   );
 }
 
 export {
   InlineEngagement,
   TooltipInlineEngagement,
   DummyInlineEngagementNode,
   dummyNodeForInlineEngagementHeightMeasurement,
 };
diff --git a/native/chat/multimedia-message-tooltip-button.react.js b/native/chat/multimedia-message-tooltip-button.react.js
index 2d92f3a2f..7a01afc96 100644
--- a/native/chat/multimedia-message-tooltip-button.react.js
+++ b/native/chat/multimedia-message-tooltip-button.react.js
@@ -1,182 +1,178 @@
 // @flow
 
 import * as React from 'react';
 import Animated from 'react-native-reanimated';
 
 import {
   useViewerAlreadySelectedMessageReactions,
   useCanCreateReactionFromMessage,
 } from 'lib/shared/reaction-utils.js';
 
 import { TooltipInlineEngagement } from './inline-engagement.react.js';
 import { InnerMultimediaMessage } from './inner-multimedia-message.react.js';
 import { MessageHeader } from './message-header.react.js';
 import MessageTooltipButtonAvatar from './message-tooltip-button-avatar.react.js';
 import { useSendReaction } from './reaction-message-utils.js';
 import ReactionSelectionPopover from './reaction-selection-popover.react.js';
 import SidebarInputBarHeightMeasurer from './sidebar-input-bar-height-measurer.react.js';
 import { useAnimatedMessageTooltipButton } from './utils.js';
 import EmojiKeyboard from '../components/emoji-keyboard.react.js';
 import type { EmojiSelection } from '../components/emoji-keyboard.react.js';
 import type { AppNavigationProp } from '../navigation/app-navigator.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { useTooltipActions } from '../tooltip/tooltip-hooks.js';
 import type { TooltipRoute } from '../tooltip/tooltip.react.js';
 
 const { Node, Extrapolate, interpolateNode } = Animated;
 
 function noop() {}
 
 type Props = {
   +navigation: AppNavigationProp<'MultimediaMessageTooltipModal'>,
   +route: TooltipRoute<'MultimediaMessageTooltipModal'>,
   +progress: Node,
   +isOpeningSidebar: boolean,
 };
 function MultimediaMessageTooltipButton(props: Props): React.Node {
   const { navigation, route, progress, isOpeningSidebar } = 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 } = 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 inlineEngagement = React.useMemo(() => {
     if (!item.threadCreatedFromMessage) {
       return null;
     }
     return (
       <TooltipInlineEngagement
         item={item}
         positioning={item.messageInfo.creator.isViewer ? 'right' : 'left'}
         isOpeningSidebar={isOpeningSidebar}
         progress={progress}
         windowWidth={windowWidth}
         initialCoordinates={initialCoordinates}
       />
     );
   }, [initialCoordinates, isOpeningSidebar, item, progress, windowWidth]);
 
   const innerMultimediaMessage = React.useMemo(
     () => (
       <InnerMultimediaMessage
         item={item}
         verticalBounds={verticalBounds}
         clickable={false}
         setClickable={noop}
         onPress={navigation.goBackOnce}
         onLongPress={navigation.goBackOnce}
       />
     ),
     [item, navigation.goBackOnce, verticalBounds],
   );
 
   const { messageInfo, threadInfo, reactions } = item;
 
   const canCreateReactionFromMessage = useCanCreateReactionFromMessage(
     threadInfo,
     messageInfo,
   );
 
-  const sendReaction = useSendReaction(
-    messageInfo.id,
-    threadInfo.id,
-    reactions,
-  );
+  const sendReaction = useSendReaction(messageInfo.id, threadInfo, reactions);
 
   const [emojiPickerOpen, setEmojiPickerOpen] = React.useState<boolean>(false);
   const openEmojiPicker = React.useCallback(() => {
     setEmojiPickerOpen(true);
   }, []);
 
   const reactionSelectionPopover = React.useMemo(() => {
     if (!canCreateReactionFromMessage) {
       return null;
     }
 
     return (
       <ReactionSelectionPopover
         navigation={navigation}
         route={route}
         openEmojiPicker={openEmojiPicker}
         sendReaction={sendReaction}
       />
     );
   }, [
     navigation,
     route,
     openEmojiPicker,
     canCreateReactionFromMessage,
     sendReaction,
   ]);
 
   const tooltipRouteKey = route.key;
   const { dismissTooltip } = useTooltipActions(navigation, tooltipRouteKey);
 
   const onEmojiSelected = React.useCallback(
     (emoji: EmojiSelection) => {
       sendReaction(emoji.emoji);
       dismissTooltip();
     },
     [sendReaction, dismissTooltip],
   );
 
   const alreadySelectedEmojis =
     useViewerAlreadySelectedMessageReactions(reactions);
 
   return (
     <>
       <Animated.View style={messageContainerStyle}>
         <SidebarInputBarHeightMeasurer
           sourceMessage={item}
           onInputBarMeasured={onInputBarMeasured}
         />
         <Animated.View style={headerStyle}>
           <MessageHeader item={item} focused={true} display="modal" />
         </Animated.View>
         <MessageTooltipButtonAvatar item={item} />
         {reactionSelectionPopover}
         {innerMultimediaMessage}
         {inlineEngagement}
       </Animated.View>
       <EmojiKeyboard
         onEmojiSelected={onEmojiSelected}
         emojiKeyboardOpen={emojiPickerOpen}
         onEmojiKeyboardClose={dismissTooltip}
         alreadySelectedEmojis={alreadySelectedEmojis}
         selectMultipleEmojis
       />
     </>
   );
 }
 
 export default MultimediaMessageTooltipButton;
diff --git a/native/chat/reaction-message-utils.js b/native/chat/reaction-message-utils.js
index 290edd32f..80e2cefa5 100644
--- a/native/chat/reaction-message-utils.js
+++ b/native/chat/reaction-message-utils.js
@@ -1,208 +1,211 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 
 import {
   useSendReactionMessage,
   sendReactionMessageActionTypes,
 } from 'lib/actions/message-actions.js';
 import type { ReactionInfo } from 'lib/selectors/chat-selectors.js';
 import { getNextLocalID } from 'lib/shared/message-utils.js';
 import { messageTypes } from 'lib/types/message-types-enum.js';
 import type { RawReactionMessageInfo } from 'lib/types/messages/reaction.js';
+import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types';
 import { cloneError } from 'lib/utils/errors.js';
 import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
 
 import { useSelector } from '../redux/redux-utils.js';
 import type {
   LayoutCoordinates,
   VerticalBounds,
 } from '../types/layout-types.js';
 import Alert from '../utils/alert.js';
 
 function useSendReaction(
   messageID: ?string,
-  threadID: string,
+  threadInfo: ThreadInfo,
   reactions: ReactionInfo,
 ): (reaction: string) => mixed {
   const viewerID = useSelector(
     state => state.currentUserInfo && state.currentUserInfo.id,
   );
 
   const callSendReactionMessage = useSendReactionMessage();
   const dispatchActionPromise = useDispatchActionPromise();
 
   return React.useCallback(
     reaction => {
       if (!messageID) {
         return;
       }
 
       const localID = getNextLocalID();
 
       invariant(viewerID, 'viewerID should be set');
 
       const viewerReacted = reactions[reaction]
         ? reactions[reaction].viewerReacted
         : false;
       const action = viewerReacted ? 'remove_reaction' : 'add_reaction';
 
+      const threadID = threadInfo.id;
+
       const reactionMessagePromise = (async () => {
         try {
           const result = await callSendReactionMessage({
             threadID,
             localID,
             targetMessageID: messageID,
             reaction,
             action,
           });
           return {
             localID,
             serverID: result.id,
             threadID,
             time: result.time,
             interface: result.interface,
           };
         } catch (e) {
           Alert.alert(
             'Couldn’t send the reaction',
             'Please try again later',
             [{ text: 'OK' }],
             {
               cancelable: true,
             },
           );
 
           const copy = cloneError(e);
           copy.localID = localID;
           copy.threadID = threadID;
           throw copy;
         }
       })();
 
       const startingPayload: RawReactionMessageInfo = {
         type: messageTypes.REACTION,
         threadID,
         localID,
         creatorID: viewerID,
         time: Date.now(),
         targetMessageID: messageID,
         reaction,
         action,
       };
 
       void dispatchActionPromise(
         sendReactionMessageActionTypes,
         reactionMessagePromise,
         undefined,
         startingPayload,
       );
     },
     [
       messageID,
       viewerID,
       reactions,
-      threadID,
+      threadInfo.id,
       dispatchActionPromise,
       callSendReactionMessage,
     ],
   );
 }
 
 type ReactionSelectionPopoverPositionArgs = {
   +initialCoordinates: LayoutCoordinates,
   +verticalBounds: VerticalBounds,
   +margin: ?number,
 };
 
 type WritableContainerStyle = {
   position: 'absolute',
   left?: number,
   right?: number,
   bottom?: number,
   top?: number,
   ...
 };
 type ContainerStyle = $ReadOnly<WritableContainerStyle>;
 
 type ReactionSelectionPopoverPosition = {
   +containerStyle: ContainerStyle,
   +popoverLocation: 'above' | 'below',
 };
 function useReactionSelectionPopoverPosition({
   initialCoordinates,
   verticalBounds,
   margin,
 }: ReactionSelectionPopoverPositionArgs): ReactionSelectionPopoverPosition {
   const calculatedMargin = getCalculatedMargin(margin);
 
   const windowWidth = useSelector(state => state.dimensions.width);
 
   const popoverLocation: 'above' | 'below' = (() => {
     const { y, height } = initialCoordinates;
     const contentTop = y;
     const contentBottom = y + height;
     const boundsTop = verticalBounds.y;
     const boundsBottom = verticalBounds.y + verticalBounds.height;
 
     const fullHeight =
       reactionSelectionPopoverDimensions.height + calculatedMargin;
 
     if (
       contentBottom + fullHeight > boundsBottom &&
       contentTop - fullHeight > boundsTop
     ) {
       return 'above';
     }
 
     return 'below';
   })();
 
   const containerStyle = React.useMemo(() => {
     const { x, width, height } = initialCoordinates;
 
     const style: WritableContainerStyle = {
       position: 'absolute',
     };
 
     const extraLeftSpace = x;
     const extraRightSpace = windowWidth - width - x;
     if (extraLeftSpace < extraRightSpace) {
       style.left = 0;
     } else {
       style.right = 0;
     }
 
     if (popoverLocation === 'above') {
       style.bottom = height + calculatedMargin / 2;
     } else {
       style.top = height + calculatedMargin / 2;
     }
 
     return style;
   }, [calculatedMargin, initialCoordinates, popoverLocation, windowWidth]);
   return React.useMemo(
     () => ({
       popoverLocation,
       containerStyle,
     }),
     [popoverLocation, containerStyle],
   );
 }
 
 function getCalculatedMargin(margin: ?number): number {
   return margin ?? 16;
 }
 
 const reactionSelectionPopoverDimensions = {
   height: 56,
   width: 316,
 };
 
 export {
   useSendReaction,
   useReactionSelectionPopoverPosition,
   getCalculatedMargin,
   reactionSelectionPopoverDimensions,
 };
diff --git a/native/chat/robotext-message-tooltip-button.react.js b/native/chat/robotext-message-tooltip-button.react.js
index c140d60a1..1f8eef97b 100644
--- a/native/chat/robotext-message-tooltip-button.react.js
+++ b/native/chat/robotext-message-tooltip-button.react.js
@@ -1,164 +1,160 @@
 // @flow
 
 import * as React from 'react';
 import Animated from 'react-native-reanimated';
 
 import {
   useViewerAlreadySelectedMessageReactions,
   useCanCreateReactionFromMessage,
 } from 'lib/shared/reaction-utils.js';
 
 import { TooltipInlineEngagement } from './inline-engagement.react.js';
 import { InnerRobotextMessage } from './inner-robotext-message.react.js';
 import { useSendReaction } from './reaction-message-utils.js';
 import ReactionSelectionPopover from './reaction-selection-popover.react.js';
 import SidebarInputBarHeightMeasurer from './sidebar-input-bar-height-measurer.react.js';
 import { Timestamp } from './timestamp.react.js';
 import { useAnimatedMessageTooltipButton } from './utils.js';
 import EmojiKeyboard from '../components/emoji-keyboard.react.js';
 import type { EmojiSelection } from '../components/emoji-keyboard.react.js';
 import type { AppNavigationProp } from '../navigation/app-navigator.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { useTooltipActions } from '../tooltip/tooltip-hooks.js';
 import type { TooltipRoute } from '../tooltip/tooltip.react.js';
 
 const { Node, interpolateNode, Extrapolate } = Animated;
 
 type Props = {
   +navigation: AppNavigationProp<'RobotextMessageTooltipModal'>,
   +route: TooltipRoute<'RobotextMessageTooltipModal'>,
   +progress: Node,
   +isOpeningSidebar: boolean,
 };
 function RobotextMessageTooltipButton(props: Props): React.Node {
   const { navigation, route, progress, isOpeningSidebar } = 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 } = 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 inlineEngagement = React.useMemo(() => {
     if (!item.threadCreatedFromMessage) {
       return null;
     }
     return (
       <TooltipInlineEngagement
         item={item}
         positioning="center"
         isOpeningSidebar={isOpeningSidebar}
         progress={progress}
         windowWidth={windowWidth}
         initialCoordinates={initialCoordinates}
       />
     );
   }, [initialCoordinates, isOpeningSidebar, item, progress, windowWidth]);
 
   const { messageInfo, threadInfo, reactions } = item;
 
   const canCreateReactionFromMessage = useCanCreateReactionFromMessage(
     threadInfo,
     messageInfo,
   );
 
-  const sendReaction = useSendReaction(
-    messageInfo.id,
-    threadInfo.id,
-    reactions,
-  );
+  const sendReaction = useSendReaction(messageInfo.id, threadInfo, reactions);
 
   const [emojiPickerOpen, setEmojiPickerOpen] = React.useState<boolean>(false);
   const openEmojiPicker = React.useCallback(() => {
     setEmojiPickerOpen(true);
   }, []);
 
   const reactionSelectionPopover = React.useMemo(() => {
     if (!canCreateReactionFromMessage) {
       return null;
     }
 
     return (
       <ReactionSelectionPopover
         navigation={navigation}
         route={route}
         openEmojiPicker={openEmojiPicker}
         sendReaction={sendReaction}
       />
     );
   }, [
     navigation,
     route,
     openEmojiPicker,
     canCreateReactionFromMessage,
     sendReaction,
   ]);
 
   const tooltipRouteKey = route.key;
   const { dismissTooltip } = useTooltipActions(navigation, tooltipRouteKey);
 
   const onEmojiSelected = React.useCallback(
     (emoji: EmojiSelection) => {
       sendReaction(emoji.emoji);
       dismissTooltip();
     },
     [sendReaction, dismissTooltip],
   );
 
   const alreadySelectedEmojis =
     useViewerAlreadySelectedMessageReactions(reactions);
 
   return (
     <>
       <Animated.View style={messageContainerStyle}>
         <SidebarInputBarHeightMeasurer
           sourceMessage={item}
           onInputBarMeasured={onInputBarMeasured}
         />
         <Animated.View style={headerStyle}>
           <Timestamp time={item.messageInfo.time} display="modal" />
         </Animated.View>
         {reactionSelectionPopover}
         <InnerRobotextMessage item={item} onPress={navigation.goBackOnce} />
         {inlineEngagement}
       </Animated.View>
       <EmojiKeyboard
         onEmojiSelected={onEmojiSelected}
         emojiKeyboardOpen={emojiPickerOpen}
         onEmojiKeyboardClose={dismissTooltip}
         alreadySelectedEmojis={alreadySelectedEmojis}
         selectMultipleEmojis
       />
     </>
   );
 }
 
 export default RobotextMessageTooltipButton;
diff --git a/native/chat/text-message-tooltip-button.react.js b/native/chat/text-message-tooltip-button.react.js
index 6b328401c..302c2babd 100644
--- a/native/chat/text-message-tooltip-button.react.js
+++ b/native/chat/text-message-tooltip-button.react.js
@@ -1,188 +1,184 @@
 // @flow
 
 import * as React from 'react';
 import Animated from 'react-native-reanimated';
 
 import {
   useViewerAlreadySelectedMessageReactions,
   useCanCreateReactionFromMessage,
 } from 'lib/shared/reaction-utils.js';
 
 import { TooltipInlineEngagement } from './inline-engagement.react.js';
 import { InnerTextMessage } from './inner-text-message.react.js';
 import { MessageHeader } from './message-header.react.js';
 import { MessageListContextProvider } from './message-list-types.js';
 import { MessagePressResponderContext } from './message-press-responder-context.js';
 import MessageTooltipButtonAvatar from './message-tooltip-button-avatar.react.js';
 import { useSendReaction } from './reaction-message-utils.js';
 import ReactionSelectionPopover from './reaction-selection-popover.react.js';
 import SidebarInputBarHeightMeasurer from './sidebar-input-bar-height-measurer.react.js';
 import { useAnimatedMessageTooltipButton } from './utils.js';
 import EmojiKeyboard from '../components/emoji-keyboard.react.js';
 import type { EmojiSelection } from '../components/emoji-keyboard.react.js';
 import type { AppNavigationProp } from '../navigation/app-navigator.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { useTooltipActions } from '../tooltip/tooltip-hooks.js';
 import type { TooltipRoute } from '../tooltip/tooltip.react.js';
 
 const { Node, interpolateNode, Extrapolate } = Animated;
 
 type Props = {
   +navigation: AppNavigationProp<'TextMessageTooltipModal'>,
   +route: TooltipRoute<'TextMessageTooltipModal'>,
   +progress: Node,
   +isOpeningSidebar: boolean,
 };
 function TextMessageTooltipButton(props: Props): React.Node {
   const { navigation, route, progress, isOpeningSidebar } = 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 } = 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 messagePressResponderContext = React.useMemo(
     () => ({
       onPressMessage: navigation.goBackOnce,
     }),
     [navigation.goBackOnce],
   );
 
   const inlineEngagement = React.useMemo(() => {
     if (!item.threadCreatedFromMessage) {
       return null;
     }
     return (
       <TooltipInlineEngagement
         item={item}
         positioning={item.messageInfo.creator.isViewer ? 'right' : 'left'}
         isOpeningSidebar={isOpeningSidebar}
         progress={progress}
         windowWidth={windowWidth}
         initialCoordinates={initialCoordinates}
       />
     );
   }, [initialCoordinates, isOpeningSidebar, item, progress, windowWidth]);
 
   const { messageInfo, threadInfo, reactions } = item;
 
   const canCreateReactionFromMessage = useCanCreateReactionFromMessage(
     threadInfo,
     messageInfo,
   );
 
-  const sendReaction = useSendReaction(
-    messageInfo.id,
-    threadInfo.id,
-    reactions,
-  );
+  const sendReaction = useSendReaction(messageInfo.id, threadInfo, reactions);
 
   const [emojiPickerOpen, setEmojiPickerOpen] = React.useState<boolean>(false);
   const openEmojiPicker = React.useCallback(() => {
     setEmojiPickerOpen(true);
   }, []);
 
   const reactionSelectionPopover = React.useMemo(() => {
     if (!canCreateReactionFromMessage) {
       return null;
     }
 
     return (
       <ReactionSelectionPopover
         navigation={navigation}
         route={route}
         openEmojiPicker={openEmojiPicker}
         sendReaction={sendReaction}
       />
     );
   }, [
     navigation,
     route,
     openEmojiPicker,
     canCreateReactionFromMessage,
     sendReaction,
   ]);
 
   const tooltipRouteKey = route.key;
   const { dismissTooltip } = useTooltipActions(navigation, tooltipRouteKey);
 
   const onEmojiSelected = React.useCallback(
     (emoji: EmojiSelection) => {
       sendReaction(emoji.emoji);
       dismissTooltip();
     },
     [sendReaction, dismissTooltip],
   );
 
   const alreadySelectedEmojis =
     useViewerAlreadySelectedMessageReactions(reactions);
 
   return (
     <MessageListContextProvider threadInfo={threadInfo}>
       <SidebarInputBarHeightMeasurer
         sourceMessage={item}
         onInputBarMeasured={onInputBarMeasured}
       />
       <Animated.View style={messageContainerStyle}>
         <Animated.View style={headerStyle}>
           <MessageHeader item={item} focused={true} display="modal" />
         </Animated.View>
         <MessageTooltipButtonAvatar item={item} />
         {reactionSelectionPopover}
         <MessagePressResponderContext.Provider
           value={messagePressResponderContext}
         >
           <InnerTextMessage
             item={item}
             onPress={navigation.goBackOnce}
             threadColorOverride={threadColorOverride}
             isThreadColorDarkOverride={isThreadColorDarkOverride}
           />
         </MessagePressResponderContext.Provider>
         {inlineEngagement}
       </Animated.View>
       <EmojiKeyboard
         onEmojiSelected={onEmojiSelected}
         emojiKeyboardOpen={emojiPickerOpen}
         onEmojiKeyboardClose={dismissTooltip}
         alreadySelectedEmojis={alreadySelectedEmojis}
         selectMultipleEmojis
       />
     </MessageListContextProvider>
   );
 }
 
 export default TextMessageTooltipButton;
diff --git a/web/chat/inline-engagement.react.js b/web/chat/inline-engagement.react.js
index 6beee1da7..af28513ac 100644
--- a/web/chat/inline-engagement.react.js
+++ b/web/chat/inline-engagement.react.js
@@ -1,114 +1,114 @@
 // @flow
 
 import classNames from 'classnames';
 import * as React from 'react';
 
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import type { ReactionInfo } from 'lib/selectors/chat-selectors.js';
 import { getInlineEngagementSidebarText } from 'lib/shared/inline-engagement-utils.js';
 import type { MessageInfo } from 'lib/types/message-types.js';
 import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 
 import css from './inline-engagement.css';
 import ReactionPill from './reaction-pill.react.js';
 import CommIcon from '../comm-icon.react.js';
 import { useOnClickThread } from '../selectors/thread-selectors.js';
 
 type Props = {
   +messageInfo: MessageInfo,
   +threadInfo: ThreadInfo,
   +sidebarThreadInfo: ?ThreadInfo,
   +reactions: ReactionInfo,
   +positioning: 'left' | 'center' | 'right',
   +label?: ?string,
 };
 function InlineEngagement(props: Props): React.Node {
   const {
     messageInfo,
     threadInfo,
     sidebarThreadInfo,
     reactions,
     positioning,
     label,
   } = props;
 
   const { popModal } = useModalContext();
 
   const isLeft = positioning === 'left';
 
   const labelClasses = classNames({
     [css.messageLabel]: true,
     [css.messageLabelLeft]: isLeft,
     [css.messageLabelRight]: !isLeft,
   });
   const editedLabel = React.useMemo(() => {
     if (!label) {
       return null;
     }
     return (
       <div className={labelClasses}>
         <span>{label}</span>
       </div>
     );
   }, [label, labelClasses]);
 
   const onClickSidebarInner = useOnClickThread(sidebarThreadInfo);
 
   const onClickSidebar = React.useCallback(
     (event: SyntheticEvent<HTMLElement>) => {
       popModal();
       onClickSidebarInner(event);
     },
     [popModal, onClickSidebarInner],
   );
 
   const repliesText = getInlineEngagementSidebarText(sidebarThreadInfo);
 
   const sidebarItem = React.useMemo(() => {
     if (!sidebarThreadInfo || !repliesText) {
       return null;
     }
 
     return (
       <a onClick={onClickSidebar} className={css.sidebarContainer}>
         <CommIcon size={14} icon="sidebar-filled" />
         {repliesText}
       </a>
     );
   }, [sidebarThreadInfo, repliesText, onClickSidebar]);
 
   const reactionsList = React.useMemo(() => {
     if (Object.keys(reactions).length === 0) {
       return null;
     }
 
     return Object.keys(reactions).map(reaction => (
       <ReactionPill
         key={reaction}
         reaction={reaction}
         messageID={messageInfo.id}
-        threadID={threadInfo.id}
+        threadInfo={threadInfo}
         reactions={reactions}
       />
     ));
-  }, [reactions, messageInfo.id, threadInfo.id]);
+  }, [reactions, messageInfo.id, threadInfo]);
 
   const containerClasses = classNames([
     css.inlineEngagementContainer,
     {
       [css.leftContainer]: positioning === 'left',
       [css.centerContainer]: positioning === 'center',
       [css.rightContainer]: positioning === 'right',
     },
   ]);
 
   return (
     <div className={containerClasses}>
       {editedLabel}
       {sidebarItem}
       {reactionsList}
     </div>
   );
 }
 
 export default InlineEngagement;
diff --git a/web/chat/reaction-message-utils.js b/web/chat/reaction-message-utils.js
index 2311accf2..4124838c1 100644
--- a/web/chat/reaction-message-utils.js
+++ b/web/chat/reaction-message-utils.js
@@ -1,220 +1,223 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 
 import {
   useSendReactionMessage,
   sendReactionMessageActionTypes,
 } from 'lib/actions/message-actions.js';
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import type { CallSingleKeyserverEndpointResultInfoInterface } from 'lib/keyserver-conn/call-single-keyserver-endpoint.js';
 import type { ReactionInfo } from 'lib/selectors/chat-selectors';
 import { getNextLocalID } from 'lib/shared/message-utils.js';
 import { messageTypes } from 'lib/types/message-types-enum.js';
 import type { RawReactionMessageInfo } from 'lib/types/messages/reaction.js';
+import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 import { cloneError } from 'lib/utils/errors.js';
 import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
 
 import Alert from '../modals/alert.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 import {
   type TooltipSize,
   type TooltipPositionStyle,
 } from '../tooltips/tooltip-utils.js';
 import { getAppContainerPositionInfo } from '../utils/window-utils.js';
 
 function useSendReaction(
   messageID: ?string,
-  threadID: string,
+  threadInfo: ThreadInfo,
   reactions: ReactionInfo,
 ): (reaction: string) => mixed {
   const { pushModal } = useModalContext();
 
   const viewerID = useSelector(
     state => state.currentUserInfo && state.currentUserInfo.id,
   );
 
   const callSendReactionMessage = useSendReactionMessage();
   const dispatchActionPromise = useDispatchActionPromise();
 
   return React.useCallback(
     reaction => {
       if (!messageID) {
         return;
       }
 
       const localID = getNextLocalID();
 
       invariant(viewerID, 'viewerID should be set');
 
       const viewerReacted = reactions[reaction]
         ? reactions[reaction].viewerReacted
         : false;
       const action = viewerReacted ? 'remove_reaction' : 'add_reaction';
 
+      const threadID = threadInfo.id;
+
       const reactionMessagePromise = (async () => {
         try {
           const result = await callSendReactionMessage({
             threadID,
             localID,
             targetMessageID: messageID,
             reaction,
             action,
           });
           const serverID: string = result.id;
           const time: number = result.time;
           const interfaceInfo: CallSingleKeyserverEndpointResultInfoInterface =
             result.interface;
           return {
             localID,
             serverID,
             threadID,
             time,
             interface: interfaceInfo,
           };
         } catch (e) {
           pushModal(
             <Alert title="Couldn’t send the reaction">
               Please try again later
             </Alert>,
           );
 
           const copy = cloneError(e);
           copy.localID = localID;
           copy.threadID = threadID;
           throw copy;
         }
       })();
 
       const startingPayload: RawReactionMessageInfo = {
         type: messageTypes.REACTION,
         threadID,
         localID,
         creatorID: viewerID,
         time: Date.now(),
         targetMessageID: messageID,
         reaction,
         action,
       };
 
       void dispatchActionPromise(
         sendReactionMessageActionTypes,
         reactionMessagePromise,
         undefined,
         startingPayload,
       );
     },
     [
       messageID,
       viewerID,
       reactions,
-      threadID,
+      threadInfo.id,
       dispatchActionPromise,
       callSendReactionMessage,
       pushModal,
     ],
   );
 }
 
 type EmojiKeyboardPosition = {
   +bottom: number,
   +left: number,
 };
 
 function getEmojiKeyboardPosition(
   emojiKeyboard: ?HTMLDivElement,
   tooltipPositionStyle: TooltipPositionStyle,
   tooltipSize: TooltipSize,
 ): ?EmojiKeyboardPosition {
   const { alignment, anchorPoint } = tooltipPositionStyle;
   const tooltipAnchorX = anchorPoint.x;
   const tooltipAnchorY = anchorPoint.y;
 
   const tooltipWidth = tooltipSize.width;
   const tooltipHeight = tooltipSize.height;
 
   const appContainerPositionInfo = getAppContainerPositionInfo();
 
   if (!appContainerPositionInfo) {
     return null;
   }
 
   let emojiKeyboardWidth = 352;
   let emojiKeyboardHeight = 435;
 
   if (emojiKeyboard) {
     const { width, height } = emojiKeyboard.getBoundingClientRect();
     emojiKeyboardWidth = width;
     emojiKeyboardHeight = height;
   }
 
   const {
     top: containerTop,
     left: containerLeft,
     right: containerRight,
     bottom: containerBottom,
   } = appContainerPositionInfo;
 
   const padding = 16;
 
   const canBeDisplayedOnRight =
     tooltipAnchorX + tooltipWidth + emojiKeyboardWidth <= containerRight;
 
   const canBeDisplayedOnLeft =
     tooltipAnchorX - emojiKeyboardWidth >= containerLeft;
 
   const canBeDisplayedOnTop =
     tooltipAnchorY - emojiKeyboardHeight - padding >= containerTop;
 
   const canBeDisplayedOnBottom =
     tooltipAnchorY + tooltipHeight + emojiKeyboardHeight + padding <=
     containerBottom;
 
   const emojiKeyboardOverflowTop =
     containerTop - (tooltipAnchorY + tooltipHeight - emojiKeyboardHeight);
 
   const emojiKeyboardOverflowTopCorrection =
     emojiKeyboardOverflowTop > 0 ? -emojiKeyboardOverflowTop - padding : 0;
 
   const emojiKeyboardOverflowRight =
     tooltipAnchorX + emojiKeyboardWidth - containerRight;
 
   const emojiKeyboardOverflowRightCorrection =
     emojiKeyboardOverflowRight > 0 ? -emojiKeyboardOverflowRight - padding : 0;
 
   if (alignment === 'left' && canBeDisplayedOnRight) {
     return {
       left: tooltipWidth,
       bottom: emojiKeyboardOverflowTopCorrection,
     };
   }
 
   if (alignment === 'right' && canBeDisplayedOnLeft) {
     return {
       left: -emojiKeyboardWidth,
       bottom: emojiKeyboardOverflowTopCorrection,
     };
   }
 
   if (canBeDisplayedOnTop) {
     return {
       bottom: tooltipHeight + padding,
       left: emojiKeyboardOverflowRightCorrection,
     };
   }
 
   if (canBeDisplayedOnBottom) {
     return {
       bottom: -emojiKeyboardHeight - padding,
       left: emojiKeyboardOverflowRightCorrection,
     };
   }
 
   return {
     left: alignment === 'left' ? -emojiKeyboardWidth : tooltipWidth,
     bottom: emojiKeyboardOverflowTopCorrection,
   };
 }
 
 export { useSendReaction, getEmojiKeyboardPosition };
diff --git a/web/chat/reaction-pill.react.js b/web/chat/reaction-pill.react.js
index 0081d23c4..22ab5372b 100644
--- a/web/chat/reaction-pill.react.js
+++ b/web/chat/reaction-pill.react.js
@@ -1,65 +1,66 @@
 // @flow
 
 import classNames from 'classnames';
 import * as React from 'react';
 
 import type { ReactionInfo } from 'lib/selectors/chat-selectors.js';
+import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 
 import { useSendReaction } from './reaction-message-utils.js';
 import css from './reaction-pill.css';
 import { useReactionTooltip } from '../tooltips/tooltip-action-utils.js';
 import { tooltipPositions } from '../tooltips/tooltip-utils.js';
 
 const availableReactionTooltipPositions = [
   tooltipPositions.TOP,
   tooltipPositions.BOTTOM,
 ];
 
 type Props = {
   +reaction: string,
   +messageID: ?string,
-  +threadID: string,
+  +threadInfo: ThreadInfo,
   +reactions: ReactionInfo,
 };
 
 function ReactionPill(props: Props): React.Node {
-  const { reaction, messageID, threadID, reactions } = props;
+  const { reaction, messageID, threadInfo, reactions } = props;
 
-  const sendReaction = useSendReaction(messageID, threadID, reactions);
+  const sendReaction = useSendReaction(messageID, threadInfo, reactions);
 
   const onClickReaction = React.useCallback(
     (event: SyntheticEvent<HTMLElement>) => {
       event.preventDefault();
       sendReaction(reaction);
     },
     [reaction, sendReaction],
   );
 
   const { onMouseEnter, onMouseLeave } = useReactionTooltip({
     reaction,
     reactions,
     availablePositions: availableReactionTooltipPositions,
   });
 
   const reactionInfo = reactions[reaction];
   const numOfReacts = reactionInfo.users.length;
 
   const reactionClassName = classNames({
     [css.reactionContainer]: true,
     [css.reactionContainerSelected]: reactionInfo.viewerReacted,
   });
 
   return (
     <a
       onClick={onClickReaction}
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
       className={reactionClassName}
       key={reaction}
     >
       {`${reaction} ${numOfReacts}`}
     </a>
   );
 }
 
 export default ReactionPill;
diff --git a/web/tooltips/message-tooltip.react.js b/web/tooltips/message-tooltip.react.js
index e35cb3636..3f7a1219f 100644
--- a/web/tooltips/message-tooltip.react.js
+++ b/web/tooltips/message-tooltip.react.js
@@ -1,228 +1,224 @@
 // @flow
 
 import data from '@emoji-mart/data';
 import Picker from '@emoji-mart/react';
 import classNames from 'classnames';
 import * as React from 'react';
 
 import type { ChatMessageInfoItem } from 'lib/selectors/chat-selectors.js';
 import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 
 import css from './message-tooltip.css';
 import {
   tooltipButtonStyle,
   tooltipLabelStyle,
   tooltipStyle,
 } from './tooltip-constants.js';
 import { useTooltipContext } from './tooltip-provider.js';
 import type {
   MessageTooltipAction,
   TooltipPositionStyle,
   TooltipSize,
 } from './tooltip-utils.js';
 import {
   getEmojiKeyboardPosition,
   useSendReaction,
 } from '../chat/reaction-message-utils.js';
 
 type MessageTooltipProps = {
   +actions: $ReadOnlyArray<MessageTooltipAction>,
   +messageTimestamp: string,
   +tooltipPositionStyle: TooltipPositionStyle,
   +tooltipSize: TooltipSize,
   +item: ChatMessageInfoItem,
   +threadInfo: ThreadInfo,
 };
 function MessageTooltip(props: MessageTooltipProps): React.Node {
   const {
     actions,
     messageTimestamp,
     tooltipPositionStyle,
     tooltipSize,
     item,
     threadInfo,
   } = props;
   const { messageInfo, reactions } = item;
 
   const { alignment = 'left' } = tooltipPositionStyle;
 
   const [activeTooltipLabel, setActiveTooltipLabel] = React.useState<?string>();
 
   const { shouldRenderEmojiKeyboard } = useTooltipContext();
 
   // emoji-mart actually doesn't render its contents until a useEffect runs:
   // https://github.com/missive/emoji-mart/blob/d29728f7b4e295e46f9b64aa80335aa4a3c15b8e/packages/emoji-mart-react/react.tsx#L13-L19
   // We need to measure the width/height of the picker, but because of this we
   // need to do the measurement in our own useEffect, in order to guarantee it
   // runs after emoji-mart's useEffect. To do this, we have to define two pieces
   // of React state:
   // - emojiKeyboardNode, which will get set by the emoji keyboard's ref and
   //   will trigger our useEffect
   // - emojiKeyboardRenderedNode, which will get set in that useEffect and will
   //   trigger the rerendering of this component with the correct height/width
 
   const [emojiKeyboardNode, setEmojiKeyboardNode] =
     React.useState<?HTMLDivElement>(null);
   const [emojiKeyboardRenderedNode, setEmojiKeyboardRenderedNode] =
     React.useState<?HTMLDivElement>(null);
 
   React.useEffect(() => {
     if (emojiKeyboardNode) {
       // It would be more simple to just call getEmojiKeyboardPosition
       // immediately here, but some quirk of emoji-mart causes the width of the
       // node to be 0 here. If instead we wait until the next render of this
       // component to check the width, it ends up being set correctly.
       setEmojiKeyboardRenderedNode(emojiKeyboardNode);
     }
   }, [emojiKeyboardNode]);
 
   const messageActionButtonsContainerClassName = classNames(
     css.messageActionContainer,
     css.messageActionButtons,
   );
 
   const messageTooltipButtonStyle = React.useMemo(() => tooltipButtonStyle, []);
 
   const tooltipButtons = React.useMemo(() => {
     if (!actions || actions.length === 0) {
       return null;
     }
     const buttons = actions.map(({ label, onClick, actionButtonContent }) => {
       const onMouseEnter = () => {
         setActiveTooltipLabel(label);
       };
       const onMouseLeave = () =>
         setActiveTooltipLabel(oldLabel =>
           label === oldLabel ? null : oldLabel,
         );
 
       return (
         <div
           onMouseEnter={onMouseEnter}
           onMouseLeave={onMouseLeave}
           key={label}
           onClick={onClick}
           style={messageTooltipButtonStyle}
           className={css.messageTooltipButton}
         >
           {actionButtonContent}
         </div>
       );
     });
     return (
       <div className={messageActionButtonsContainerClassName}>{buttons}</div>
     );
   }, [
     actions,
     messageActionButtonsContainerClassName,
     messageTooltipButtonStyle,
   ]);
 
   const messageTooltipLabelStyle = React.useMemo(() => tooltipLabelStyle, []);
   const messageTooltipTopLabelStyle = React.useMemo(
     () => ({
       height: `${tooltipLabelStyle.height + 2 * tooltipLabelStyle.padding}px`,
     }),
     [],
   );
 
   const tooltipLabel = React.useMemo(() => {
     if (!activeTooltipLabel) {
       return null;
     }
     return (
       <div className={css.messageTooltipLabel} style={messageTooltipLabelStyle}>
         {activeTooltipLabel}
       </div>
     );
   }, [activeTooltipLabel, messageTooltipLabelStyle]);
 
   const tooltipTimestamp = React.useMemo(() => {
     if (!messageTimestamp) {
       return null;
     }
     return (
       <div className={css.messageTooltipLabel} style={messageTooltipLabelStyle}>
         {messageTimestamp}
       </div>
     );
   }, [messageTimestamp, messageTooltipLabelStyle]);
 
   const emojiKeyboardPosition = React.useMemo(
     () =>
       getEmojiKeyboardPosition(
         emojiKeyboardRenderedNode,
         tooltipPositionStyle,
         tooltipSize,
       ),
     [emojiKeyboardRenderedNode, tooltipPositionStyle, tooltipSize],
   );
 
   const emojiKeyboardPositionStyle = React.useMemo(() => {
     if (!emojiKeyboardPosition) {
       return null;
     }
 
     return {
       bottom: emojiKeyboardPosition.bottom,
       left: emojiKeyboardPosition.left,
     };
   }, [emojiKeyboardPosition]);
 
-  const sendReaction = useSendReaction(
-    messageInfo.id,
-    threadInfo.id,
-    reactions,
-  );
+  const sendReaction = useSendReaction(messageInfo.id, threadInfo, reactions);
 
   const onEmojiSelect = React.useCallback(
     (emoji: { +native: string, ... }) => {
       const reactionInput = emoji.native;
       sendReaction(reactionInput);
     },
     [sendReaction],
   );
 
   const emojiKeyboard = React.useMemo(() => {
     if (!shouldRenderEmojiKeyboard) {
       return null;
     }
 
     return (
       <div
         ref={setEmojiKeyboardNode}
         style={emojiKeyboardPositionStyle}
         className={css.emojiKeyboard}
       >
         <Picker
           data={data}
           onEmojiSelect={onEmojiSelect}
           theme="dark"
           autoFocus={true}
         />
       </div>
     );
   }, [emojiKeyboardPositionStyle, onEmojiSelect, shouldRenderEmojiKeyboard]);
 
   const messageTooltipContainerStyle = React.useMemo(() => tooltipStyle, []);
 
   const containerClassName = classNames({
     [css.messageTooltipContainer]: true,
     [css.leftTooltipAlign]: alignment === 'left',
     [css.centerTooltipAlign]: alignment === 'center',
     [css.rightTooltipAlign]: alignment === 'right',
   });
 
   return (
     <>
       {emojiKeyboard}
       <div className={containerClassName} style={messageTooltipContainerStyle}>
         <div style={messageTooltipTopLabelStyle}>{tooltipLabel}</div>
         {tooltipButtons}
         {tooltipTimestamp}
       </div>
     </>
   );
 }
 
 export default MessageTooltip;