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 @@ -34,6 +34,8 @@ const openSidebarText = 'Go to sidebar'; const createSidebarText = 'Create sidebar'; +type TooltipType = 'sidebar' | 'reply'; + type MessageActionButtonsProps = { +threadInfo: ThreadInfo, +item: ChatMessageInfoItem, @@ -59,9 +61,10 @@ const { containerPosition } = mouseOverMessagePosition; const [tooltipVisible, setTooltipVisible] = React.useState(false); + const [activeTooltip, setActiveTooltip] = React.useState(); const [pointingTo, setPointingTo] = React.useState(); - const toggleTooltip = React.useCallback( + const showTooltip = React.useCallback( (event: SyntheticEvent) => { setTooltipVisible(!tooltipVisible); if (tooltipVisible) { @@ -81,6 +84,22 @@ setTooltipVisible(false); }, []); + const showSidebarTooltip = React.useCallback( + (event: SyntheticEvent) => { + setActiveTooltip('sidebar'); + showTooltip(event); + }, + [showTooltip], + ); + + const showReplyTooltip = React.useCallback( + (event: SyntheticEvent) => { + setActiveTooltip('reply'); + showTooltip(event); + }, + [showTooltip], + ); + const { threadCreatedFromMessage, messageInfo } = item; const onThreadOpen = useOnClickThread(threadCreatedFromMessage); @@ -107,9 +126,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) { @@ -120,7 +144,7 @@ layoutPosition="relative" getStyle={getMessageActionTooltipStyle} > - + ); } @@ -133,11 +157,18 @@ 'mouseOverMessagePosition must be set if replyButton exists', ); replyButton = ( - +
+ + {activeTooltip === 'reply' ? tooltipMenu : null} +
); } @@ -151,12 +182,12 @@ sidebarButton = (
- {tooltipMenu} + {activeTooltip === 'sidebar' ? tooltipMenu : null}
); }