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
{(date || unread) && ( - {(!!date && - t('message_separator_date', { - val: new Date(date), - formatParams: { - val: { month: 'short', day: '2-digit', year: 'numeric' }, - }, - }).toUpperCase()) || - (unread && t('unread_messages'))} + {(!!date && formatDateLabel(date, t)) || (unread && t('unread_messages'))} )}
diff --git a/packages/livechat/src/i18n/en.json b/packages/livechat/src/i18n/en.json index c4af354b49c45..1dc60beef97d7 100644 --- a/packages/livechat/src/i18n/en.json +++ b/packages/livechat/src/i18n/en.json @@ -59,6 +59,8 @@ "message": "Message", "messages": "Messages", "message_separator_date": "{{val, datetime}}", + "today": "Today", + "yesterday": "Yesterday", "message_time": "{{val, datetime}}", "minimize_chat": "Minimize chat", "name": "Name",