diff --git a/web/chat/message-action-buttons.js b/web/chat/message-action-buttons.js --- a/web/chat/message-action-buttons.js +++ b/web/chat/message-action-buttons.js @@ -33,6 +33,8 @@ const openSidebarText = 'Go to sidebar'; const createSidebarText = 'Create sidebar'; +type MessageActions = 'sidebar' | 'reply'; + type MessageActionButtonsProps = { +threadInfo: ThreadInfo, +item: ChatMessageInfoItem, @@ -58,6 +60,7 @@ const { containerPosition } = mouseOverMessagePosition; const [tooltipVisible, setTooltipVisible] = React.useState(false); + const [activeTooltip, setActiveTooltip] = React.useState(); const [pointingTo, setPointingTo] = React.useState(); const toggleTooltip = React.useCallback( @@ -102,6 +105,23 @@ messageInfo, threadInfo, ); + + const toggleSidebarTooltip = React.useCallback( + (event: SyntheticEvent) => { + setActiveTooltip('sidebar'); + toggleTooltip(event); + }, + [toggleTooltip], + ); + + const toggleReplyTooltip = React.useCallback( + (event: SyntheticEvent) => { + setActiveTooltip('reply'); + toggleTooltip(event); + }, + [toggleTooltip], + ); + const onSidebarButtonClick = React.useCallback( (event: SyntheticEvent) => { if (threadCreatedFromMessage) { @@ -121,9 +141,14 @@ setMouseOverMessagePosition({ type: 'off', item: item }); }, [item, setMouseOverMessagePosition]); - const sidebarTooltipButtonText = threadCreatedFromMessage - ? openSidebarText - : createSidebarText; + let tooltipText = ''; + if (activeTooltip === 'reply') { + tooltipText = 'Reply'; + } else if (activeTooltip === 'sidebar') { + tooltipText = threadCreatedFromMessage + ? openSidebarText + : createSidebarText; + } let tooltipMenu = null; if (pointingTo && tooltipVisible) { @@ -134,7 +159,7 @@ layoutPosition="relative" getStyle={getMessageActionTooltipStyle} > - + ); } @@ -147,11 +172,18 @@ 'mouseOverMessagePosition must be set if replyButton exists', ); replyButton = ( - +
+ + {activeTooltip === 'reply' ? tooltipMenu : null} +
); } @@ -167,10 +199,10 @@ className={css.messageActionLinkIcon} onMouseLeave={hideTooltip} onClick={onSidebarButtonClick} - onMouseEnter={toggleTooltip} + onMouseEnter={toggleSidebarTooltip} > - {tooltipMenu} + {activeTooltip === 'sidebar' ? tooltipMenu : null} ); }