diff --git a/web/utils/tooltip-utils.js b/web/utils/tooltip-utils.js --- a/web/utils/tooltip-utils.js +++ b/web/utils/tooltip-utils.js @@ -409,12 +409,33 @@ }, [addReply, item.messageInfo.type, messageInfo, threadInfo]); } +const copiedMessageDurationMs = 2000; function useMessageCopyAction( item: ChatMessageInfoItem, ): ?MessageTooltipAction { const { messageInfo } = item; const [successful, setSuccessful] = React.useState(false); + const timeout = React.useRef(); + + const onSuccess = React.useCallback(() => { + if (timeout.current) { + clearTimeout(timeout.current); + } + setSuccessful(true); + timeout.current = setTimeout(() => { + setSuccessful(false); + timeout.current = null; + }, copiedMessageDurationMs); + }, []); + + React.useEffect(() => { + return () => { + if (timeout.current) { + clearTimeout(timeout.current); + } + }; + }, []); return React.useMemo(() => { if (messageInfo.type !== messageTypes.TEXT) { @@ -424,7 +445,7 @@ const onClick = async () => { try { await navigator.clipboard.writeText(messageInfo.text); - setSuccessful(true); + onSuccess(); } catch (e) { setSuccessful(false); } @@ -434,7 +455,7 @@ onClick, label: successful ? 'Copied!' : 'Copy', }; - }, [messageInfo.text, messageInfo.type, successful]); + }, [messageInfo.text, messageInfo.type, onSuccess, successful]); } function useMessageTooltipActions(