diff --git a/web/chat/message-action-buttons.css b/web/chat/message-action-buttons.css --- a/web/chat/message-action-buttons.css +++ b/web/chat/message-action-buttons.css @@ -6,6 +6,25 @@ padding: 0 6px; background-color: var(--message-action-tooltip-bg); border-radius: 8px; + width: fit-content; +} + +div.timestampContainer { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + padding: 0 6px; + margin-top: 6px; + background-color: var(--message-action-tooltip-bg); + border-radius: 8px; + color: var(--tool-tip-color); +} + +div.timestampContainer p { + white-space: nowrap; + padding: 5px; + font-size: var(--s-font-14); } div.messageActionButtons { @@ -22,9 +41,13 @@ } div.messageActionButtonsViewer { flex-direction: row; + margin-left: auto; + margin-right: 0; } div.messageActionButtonsNonViewer { flex-direction: row-reverse; + margin-left: 0; + margin-right: auto; } div.messageActionLinkIcon { margin: 0 3px; 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 @@ -7,8 +7,10 @@ import type { ChatMessageInfoItem } from 'lib/selectors/chat-selectors'; import { useSidebarExistsOrCanBeCreated } from 'lib/shared/thread-utils'; import type { ThreadInfo } from 'lib/types/thread-types'; +import { longAbsoluteDate } from 'lib/utils/date-utils.js'; import type { InputState } from '../input/input-state.js'; +import { useSelector } from '../redux/redux-utils.js'; import { useOnClickThread, useOnClickPendingSidebar, @@ -188,6 +190,12 @@ ); } + const timezone = useSelector(state => state.timeZone); + const timestampText = React.useMemo( + () => longAbsoluteDate(messageInfo.time, timezone), + [messageInfo.time, timezone], + ); + const { isViewer } = messageInfo.creator; const messageActionButtonsContainerClassName = classNames({ [css.messageActionContainer]: true, @@ -196,9 +204,14 @@ [css.messageActionButtonsNonViewer]: !isViewer, }); return ( -
- {sidebarButton} - {replyButton} +
+
+ {sidebarButton} + {replyButton} +
+
+

{timestampText}

+
); }