diff --git a/src/components/Message/Message.tsx b/src/components/Message/Message.tsx index 5797f60..49e5a19 100644 --- a/src/components/Message/Message.tsx +++ b/src/components/Message/Message.tsx @@ -1,5 +1,6 @@ import { HTMLAttributes } from 'react' import Box from '@mui/material/Box' +import Tooltip from '@mui/material/Tooltip' import Typography, { TypographyProps } from '@mui/material/Typography' import Link, { LinkProps } from '@mui/material/Link' import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter' @@ -72,6 +73,8 @@ const componentMap = { }, } +const spaceNeededForSideDateTooltip = 850 + export const Message = ({ message, showAuthor, userId }: MessageProps) => { let backgroundColor: string @@ -96,27 +99,39 @@ export const Message = ({ message, showAuthor, userId }: MessageProps) => { {message.authorId} )} - = spaceNeededForSideDateTooltip ? 'left' : 'top' + } + title={String( + Intl.DateTimeFormat(undefined, { + dateStyle: 'short', + timeStyle: 'short', + }).format(message.timeSent) + )} > - - {message.text} - - + + {message.text} + + + ) }