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, @@ -58,29 +60,42 @@ const { containerPosition } = mouseOverMessagePosition; - const [tooltipVisible, setTooltipVisible] = React.useState(false); + const [activeTooltip, setActiveTooltip] = React.useState(); const [pointingTo, setPointingTo] = React.useState(); - const toggleTooltip = React.useCallback( - (event: SyntheticEvent) => { - setTooltipVisible(!tooltipVisible); - if (tooltipVisible) { + const showTooltip = React.useCallback( + (tooltipType: TooltipType, iconPosition: ItemAndContainerPositionInfo) => { + if (activeTooltip) { return; } - const rect = event.currentTarget.getBoundingClientRect(); - const iconPosition: ItemAndContainerPositionInfo = getIconPosition( - rect, - containerPosition, - ); + setActiveTooltip(tooltipType); setPointingTo(iconPosition); }, - [containerPosition, tooltipVisible], + [activeTooltip], ); const hideTooltip = React.useCallback(() => { - setTooltipVisible(false); + setActiveTooltip(null); }, []); + const showSidebarTooltip = React.useCallback( + (event: SyntheticEvent) => { + const rect = event.currentTarget.getBoundingClientRect(); + const iconPosition = getIconPosition(rect, containerPosition); + showTooltip('sidebar', iconPosition); + }, + [containerPosition, showTooltip], + ); + + const showReplyTooltip = React.useCallback( + (event: SyntheticEvent) => { + const rect = event.currentTarget.getBoundingClientRect(); + const iconPosition = getIconPosition(rect, containerPosition); + showTooltip('reply', iconPosition); + }, + [containerPosition, showTooltip], + ); + const { threadCreatedFromMessage, messageInfo } = item; const onThreadOpen = useOnClickThread(threadCreatedFromMessage); @@ -107,12 +122,17 @@ 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) { + if (pointingTo && activeTooltip) { tooltipMenu = ( - + ); } @@ -133,11 +153,18 @@ 'mouseOverMessagePosition must be set if replyButton exists', ); replyButton = ( - +
+ + {activeTooltip === 'reply' ? tooltipMenu : null} +
); } @@ -151,12 +178,12 @@ sidebarButton = (
- {tooltipMenu} + {activeTooltip === 'sidebar' ? tooltipMenu : null}
); }