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 @@ -20,6 +20,7 @@ ItemAndContainerPositionInfo, MessagePositionInfo, OnMessagePositionWithContainerInfo, + PositionInfo, } from './position-types'; import { tooltipPositions, type TooltipPosition } from './tooltip-utils'; import { @@ -70,25 +71,7 @@ return; } const rect = event.currentTarget.getBoundingClientRect(); - const { top, bottom, left, right, width, height } = rect; - - const iconPosition: ItemAndContainerPositionInfo = { - containerPosition, - itemPosition: { - top: - top - - containerPosition.top + - messageActionIconExcessVerticalWhitespace, - bottom: - bottom - - containerPosition.top - - messageActionIconExcessVerticalWhitespace, - left: left - containerPosition.left, - right: right - containerPosition.left, - width, - height: height - messageActionIconExcessVerticalWhitespace * 2, - }, - }; + const iconPosition = getIconPosition(rect, containerPosition); setPointingTo(iconPosition); }, [containerPosition, tooltipVisible], @@ -255,4 +238,26 @@ return { className }; } +function getIconPosition( + rect: ClientRect, + containerPosition: PositionInfo, +): ItemAndContainerPositionInfo { + const { top, bottom, left, right, width, height } = rect; + return { + containerPosition, + itemPosition: { + top: + top - containerPosition.top + messageActionIconExcessVerticalWhitespace, + bottom: + bottom - + containerPosition.top - + messageActionIconExcessVerticalWhitespace, + left: left - containerPosition.left, + right: right - containerPosition.left, + width, + height: height - messageActionIconExcessVerticalWhitespace * 2, + }, + }; +} + export default MessageActionButtons;