fix: show 'Today'/'Yesterday' labels in message separator instead of full date

Author: Varun789-mx

packages/livechat/src/components/Messages/MessageSeparator/index.tsx

@@ -15,6 +15,33 @@ type MessageSeparatorProps = {
 	use?: any;
 };
 
+const isSameDay = (a: Date, b: Date) =>
+	a.getFullYear() === b.getFullYear() &&
+	a.getMonth() === b.getMonth() &&
+	a.getDate() === b.getDate();
+
+
+const getDateLabel = (date: string, t: TFunction): string => {
+	const messageDate = new Date(date);
+	if (isNaN(messageDate.getTime())) {
+		return '';
+	}
+	const today = new Date();
+	const yesterday = new Date();
+	yesterday.setDate(today.getDate() - 1);
+
+
+	if (isSameDay(messageDate, today)) return t('today');
+	if (isSameDay(messageDate, yesterday)) return t('yesterday');
+
+	return t('message_separator_date', {
+		val: messageDate,
+		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,13 +60,7 @@ const MessageSeparator = ({ date, unread, use: Element = 'div', className, style
 		<hr className={createClassName(styles, 'separator__line')} />
 		{(date || unread) && (
 			<span className={createClassName(styles, 'separator__text')}>
-				{(!!date &&
-					t('message_separator_date', {
-						val: new Date(date),
-						formatParams: {
-							val: { month: 'short', day: '2-digit', year: 'numeric' },
-						},
-					}).toUpperCase()) ||
+				{(!!date && getDateLabel(date, t)) ||
 					(unread && t('unread_messages'))}
 			</span>
 		)}