diff --git a/web/chat/composed-message.react.js b/web/chat/composed-message.react.js
--- a/web/chat/composed-message.react.js
+++ b/web/chat/composed-message.react.js
@@ -141,6 +141,8 @@
       inlineEngagement = (
         <div className={css.sidebarMarginBottom}>
           <InlineEngagement
+            messageInfo={item.messageInfo}
+            threadInfo={threadInfo}
             sidebarThreadInfo={item.threadCreatedFromMessage}
             reactions={item.reactions}
             positioning={positioning}
diff --git a/web/chat/inline-engagement.react.js b/web/chat/inline-engagement.react.js
--- a/web/chat/inline-engagement.react.js
+++ b/web/chat/inline-engagement.react.js
@@ -6,22 +6,34 @@
 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 { useNextLocalID } from 'lib/shared/message-utils.js';
+import type { MessageInfo } from 'lib/types/message-types.js';
 import type { ThreadInfo } from 'lib/types/thread-types.js';
 
 import css from './inline-engagement.css';
+import { useSendReaction } from './reaction-message-utils.js';
 import CommIcon from '../CommIcon.react.js';
-import MessageReactionsModal from '../modals/chat/message-reactions-modal.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 { sidebarThreadInfo, reactions, positioning, label } = props;
-  const { pushModal, popModal } = useModalContext();
+  const {
+    messageInfo,
+    threadInfo,
+    sidebarThreadInfo,
+    reactions,
+    positioning,
+    label,
+  } = props;
+
+  const { popModal } = useModalContext();
 
   const isLeft = positioning === 'left';
 
@@ -66,14 +78,20 @@
     );
   }, [sidebarThreadInfo, repliesText, onClickSidebar]);
 
+  const localID = useNextLocalID();
+  const sendReaction = useSendReaction(
+    messageInfo.id,
+    localID,
+    threadInfo.id,
+    reactions,
+  );
+
   const onClickReaction = React.useCallback(
-    (event: SyntheticEvent<HTMLElement>) => {
+    (event: SyntheticEvent<HTMLElement>, reaction: string) => {
       event.preventDefault();
-      pushModal(
-        <MessageReactionsModal onClose={popModal} reactions={reactions} />,
-      );
+      sendReaction(reaction);
     },
-    [popModal, pushModal, reactions],
+    [sendReaction],
   );
 
   const reactionsList = React.useMemo(() => {
@@ -86,7 +104,7 @@
 
       return (
         <a
-          onClick={onClickReaction}
+          onClick={event => onClickReaction(event, reaction)}
           className={css.reactionContainer}
           key={reaction}
         >
diff --git a/web/chat/robotext-message.react.js b/web/chat/robotext-message.react.js
--- a/web/chat/robotext-message.react.js
+++ b/web/chat/robotext-message.react.js
@@ -37,12 +37,14 @@
 };
 function RobotextMessage(props: Props): React.Node {
   let inlineEngagement;
-  const { item } = props;
+  const { item, threadInfo } = props;
   const { threadCreatedFromMessage, reactions } = item;
   if (threadCreatedFromMessage || Object.keys(reactions).length > 0) {
     inlineEngagement = (
       <div className={css.sidebarMarginTop}>
         <InlineEngagement
+          messageInfo={item.messageInfo}
+          threadInfo={threadInfo}
           sidebarThreadInfo={threadCreatedFromMessage}
           reactions={reactions}
           positioning="center"
@@ -71,7 +73,6 @@
     });
   }, [robotextWithENSNames, threadID]);
 
-  const { threadInfo } = props;
   const { onMouseEnter, onMouseLeave } = useMessageTooltip({
     item,
     threadInfo,