diff --git a/web/chat/composed-message.react.js b/web/chat/composed-message.react.js
index 40fb5ffab..28991eb5f 100644
--- a/web/chat/composed-message.react.js
+++ b/web/chat/composed-message.react.js
@@ -1,261 +1,260 @@
 // @flow
 
 import classNames from 'classnames';
 import invariant from 'invariant';
 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 { useSidebarExistsOrCanBeCreated } from 'lib/shared/thread-utils';
 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 css from './chat-message-list.css';
 import FailedSend from './failed-send.react';
 import { InlineSidebar } from './inline-sidebar.react';
 import MessageActionButton from './message-action-button';
 import MessageReplyButton from './message-reply-button.react';
 import {
   type OnMessagePositionWithContainerInfo,
   type MessagePositionInfo,
 } from './position-types';
 import { tooltipPositions } from './tooltip-utils';
 
 const availableTooltipPositionsForViewerMessage = [
   tooltipPositions.TOP_RIGHT,
   tooltipPositions.LEFT,
 ];
 const availableTooltipPositionsForNonViewerMessage = [
   tooltipPositions.TOP_LEFT,
   tooltipPositions.RIGHT,
 ];
 
 type BaseProps = {|
   +item: ChatMessageInfoItem,
   +threadInfo: ThreadInfo,
   +sendFailed: boolean,
   +setMouseOverMessagePosition: (
     messagePositionInfo: MessagePositionInfo,
   ) => void,
   +mouseOverMessagePosition?: ?OnMessagePositionWithContainerInfo,
   +canReply: boolean,
   +children: React.Node,
   +fixedWidth?: boolean,
   +borderRadius: number,
 |};
 type BaseConfig = React.Config<BaseProps, typeof ComposedMessage.defaultProps>;
 type Props = {|
   ...BaseProps,
   // Redux state
   +sidebarExistsOrCanBeCreated: boolean,
   // withInputState
   +inputState: ?InputState,
 |};
 class ComposedMessage extends React.PureComponent<Props> {
   static defaultProps = {
     borderRadius: 8,
   };
 
   render() {
     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.viewerMessageBoxContainer]: isViewer,
       [css.nonViewerMessageBoxContainer]: !isViewer,
       [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 replyButton;
     if (
       this.props.mouseOverMessagePosition &&
       this.props.mouseOverMessagePosition.item.messageInfo.id === id &&
       this.props.canReply
     ) {
       const { inputState } = this.props;
       invariant(inputState, 'inputState should be set in ComposedMessage');
       replyButton = (
         <MessageReplyButton
           messagePositionInfo={this.props.mouseOverMessagePosition}
           onReplyClick={this.onMouseLeave}
           inputState={inputState}
         />
       );
     }
 
     let messageActionButton;
     if (
       this.props.mouseOverMessagePosition &&
       this.props.mouseOverMessagePosition.item.messageInfo.id === id &&
       this.props.sidebarExistsOrCanBeCreated
     ) {
       const availableTooltipPositions = isViewer
         ? availableTooltipPositionsForViewerMessage
         : availableTooltipPositionsForNonViewerMessage;
 
       messageActionButton = (
         <MessageActionButton
           threadInfo={threadInfo}
           item={item}
-          onLeave={this.onMouseLeave}
           containerPosition={
             this.props.mouseOverMessagePosition.containerPosition
           }
           availableTooltipPositions={availableTooltipPositions}
         />
       );
     }
 
     let viewerActionLinks, nonViewerActionLinks;
     if (isViewer && (replyButton || messageActionButton)) {
       viewerActionLinks = (
         <div
           className={classNames(
             css.messageActionLinks,
             css.viewerMessageActionLinks,
           )}
         >
           {messageActionButton}
           {replyButton}
         </div>
       );
     } else if (replyButton || messageActionButton) {
       nonViewerActionLinks = (
         <div
           className={classNames(
             css.messageActionLinks,
             css.nonViewerMessageActionLinks,
           )}
         >
           {replyButton}
           {messageActionButton}
         </div>
       );
     }
 
     let inlineSidebar = null;
     if (item.threadCreatedFromMessage) {
       const positioning = isViewer ? 'right' : 'left';
       inlineSidebar = (
         <div className={css.sidebarMarginBottom}>
           <InlineSidebar
             threadInfo={item.threadCreatedFromMessage}
             positioning={positioning}
           />
         </div>
       );
     }
 
     return (
       <React.Fragment>
         {authorName}
         <div className={contentClassName}>
           <div
             className={messageBoxContainerClassName}
             onMouseEnter={this.onMouseEnter}
             onMouseLeave={this.onMouseLeave}
           >
             {viewerActionLinks}
             <div className={messageBoxClassName} style={messageBoxStyle}>
               {this.props.children}
             </div>
             {nonViewerActionLinks}
           </div>
           {deliveryIcon}
         </div>
         {failedSendInfo}
         {inlineSidebar}
       </React.Fragment>
     );
   }
 
   onMouseEnter = (event: SyntheticEvent<HTMLDivElement>) => {
     const { item } = this.props;
     const rect = event.currentTarget.getBoundingClientRect();
     const { top, bottom, left, right, height, width } = rect;
     const messagePosition = { top, bottom, left, right, height, width };
     this.props.setMouseOverMessagePosition({
       type: 'on',
       item,
       messagePosition,
     });
   };
 
   onMouseLeave = () => {
     const { item } = this.props;
     this.props.setMouseOverMessagePosition({ type: 'off', item });
   };
 }
 
 export default React.memo<BaseConfig>(function ConnectedComposedMessage(
   props: BaseConfig,
 ) {
   const sidebarExistsOrCanBeCreated = useSidebarExistsOrCanBeCreated(
     props.threadInfo,
     props.item,
   );
   const inputState = React.useContext(InputStateContext);
   return (
     <ComposedMessage
       {...props}
       sidebarExistsOrCanBeCreated={sidebarExistsOrCanBeCreated}
       inputState={inputState}
     />
   );
 });
diff --git a/web/chat/message-action-button.js b/web/chat/message-action-button.js
index 170fcc40b..c427e028b 100644
--- a/web/chat/message-action-button.js
+++ b/web/chat/message-action-button.js
@@ -1,247 +1,169 @@
 // @flow
 
 import { faEllipsisH } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classNames from 'classnames';
 import invariant from 'invariant';
 import * as React from 'react';
 
 import type { ChatMessageInfoItem } from 'lib/selectors/chat-selectors';
-import {
-  type ComposableMessageInfo,
-  type RobotextMessageInfo,
-} from 'lib/types/message-types';
 import type { ThreadInfo } from 'lib/types/thread-types';
 
 import {
   useOnClickThread,
   useOnClickPendingSidebar,
 } from '../selectors/nav-selectors';
 import css from './chat-message-list.css';
 import type {
   ItemAndContainerPositionInfo,
   PositionInfo,
 } from './position-types';
 import { tooltipPositions, type TooltipPosition } from './tooltip-utils';
 import { TooltipMenu, type TooltipStyle, TooltipButton } from './tooltip.react';
 
 const ellipsisIconExcessVerticalWhitespace = 10;
 
-type Props = {|
-  +onLeave: () => void,
-  +onButtonClick: (event: SyntheticEvent<HTMLButtonElement>) => void,
-  +buttonText: string,
+const openSidebarText = 'Go to sidebar';
+const createSidebarText = 'Create sidebar';
+
+type MessageActionTooltipProps = {|
+  +threadInfo: ThreadInfo,
+  +item: ChatMessageInfoItem,
   +containerPosition: PositionInfo,
   +availableTooltipPositions: $ReadOnlyArray<TooltipPosition>,
 |};
-function MessageActionMenu(props: Props) {
+function MessageActionButton(props: MessageActionTooltipProps) {
   const {
-    onLeave,
-    onButtonClick,
-    buttonText,
+    threadInfo,
+    item,
     containerPosition,
     availableTooltipPositions,
   } = props;
   const [tooltipVisible, setTooltipVisible] = React.useState(false);
   const [pointingTo, setPointingTo] = React.useState();
 
   const toggleTooltip = React.useCallback(
     (event: SyntheticEvent<HTMLDivElement>) => {
       setTooltipVisible(!tooltipVisible);
       if (tooltipVisible) {
         return;
       }
       const rect = event.currentTarget.getBoundingClientRect();
       const { top, bottom, left, right, width, height } = rect;
 
       const dotsPosition: ItemAndContainerPositionInfo = {
         containerPosition,
         itemPosition: {
           top:
             top - containerPosition.top + ellipsisIconExcessVerticalWhitespace,
           bottom:
             bottom -
             containerPosition.top -
             ellipsisIconExcessVerticalWhitespace,
           left: left - containerPosition.left,
           right: right - containerPosition.left,
           width,
           height: height - ellipsisIconExcessVerticalWhitespace * 2,
         },
       };
       setPointingTo(dotsPosition);
     },
     [containerPosition, tooltipVisible],
   );
 
-  const onTooltipButtonClick = React.useCallback(
+  const hideTooltip = React.useCallback(() => {
+    setTooltipVisible(false);
+  }, []);
+
+  const { threadCreatedFromMessage, messageInfo } = item;
+
+  const onThreadOpen = useOnClickThread(threadCreatedFromMessage?.id);
+  const onPendingSidebarOpen = useOnClickPendingSidebar(
+    messageInfo,
+    threadInfo,
+  );
+  const onSidebarButtonClick = React.useCallback(
     (event: SyntheticEvent<HTMLButtonElement>) => {
-      onButtonClick(event);
-      onLeave();
+      if (threadCreatedFromMessage) {
+        onThreadOpen(event);
+      } else {
+        onPendingSidebarOpen(event);
+      }
     },
-    [onLeave, onButtonClick],
+    [onPendingSidebarOpen, onThreadOpen, threadCreatedFromMessage],
   );
 
-  const hideTooltip = React.useCallback(() => {
-    setTooltipVisible(false);
-  }, []);
+  const sidebarTooltipButtonText = threadCreatedFromMessage
+    ? openSidebarText
+    : createSidebarText;
 
   let tooltipMenu = null;
   if (pointingTo && tooltipVisible) {
     tooltipMenu = (
       <TooltipMenu
         availableTooltipPositions={availableTooltipPositions}
         targetPositionInfo={pointingTo}
         layoutPosition="relative"
         getStyle={getMessageActionTooltipStyle}
       >
-        <TooltipButton text={buttonText} onClick={onTooltipButtonClick} />
+        <TooltipButton
+          text={sidebarTooltipButtonText}
+          onClick={onSidebarButtonClick}
+        />
       </TooltipMenu>
     );
   }
 
   return (
     <div className={css.messageActionButton}>
       <div
         className={css.messageActionLinkIcon}
         onMouseLeave={hideTooltip}
         onClick={toggleTooltip}
       >
         <FontAwesomeIcon icon={faEllipsisH} />
         {tooltipMenu}
       </div>
     </div>
   );
 }
 
-const openSidebarText = 'Go to sidebar';
-type OpenSidebarProps = {|
-  +threadCreatedFromMessage: ThreadInfo,
-  +onLeave: () => void,
-  +containerPosition: PositionInfo,
-  +availableTooltipPositions: $ReadOnlyArray<TooltipPosition>,
-|};
-function OpenSidebar(props: OpenSidebarProps) {
-  const {
-    threadCreatedFromMessage,
-    onLeave,
-    containerPosition,
-    availableTooltipPositions,
-  } = props;
-  const onButtonClick = useOnClickThread(threadCreatedFromMessage.id);
-
-  return (
-    <MessageActionMenu
-      onButtonClick={onButtonClick}
-      onLeave={onLeave}
-      buttonText={openSidebarText}
-      containerPosition={containerPosition}
-      availableTooltipPositions={availableTooltipPositions}
-    />
-  );
-}
-
-const createSidebarText = 'Create sidebar';
-type CreateSidebarProps = {|
-  +threadInfo: ThreadInfo,
-  +messageInfo: ComposableMessageInfo | RobotextMessageInfo,
-  +onLeave: () => void,
-  +containerPosition: PositionInfo,
-  +availableTooltipPositions: $ReadOnlyArray<TooltipPosition>,
-|};
-function CreateSidebar(props: CreateSidebarProps) {
-  const {
-    threadInfo,
-    messageInfo,
-    containerPosition,
-    availableTooltipPositions,
-  } = props;
-  const onButtonClick = useOnClickPendingSidebar(messageInfo, threadInfo);
-
-  return (
-    <MessageActionMenu
-      onButtonClick={onButtonClick}
-      onLeave={props.onLeave}
-      buttonText={createSidebarText}
-      containerPosition={containerPosition}
-      availableTooltipPositions={availableTooltipPositions}
-    />
-  );
-}
-
-type MessageActionTooltipProps = {|
-  +threadInfo: ThreadInfo,
-  +item: ChatMessageInfoItem,
-  +onLeave: () => void,
-  +containerPosition: PositionInfo,
-  +availableTooltipPositions: $ReadOnlyArray<TooltipPosition>,
-|};
-function MessageActionButton(props: MessageActionTooltipProps) {
-  const {
-    threadInfo,
-    item,
-    onLeave,
-    containerPosition,
-    availableTooltipPositions,
-  } = props;
-  if (item.threadCreatedFromMessage) {
-    return (
-      <OpenSidebar
-        threadCreatedFromMessage={item.threadCreatedFromMessage}
-        onLeave={onLeave}
-        containerPosition={containerPosition}
-        availableTooltipPositions={availableTooltipPositions}
-      />
-    );
-  } else {
-    return (
-      <CreateSidebar
-        threadInfo={threadInfo}
-        messageInfo={item.messageInfo}
-        onLeave={onLeave}
-        containerPosition={containerPosition}
-        availableTooltipPositions={availableTooltipPositions}
-      />
-    );
-  }
-}
-
 function getMessageActionTooltipStyle(
   tooltipPosition: TooltipPosition,
 ): TooltipStyle {
   let className;
   if (tooltipPosition === tooltipPositions.TOP_RIGHT) {
     className = classNames(
       css.messageActionTopRightTooltip,
       css.messageTopRightTooltip,
       css.messageActionExtraAreaTop,
       css.messageActionExtraAreaTopRight,
     );
   } else if (tooltipPosition === tooltipPositions.TOP_LEFT) {
     className = classNames(
       css.messageActionTopLeftTooltip,
       css.messageTopLeftTooltip,
       css.messageActionExtraAreaTop,
       css.messageActionExtraAreaTopLeft,
     );
   } else if (tooltipPosition === tooltipPositions.RIGHT) {
     className = classNames(
       css.messageActionRightTooltip,
       css.messageRightTooltip,
       css.messageActionExtraArea,
       css.messageActionExtraAreaRight,
     );
   } else if (tooltipPosition === tooltipPositions.LEFT) {
     className = classNames(
       css.messageActionLeftTooltip,
       css.messageLeftTooltip,
       css.messageActionExtraArea,
       css.messageActionExtraAreaLeft,
     );
   }
 
   invariant(className, `${tooltipPosition} is not valid for message tooltip`);
   return { className };
 }
 
 export default MessageActionButton;
diff --git a/web/chat/robotext-message.react.js b/web/chat/robotext-message.react.js
index 7965725a9..9c6938928 100644
--- a/web/chat/robotext-message.react.js
+++ b/web/chat/robotext-message.react.js
@@ -1,221 +1,220 @@
 // @flow
 
 import classNames from 'classnames';
 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 { useSidebarExistsOrCanBeCreated } from 'lib/shared/thread-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 { useSelector } from '../redux/redux-utils';
 import { updateNavInfoActionType } from '../types/nav-types';
 import css from './chat-message-list.css';
 import { InlineSidebar } from './inline-sidebar.react';
 import MessageActionTooltip from './message-action-button';
 import type {
   MessagePositionInfo,
   OnMessagePositionWithContainerInfo,
 } from './position-types';
 import { tooltipPositions } from './tooltip-utils';
 
 const availableTooltipPositionsForRobotext = [
   tooltipPositions.TOP_RIGHT,
   tooltipPositions.RIGHT,
   tooltipPositions.LEFT,
 ];
 
 type BaseProps = {|
   +item: RobotextChatMessageInfoItem,
   +threadInfo: ThreadInfo,
   +setMouseOverMessagePosition: (
     messagePositionInfo: MessagePositionInfo,
   ) => void,
   +mouseOverMessagePosition: ?OnMessagePositionWithContainerInfo,
 |};
 type Props = {|
   ...BaseProps,
   // Redux state
   +sidebarExistsOrCanBeCreated: boolean,
 |};
 class RobotextMessage extends React.PureComponent<Props> {
   render() {
     let inlineSidebar;
     if (this.props.item.threadCreatedFromMessage) {
       inlineSidebar = (
         <div className={css.sidebarMarginTop}>
           <InlineSidebar
             threadInfo={this.props.item.threadCreatedFromMessage}
             positioning="center"
           />
         </div>
       );
     }
 
     const { item, threadInfo, sidebarExistsOrCanBeCreated } = this.props;
     const { id } = item.messageInfo;
     let messageActionTooltip;
     if (
       this.props.mouseOverMessagePosition &&
       this.props.mouseOverMessagePosition.item.messageInfo.id === id &&
       sidebarExistsOrCanBeCreated
     ) {
       messageActionTooltip = (
         <MessageActionTooltip
           threadInfo={threadInfo}
           item={item}
-          onLeave={this.onMouseLeave}
           containerPosition={
             this.props.mouseOverMessagePosition.containerPosition
           }
           availableTooltipPositions={availableTooltipPositionsForRobotext}
         />
       );
     }
 
     let messageActionLinks;
     if (messageActionTooltip) {
       messageActionLinks = (
         <div
           className={classNames(
             css.messageActionLinks,
             css.nonViewerMessageActionLinks,
           )}
         >
           {messageActionTooltip}
         </div>
       );
     }
 
     return (
       <div className={css.robotextContainer}>
         <div
           className={css.innerRobotextContainer}
           onMouseEnter={this.onMouseEnter}
           onMouseLeave={this.onMouseLeave}
         >
           <span>{this.linkedRobotext()}</span>
           {messageActionLinks}
         </div>
         {inlineSidebar}
       </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;
   }
 
   onMouseEnter = (event: SyntheticEvent<HTMLDivElement>) => {
     const { item } = this.props;
     const rect = event.currentTarget.getBoundingClientRect();
     const { top, bottom, left, right, height, width } = rect;
     const messagePosition = { top, bottom, left, right, height, width };
     this.props.setMouseOverMessagePosition({
       type: 'on',
       item,
       messagePosition,
     });
   };
 
   onMouseLeave = () => {
     const { item } = this.props;
     this.props.setMouseOverMessagePosition({ type: 'off', item });
   };
 }
 
 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>;
 }
 
 export default React.memo<BaseProps>(function ConnectedRobotextMessage(
   props: BaseProps,
 ) {
   const sidebarExistsOrCanBeCreated = useSidebarExistsOrCanBeCreated(
     props.threadInfo,
     props.item,
   );
   return (
     <RobotextMessage
       {...props}
       sidebarExistsOrCanBeCreated={sidebarExistsOrCanBeCreated}
     />
   );
 });