diff --git a/.changeset/fix-message-separator-today-label.md b/.changeset/fix-message-separator-today-label.md new file mode 100644 index 0000000000000..2c01c36eb35c6 --- /dev/null +++ b/.changeset/fix-message-separator-today-label.md @@ -0,0 +1,5 @@ +--- +'@rocket.chat/livechat': patch +--- + +fix(livechat): show "Today"/"Yesterday" labels in message date separator instead of full date diff --git a/packages/livechat/src/components/Messages/MessageSeparator/index.tsx b/packages/livechat/src/components/Messages/MessageSeparator/index.tsx index 42b69a5e7200a..5402b9e87272a 100644 --- a/packages/livechat/src/components/Messages/MessageSeparator/index.tsx +++ b/packages/livechat/src/components/Messages/MessageSeparator/index.tsx @@ -1,3 +1,4 @@ +import { isToday, isYesterday } from 'date-fns'; import type { TFunction } from 'i18next'; import type { CSSProperties } from 'preact/compat'; import { memo } from 'preact/compat'; @@ -15,6 +16,16 @@ type MessageSeparatorProps = { use?: any; }; +const formatDateLabel = (date: string, t: TFunction): string => { + const d = new Date(date); + if (isToday(d)) return t('today').toUpperCase(); + if (isYesterday(d)) return t('yesterday').toUpperCase(); + return t('message_separator_date', { + val: d, + formatParams: { val: { month: 'short', day: '2-digit', year: 'numeric' } }, + }).toUpperCase(); +}; + // TODO: find a better way to pass `use` and do not default to a string // eslint-disable-next-line @typescript-eslint/naming-convention const MessageSeparator = ({ date, unread, use: Element = 'div', className, style = {}, t }: MessageSeparatorProps) => ( @@ -33,14 +44,7 @@ const MessageSeparator = ({ date, unread, use: Element = 'div', className, style